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

2024-05-14 • 问答

我已经成功构建了我的应用程序，仅剩下的步骤就是通过我在 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即可完成

但是，我总是收到如下错误

我不明白为什么？我不知道我错过了什么。请帮助我，我非常感谢您的帮助

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

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

谢谢大家的帮助：）

我在 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，您可以使用此选项指定它们。每个项目都可以是一个全局模式。

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

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

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

大家都在问