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

【问题标题】：How to deploy Nuxt.js(SSR with Express.js) to Vercel via Gitlab?如何通过 Gitlab 将 Nuxt.js（带有 Express.js 的 SSR）部署到 Vercel？
【发布时间】：2020-09-10 11:10:19
【问题描述】：

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

上的 repo 将其部署到主机 Vercel

我使用 Nuxt.js(SSR type) 与服务器 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 documentation，部署非常简单，只需提交并推送代码到Gitlab即可完成

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

【问题讨论】：

您找到解决方案了吗？请分享一下好吗？我正在努力使用相同的设置。谢谢你:)
@AlexanderBenjamin 在 now.json 中，"serverFiles" 应该指向与 nuxt 的默认值 (.nuxt) 一起包含的文件，在这种情况下是用于 serverMiddleware 的路径。所以你必须将"api/**" 添加到serverFiles 配置
嗨，Alexander Benjamin，直到现在，我还没有找到任何解决方案，我已经放弃了，因为文档和支持社区太少了。我被它冻结了，所以我切换到另一个平台：D
嗨？你找到解决方案了吗？经过几个小时，我得到了解决方案。如果没有，请告诉我，也许我可以帮助你
@AlauddinAfifCassandra 你能分享一下解决方案吗？

标签： express vue.js nuxt.js middleware vercel

【解决方案1】：

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

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

感谢大家的帮助:)

【讨论】：

嗨@TT。我确实在问一个问题。对不起，我相信我点击了“添加评论”链接。有没有办法纠正这个问题？
@TT.，我刚刚找到了解决方案。所以我将删除当前的答案并发布正确的、实际的答案:) 谢谢:)

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：