如何通过 Gitlab 将 Nuxt.js（带有 Express.js 的 SSR）部署到 Vercel？

Question

我已经成功构建了我的应用程序，剩下的步骤就是通过我在Gitlab上的仓库部署到主机Vercel

我使用Nuxt.js（SSR 类型）和服务器Express.js和Nuxt.js Now Builder通过 repo Gitlab 部署主机 Vercel

这是结构

api/
--| index.js
now.json
nuxt.config.js

在index.js中

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const products = require("./routes/product/products");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Import API Routes
app.use(products);

// Export the server middleware
module.exports = {
  path: "/api",
  handler: app
};

在now.json

{
    "version": 2,
    "builds": [
        {
            "src": "nuxt.config.js",
            "use": "@nuxtjs/now-builder",
            "config": {
                "serverFiles": [
                    "package.json"
                ]
            }
        }
    ]
}

在nuxt.config.js

...
serverMiddleware: [
    // API middleware
    "~/api/index.js"
  ]
...

根据Vercel 文档，部署非常简单，只需将代码提交并推送到 Gitlab 即可完成

但是，我总是收到如下错误 我不明白为什么？ 我不知道我错过了什么。 请帮助我，我非常感谢您的帮助

Answer 1

narze，谢谢您的解决方案，不幸的是它对我不起作用，但为我指明了正确的方向。

这是我现在的工作。json ：

{
    "version": 2,
    "env": {
        "ON_VERCEL": "true"
    },
    "builds": [
        {
            "src": "api/**/*.js",
            "use": "@now/node"
        },
        {
            "src": "nuxt.config.js",
            "use": "@nuxtjs/now-builder"
        }
    ],
    "routes": [
        {  "src": "/api/(.*)", "dest": "api/index.js" },
        { "src": "/api", "dest": "api/index.js" },
        { "src": "/(.*)", "dest": "$1" }
    ]
}

nuxt.config.js中的服务器中间件

serverMiddleware: isServerlessEnvironment ? [] : [
  '~/api/index.js'
],

其中isServerlessEnvironment在 nuxt.config.js 的最顶部定义为

const isServerlessEnvironment = process.env.ON_VERCEL=="true"

• API 文件需要用@now/node 编译。
• 需要设置路由以将 nuxt 路由与 api 路由分开。
• 使用 nuxt.config.js 中的条件isServerlessEnvironment它可以在本地服务器上使用yarn dev和 vercel 服务器。

本文致谢： Nuxt.js 与 Express.js API 服务器在 Now.sh 上运行

谢谢大家的帮助：）

Answer 2

我在Vercel上使用返回405 (Not Allowed)的serverMiddleware部署Nuxt时遇到了类似的问题。 我通过在vercel.json中指定属性serverFiles使用此文档Nuxt Vercel Builder解决了它：

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["server-middleware/**"]
      }
    }
  ]
}

如果您需要在服务器 lambda 中包含不是由 webpack 构建的文件或在 static/ 中的文件，例如本地模块或 serverMiddleware，您可以使用此选项指定它们。 每个项目都可以是一个 glob 模式。

Answer 3

我知道现在有点晚了哈哈。 但是我写了一篇文章来演示在 Vercel 上启动并运行您的应用程序的整个过程。 你可以在这里找到它。