'How to deploy Nuxt SSR in Firebase with Cloud functions

I'm playing with Nuxt in mode SSR and Firebase + Cloud functions, after deploy, everything working fine, no errors in the console from nuxt project, no errors in the functions log, but I got a page with this message: Page Not Found.

I've followed this tutorial: https://www.youtube.com/watch?v=_aTvdnqY3ek

This is my firebase.json


    {
      "functions": {
        "source": "functions",
        "predeploy": [
          "npm run build && rm -rf functions/nuxt && cp -r .nuxt/ functions/nuxt/ && cp nuxt.config.js functions/"
        ]
      },
      "hosting": {
        "predeploy": [
          "rm -rf public/* && mkdir -p public/_nuxt && cp -r .nuxt/dist/client/ public/_nuxt && cp -a static/. public/"
        ],
        "public": "public",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [
          {
            "source": "**",
            "functions": "ssrapp"
          }
        ]
      }
    }

My functions/index.js


    const functions = require('firebase-functions')
    
    const { Nuxt } = require('nuxt-start')
    
    const nuxtConfig = require('./nuxt.config.js')
    
    const config = {
      ...nuxtConfig,
      dev: false,
      debug: false,
      buildDir: 'nuxt'
    }
    
    const nuxt = new Nuxt(config)
    
    exports.ssrapp = functions.https.onRequest(async (req, res) => {
      await nuxt.ready()
      nuxt.render(req, res)
    })
    

My nuxt.config.js


    module.exports = {
    
        ssr: true,
        server: {
          port: 3400
        },
      
        /*
         ** Headers of the page
         */
        head: {
          htmlAttrs: {
            lang: 'es-ES'
          },
          meta: [
            { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' }
          ],
          link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
          link: [
            {
              rel: 'stylesheet',
              href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css'
            }
          ]
        },
      
        /*
         ** Customize the progress-bar color
         */
        loading: { color: '#fff' },
      
        /*
         ** Global CSS
         */
        css: ['~/assets/css/style.css', 'assets/css/bootstrap.min.css', 'assets/css/custom.css'],
        script: [
          {
            src: '~/assets/js/bootstrap.bundle.min.js',
            type: 'text/javascript'
          }
        ],
      
        router: {
          // customize nuxt.js router (vue-router).
          middleware: 'i18n' // middleware all pages of the application
        },
        /*
         ** Plugins to load before mounting the App
         */
        plugins: [
          '~/plugins/i18n.js',
          '~/plugins/fontawesome.js',
          { src: '~/plugins/vue-carousel.js', mode: 'client' }
        ],
      
        /*
         ** Google Fonts
         */
        googleFonts: {
          families: {
            Acme: true,
            'Acme+Sans': true,
            Lato: [100, 300],
            Raleway: {
              wght: [100, 400],
              ital: [100]
            }
          }
        },
      
        /*
         ** Nuxt.js modules
         */
        modules: [
          '@nuxtjs/device',
          '@neneos/nuxt-animate.css',
          '@nuxtjs/moment',
          ['@nuxtjs/google-fonts'],
          [
            '@nuxtjs/google-analytics',
            {
              id: 'UA-00000-0000000'
            }
          ],
          [
            'nuxt-validate',
            {
              lang: 'es',
              nuxti18n: {
                locale: {
                  'es-ES': 'es_ES'
                }
              }
            }
          ]
        ],
      
        webfontloader: {
          google: {
            families: ['Open+Sans:400,700']
          }
        },
        /*
         ** Build configuration
         */
        build: {
          // publicPath: 'nxt',
          /*
           ** You can extend webpack config here
           */
          vendor: [
            'vue-i18n' // webpack vue-i18n.bundle.js
          ],
      
          extend(config, ctx) {}
        }
        // serverMiddleware: ['~/sendgridApi/src/index.js']
      }

Any idea what's wrong?

Thanks in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source