Remix部署概述 #

一、部署选项 #

Remix 支持多种部署平台，可以根据需求选择合适的方案。

二、部署适配器 #

2.1 内置适配器 #

适配器	说明
`@remix-run/node`	Node.js服务器
`@remix-run/cloudflare`	Cloudflare Workers
`@remix-run/deno`	Deno运行时

2.2 社区适配器 #

@remix-run/vercel - Vercel
@remix-run/netlify - Netlify
@remix-run/architect - AWS Architect

2.3 配置适配器 #

vite.config.ts：

typescript

import { defineConfig } from "vite";
import remix from "@remix-run/dev/vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      serverAdapterPackage: "@remix-run/express",
    }),
    tsconfigPaths(),
  ],
});

三、构建命令 #

3.1 开发模式 #

bash

npm run dev

3.2 生产构建 #

bash

npm run build

3.3 启动生产服务器 #

bash

npm run start

四、环境变量 #

4.1 定义环境变量 #

创建 .env 文件：

text

DATABASE_URL="postgresql://..."
SESSION_SECRET="your-secret-key"
PUBLIC_API_URL="https://api.example.com"

4.2 使用环境变量 #

服务端：

tsx

export async function loader() {
  const dbUrl = process.env.DATABASE_URL;
  // ...
}

客户端（以 PUBLIC_ 开头）：

tsx

const apiUrl = window.ENV.PUBLIC_API_URL;

4.3 暴露客户端环境变量 #

entry.server.tsx：

tsx

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const shellHtml = `
    <!DOCTYPE html>
    <html>
      <head>
        <script>
          window.ENV = {
            PUBLIC_API_URL: "${process.env.PUBLIC_API_URL}"
          };
        </script>
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>
  `;
  // ...
}

五、静态资源 #

5.1 public目录 #

静态资源放在 public 目录：

text

public/
├── favicon.ico
├── images/
│   └── logo.png
└── fonts/
    └── inter.woff2

5.2 访问静态资源 #

text

/images/logo.png
/fonts/inter.woff2

六、构建输出 #

6.1 构建目录结构 #

text

build/
├── client/           # 客户端资源
│   ├── assets/
│   └── index.html
└── server/           # 服务端资源
    └── index.js

6.2 清理构建 #

bash

rm -rf build
npm run build

七、部署检查清单 #

[ ] 设置环境变量
[ ] 构建生产版本
[ ] 测试生产构建
[ ] 配置数据库连接
[ ] 设置Session密钥
[ ] 配置CDN（可选）
[ ] 设置监控和日志

八、总结 #

本章我们学习了：

部署适配器：选择合适的适配器
构建命令：开发和生产构建
环境变量：配置和管理
静态资源：public目录使用
部署检查：部署前检查清单

核心要点：

根据平台选择适配器
正确配置环境变量
测试生产构建