How to deploy Nuxt.js(SSR with Express.js) to Vercel via Gitlab?

user_12557324 0
Viewed 3463

I have successfully built my app and only remain step is deploy to the host Vercel via my repo on Gitlab

I use Nuxt.js(SSR type) with server Express.js and Nuxt.js Now Builder to deploy host Vercel via repo Gitlab

This is structure

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

In 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
};

In now.json

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

And in nuxt.config.js

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

According to Vercel documentation, deploying is very easy, just commit and push code to Gitlab to complete

However, i always get error as below enter image description here I don't understand why? I don't know what i missed. Please help me and i'm very grateful for the help

vercel nuxt.js vue.js express middleware
3 Answers

narze, thank you for your solution, unfortunately it didn't work for me but pointed me in the right direction.

Here is my working 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" }
    ]
}

serverMiddleware in nuxt.config.js

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

where isServerlessEnvironment defined on the very top of nuxt.config.js as

const isServerlessEnvironment = process.env.ON_VERCEL=="true"
  • API files need to be compiled with @now/node.
  • Routes need to be set up to separate nuxt routes from api routes.
  • With conditional isServerlessEnvironment in nuxt.config.js it works on local server with yarn dev and vercel server.

Credits to this article: Nuxt.js with an Express.js API server running on Now.sh

Thank you all for being helpful :)

user_39674220

I have similar problem with deploying Nuxt on Vercel with serverMiddleware's which returned 405 (Not Allowed). I solved it using this doc Nuxt Vercel Builder by specifying property serverFiles in vercel.json:

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

If you need to include files in the server lambda that are not built by webpack or within static/, such as a local module or serverMiddleware, you may specify them with this option. Each item can be a glob pattern.

user_8367010

I know it's a bit late now lol. But I wrote an article to demonstrate the whole process to get your app up and running on Vercel. You can find it here.

user_112236330
Related