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

Question

我已经成功构建了我的应用程序，仅剩下的步骤就是通过我在 Gitlab

上的存储库将其部署到主机 Vercel

我将 Nuxt.js（SSR类型）与服务器 Express.js 和Nuxt.js Now Builder一起通过仓库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 documentation，部署非常简单，只需提交代码并将其推送到Gitlab即可完成

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

Answer 1

纳兹，谢谢您的解决方案，很遗憾，它对我没有用，但为我指明了正确的方向。

这是我的工作 now.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

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 with an Express.js API server running on Now.sh

谢谢大家的帮助：）

Answer 2

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

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

<块引用>

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

Answer 3

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