Nuxt server middleware doesn't work on Firebase Cloud Functions

Question

I'm trying to deploy a Nuxt app on Firebase to take advantage of SSR. This app use Nuxt server middleware as an API endpoint (to send mail).

It works fine locally, but not once deployed, nor emulated. I get a 404 response when I try to query it and I don't understand why. Did someone already managed to create an API endpoint on Firebase using Nuxt middleware ?

NB: The repo link I shared only contains the bare minimum to reproduce the issue (not my entire app).

nuxt.config.js

const webpack = require("webpack")
const { config } = require('dotenv')
config({ path: `../.env` })

module.exports = {
  mode: "universal",
  ...
  modules: [
    "@nuxtjs/pwa",
    [
      "@nuxtjs/firebase",
      {
        config: { ... },
        services: {
          analytics: true,
          performance: true,
          functions: true
        },
        onFirebaseHosting: true,
      }
    ]
  ],
  buildModules: ["@nuxtjs/axios"],
  serverMiddleware: ["./api/contact"],
  ...
}

src/index.js

const functions = require("firebase-functions")
const express = require("express")
const { Nuxt, Builder } = require("nuxt")
const cors = require('cors')
const app = express()

app.use(cors({ origin: true }))

const config = {
  dev: false,
  buildDir: ".nuxt",
  build: {
    publicPath: "/assets/"
  }
}
const nuxt = new Nuxt(config)

exports.nuxtapp = functions.https.onRequest(async (req, res) => {
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  } else {
    res.set("Cache-Control", "public, max-age=300, s-maxage=600");
    await nuxt.ready()
  }
  app.use(nuxt.render)
  return app(req, res)
})

src/api/contact.js

const express = require("express")

const app = express()
app.use(express.json())

app.get("/", function (req, res) {
  res.status(405).json({ error: "Query invalid" });
})

app.post("/", function (req, res) {
  ...
})

module.exports = {
  path: "/api/contact",
  handler: app
}

Debugging logs

[debug] [2021-02-05T03:22:21.137Z] [functions] Got req.url=/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/, mapping to path=/api/contact/ {"metadata":{"emulator":{"name":"functions"},"message":"[functions] Got req.url=/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/, mapping to path=/api/contact/"}}
[debug] [2021-02-05T03:22:21.158Z] [runtime-status] [22988] Ephemeral server handling POST request {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"[runtime-status] [22988] Ephemeral server handling POST request"}}
[info] >  » Rendering url /api/contact/ {"user":"» Rendering url /api/contact/","metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"\u001b[90m> \u001b[39m » Rendering url /api/contact/"}}
[debug] [2021-02-05T03:22:21.160Z] [runtime-status] [22988] Ephemeral server survived. {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"[runtime-status] [22988] Ephemeral server survived."}}
[debug] [2021-02-05T03:22:21.192Z] <<< [apiv2][status] POST http://localhost:5001/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/ 404
[debug] [2021-02-05T03:22:21.193Z] <<< [apiv2][body] POST http://localhost:5001/nuxt-firebase-ssr-41d40/us-central1/nuxtapp/api/contact/ [stream]
[info] i  hosting: 127.0.0.1 - - [05/Feb/2021:03:22:21 +0000] "POST /api/contact/ HTTP/1.1" 404 - "http://localhost:5000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36" {"metadata":{"emulator":{"name":"hosting"},"message":"127.0.0.1 - - [05/Feb/2021:03:22:21 +0000] \"POST /api/contact/ HTTP/1.1\" 404 - \"http://localhost:5000/\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36\""}}
[info] i  functions: Finished "nuxtapp" in ~1s {"metadata":{"emulator":{"name":"functions"},"function":{"name":"nuxtapp"},"message":"Finished \"nuxtapp\" in ~1s"

Answer 1

I'm not too familiar with nuxt, but it looks like you aren't loading your config into the instance you make in src/index.js . I believe it should be:

const config = require('./nuxt.config.js')
const nuxt = new Nuxt(config)

At the very least, your config object in src/index.js probably needs to have the serverMiddleware property defined. I'm pretty sure that new Nuxt() does not automatically load the nuxt.config.js file.