如何在Vercel上部署Vite + React SSR应用？

Question

我正在尝试在vercel上部署一个Vite应用程序，该应用程序使用express进行SSR。

express 服务器运行成功，但 vercel 没有部署构建的文件（dist/server 和 dist/client，参见 Vite SSR 指南）

然后我更改了 vercel 构建输出配置，希望这能将文件复制过来：

{
  "version": 3,
  "cache": ["./api/*", "./dist/server/*", "./dist/client/*"]
}

现在除了静态中间件文件之外，它根本不输出任何文件。

如何配置 vercel 来输出在构建步骤中创建的文件夹 dist/server 和 dist/client？

网上实在找不到这方面的资料

Answer 1

我遇到了同样的问题，但找到了解决方案（感谢这篇文章）：

首先，重要的是要声明我们正在使用本指南和此存储库。

1. 将您的

   server.js

   分成 2 个文件：

• server.js

... // imports & constants (without port)

export const app = express();

... // server code

• 启动服务器.js

// Start http server
import { app } from './server.js';

const port = process.env.PORT || 5173;

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

这将允许您仍然在本地启动您的应用程序。

2. 在您的项目目录中，创建一个目录

   api

   并在其中放置一个文件

   index.js

   ，其中包含：

import { app } from '../server.js';

export default app;

我们这样做是为了让 Vercel 将我们的服务器作为无服务器功能启动。 Vercel 无法使用

app.listen()

。

3. 在您的项目目录中，创建一个文件

   vercel.json

   ，其中包含：

{
  "version": 2,
  "public": true,
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/index.js" }
  ],
  "functions": {
    "api/index.js": {
      "includeFiles": "dist/client/**"
    }
  }
}

rewrites

将所有请求转发到无服务器函数。

includeFiles

允许提供目录和访问文件。

4. 照常部署。