在 vercel 上部署 Express 服务器时遇到问题 [404 页面未找到]

Question

我尝试在 vercel 上部署我的 Express 服务器来解决我的前端代码上的 cors 问题

问题是进入部署页面时弹出404错误

但是当我在本地主机上尝试时一切顺利

// vercel.json       
{
      "version": 2,
      "builds": [
        {
          "src": "./index.js",
          "use": "@vercel/node"
        }
      ],
      "routes": [
        {
          "src": "/(.*)",
          "dest": "/"
        }
      ],
      "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
    }

//index.js
const express = require("express");
const cors = require("cors");
const axios = require("axios");

const app = express();

const PORT = process.env.PORT || 3000;
require("dotenv").config();

let corsOptions = {
  origin: ["http://localhost:3000", "https://humanscape-team5a.netlify.app"],
};

app.use(cors(corsOptions));

app.get("/", (req, res) => {
  const textQuery = req.query.searchText;
  const numOfRowsQuery = req.query.numOfRows;

  axios
    .get(
      "http://apis.data.go.kr/B551182/diseaseInfoService/getDissNameCodeList",
      {
        params: {
          sickType: 1,
          medTp: 2,
          diseaseType: "SICK_NM",
          searchText: textQuery,
          ServiceKey: process.env.KEY,
          numOfRows: numOfRowsQuery,
          _type: "json",
        },
      }
    )
    .then(response => res.send(response.data));
});

app.listen(PORT, () => {
  console.log(`Server running on ${PORT}`);
});

由于它在本地主机上工作，我猜这是一种 vercel 设置问题。 有什么想法吗？

Answer 1

不确定您是否仍在寻找解决方案，但经过一些重大试验和错误后我确实解决了这个问题。

首先，vercel 似乎需要一个

/api

文件夹，其中包含

index.js

文件才能工作。最初，我很困惑，因为我的 index.js 文件在本地工作时也被用来启动我的服务器。 Vercel 基本上取代了本地服务器文件。您仍然应该将其留作本地测试，但在使用 vercel 时基本上可以忽略它。

在您的

/api/index.js

文件中，您将保存您的路线。

./api/index.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('../routes/index');

var app = express();

const whitelist = [
  '*'
];

app.use((req, res, next) => {
  const origin = req.get('referer');
  const isWhitelisted = whitelist.find((w) => origin && origin.includes(w));
  if (isWhitelisted) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,Authorization');
    res.setHeader('Access-Control-Allow-Credentials', true);
  }
  // Pass to next layer of middleware
  if (req.method === 'OPTIONS') res.sendStatus(200);
  else next();
});

const setContext = (req, res, next) => {
  if (!req.context) req.context = {};
  next();
};
app.use(setContext);

app.use('/', indexRouter);

module.exports = app;

我的

vercel.json

文件是...

// vercel.json

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

不确定这是否有帮助，但这对我有用。最重要的是将你的 index.js 路由文件嵌套在 api 文件夹中。

Answer 2

文档说node.js应用程序需要项目根目录中的

api/

文件夹。这意味着您的

index.js

必须位于此文件夹内。 重要提示：如果您的索引名为

app.js

必须重命名为

index.js

链接说：“要部署无服务器 Node.js API，请在项目根目录的 /api 目录中的 .js 文件中创建一个函数：”

Answer 3

我的文件名为

app.js

而不是

index.js

首先，我将其重命名为

app.js

至

index.js

==> 更改此对我有用。

package.json

...
  "scripts": {
    "start": "node index.js",
    "server": "nodemon index.js"
  },
...

vercel.json

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

Answer 4

如果您尝试为节点应用程序部署进行渲染，这将会有所帮助。它对我有用。

注意：我多次尝试在 Vercel 上部署我们的 Node Express 应用程序，但没有成功。在 Vercel 中不可能有服务器运行的 Web 应用程序。 Vercel 是一个用于静态前端和无服务器功能的云平台。

Answer 5

首先，如上所述，主启动文件应该位于“api”文件夹内（api 文件夹位于 root 中），如果是 app.js ，则名称必须更改为 index.js ，如果是 typescript ，则必须更改为 index.ts 。

vercel.json 的配置应位于根文件夹中，内容如下：

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

最好查找有关任何应用程序部署的专门公司文档以了解最近的更改。如果在 Vercel 上进行快速部署，则为 有关快速部署的 Vercel 文档