如何通過 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 上啟動並運行您的應用程序的整個過程。 你可以在這里找到它。