如何将 ExpressJS 节点应用程序部署到 Vercel。收到 404：NOT_FOUND 错误

Question

我可以找到很多很多很多帖子似乎与我有同样的问题，但没有一个有有效的答案（也没有被接受）。而且问题要么不准确，要么缺乏信息。所以这里（再次）：

我正在开发 ExpressJS、TypeScript 和 Node 应用程序，从这个模板开始：TypeScript-Express-Starter。我尝试将其部署到 Vercel，但不断收到 404 错误：

图片中的链接：“单击此处了解有关此错误的更多信息”。

我认为这些是正确的 Vercel 设置：

• 构建命令： npm run build
• 输出目录： dist
• 安装命令： npm install

我通过 Nodemon 在本地运行它并且可以工作。有关更多信息，请参阅nodemon.json 。

首要问题：如何让这个节点应用程序（在本地运行）在 Vercel 上运行？

---

解决方案尝试 1：让一些节点应用程序在 Vercel 上运行

我找到了这篇中等文章：How to Deploy Node Express API to Vercel Serverless Functions，它将精简的 Node 应用程序部署到 Vercel。我尝试按照这些步骤操作，将这些文件添加到我现有的项目中。

那行得通！

有了这些文件，它就成功了！我现在可以看到这个：

在我的临时 Vercel-URL 上：https ://projectname-c3ddpx8f7-mysecretgithubhandle.vercel.app/

注意事项：

• vercel.json文件将路由从根目录（而不是dist）指向index.js根目录中的文件。我的 Vercel-build-settings（在上面列出）仍然相同。诡异的！
• index.js 文件也位于根目录中，而不是在编译目录中。

我在想，如果我只是需要将编译的项目移出dist和移入根目录？但这似乎太愚蠢了，我什至没有尝试过。因为这也意味着提交编译的文件。

解决方案尝试2：修改vercel.json-file

由于解决方案尝试 1显示了一些内容，然后我尝试修改vercel.json为：

{
  "version": 2,
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@now/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js"
    }
  ]
}

但后来我又回到了404。

解决方案尝试3：这是ExpressJS和Vercel不兼容吗？

在解决方案尝试 1 中，在 index.js 文件中，
app.listen(PORT, () => {... 行和
app.get('/', (req, res) => {... 行位于同一文件中。

这是否使得这个 Node-ExpressJS 应用程序奇迹般地爬过这个无服务器架构的针孔，从而适用于像这样的小例子？
但是 ExpressJS 的更大设置不起作用？嗯...

其他想法

• SSH：我考虑尝试通过 SSH 连接到服务器并在那里使用它。但由于它是无服务器架构，这是不可能的。
• 404 的原因：如何找出这个 404 错误的来源？我可以在 ExpressJS 中捕获它作为调试它的步骤吗？也许有类似的东西：app.on('error', (error) => console.error('Server error', error));
• Node无法在框架中进行选择：这让我很困惑，在创建新项目时我无法Node从框架列表中进行选择。另一个暗示 Vercel 和 Node 可能不会齐头并进。但如果是这样的话，为什么解决方案尝试 1 中的简单示例会起作用？！唔！！
• 的变体vercel.json：我几乎尝试了我的vercel.json文件中的所有更改组合，但没有运气。
• 不鼓励routes和builds：当阅读 Vercel 关于路由和构建的文档时，两个部分都以不鼓励使用它开始。另一个不兼容的暗示。

更新 - 我的建议

如果您像我一样尝试这样做并想知道：“我可以这样做吗”？那么我的建议是：不要！！。我已经尝试了很长时间，感觉缺乏关于 Vercel 和 NodeJS（至少是 ExpressJS）的信息和社区。这是一场艰苦的战斗。我最终选择了另一种方式（将应用程序部署到我自己的小型 VPS 上）。

Answer 1

独立快递

要在 Vercel 上部署独立的 Express 应用程序，您需要创建一个index.js文件并将其添加到/api文件夹中。

const app = require('express')();
const { v4 } = require('uuid');

app.get('/api', (req, res) => {
  const path = `/api/item/${v4()}`;
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 's-max-age=1, stale-while-revalidate');
  res.end(`Hello! Go to item: <a href="${path}">${path}</a>`);
});

app.get('/api/item/:slug', (req, res) => {
  const { slug } = req.params;
  res.end(`Item: ${slug}`);
});

module.exports = app;

接下来，您需要在vercel.json项目根目录的文件中添加重写。

{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

添加公共目录

/public您可以通过将文件夹添加到项目的根目录来提供静态内容。

由于您使用的是 TypeScript，因此确保 TypeScript 代码正确编译并且输出位于预期位置非常重要。

有关此主题的更多信息，请参阅Vercel 网站上的本指南。