Implementar la aplicación Quasar SSR vue / node en Firebase Hosting

Question

Intenté muchos enfoques para cargar y ejecutar el proyecto node / vue en el alojamiento de la base de fuego, pero no tuve éxito.

Seguí las pautas oficiales en el canal de YouTube de Firecast , pero parece que me falta algo.

Mi aplicación vue.js en modo SSR funciona bien en localhost. Es ligeramente diferente a la aplicación básica de nodo / express. Una vez implementado en Firebase Hosting, tengo la página de Error 404. ( Documentación de Quasar sobre la implementación de SSR )

He creado una aplicación con quasar build -m ssr, que genera una nueva dist/ssrcarpeta.

firebase.jsonarchivo en la raíz de mi proyecto donde inicié un proyecto de base de fuego que firebase initcontiene las siguientes líneas:

  {
    "hosting": {
      "public": "dist/ssr",
      "ignore": [
        "firebase.json",
        "**/.*",
        "**/node_modules/**"
      ],
      "rewrites": [
        {
          "source": "**",
          "function": "app"
        }
      ]
    }
  }

Antes de implementarlo en el alojamiento de Firebase, estoy tratando de probarlo, firebase servepero cuando accedo a una página aparece localhost:5000un error 404 o Sin contenido.

Alguien tiene una solución ?

Answer 1

Así que aquí está la solución que se me ocurrió.

1. Después de haber inicializado su proyecto de base de fuego en la raíz de la carpeta de su proyecto con firebase init, abra el archivo generado firebase.json:

{
  "hosting": {
    "public": "dist/ssr",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp" // <- This NAME should be the same as in /src-ssr/index.js
    }]
  },
  "functions": {
    "source": "dist/ssr"
  }
}

1. Instalar dependencias yarn add firebase-admin firebase-functions

2. Abrir y editar /src-ssr/index.js:

// BEGINNING OF THE FILE
const functions = require('firebase-functions') // <---- ADD FIREBASE FUNCTIONS

const
  express = require('express'),
  compression = require('compression')

const
  ssr = require('quasar-ssr'),
  extension = require('./extension'),
  app = express(),
  port = process.env.PORT || 3000
...
...
...
// END OF THE FILE

// COMMENT or DELETE following 3 lines of app.listen function
// app.listen(port, () => {
//   console.log(`Server listening at port ${port}`)
// })

exports.ssrapp = functions.https.onRequest(app) // <- "ssrapp" name is the same as in firebase.json

1. Ahora cree la aplicación SSR con quasar build -m ssr

2. En su terminal, vaya ay ./dist/ssr/ejecute yarn installpara instalar módulos de nodo.

3. Finalmente regrese a su ruta raíz "./" y pruebe antes de la implementación con el firebase servecomando. Estará disponible en el puerto 5000 como de costumbre. localhost: 5000

Answer 2

El uso http://localhost:5000en su navegador solicitará el archivo llamado "index.html" de su carpeta pública, que es dist/ssr. Por lo que ha mostrado aquí, no hay index.html en esa carpeta. Veo "index.js" y "template.html".

O tendrá que hacer una de las siguientes cosas:

• Organizar la creación de un index.html en dist / ssr
• O cambie su URL para ubicar un archivo HTML que existe en dist / ssr
• O cambie la configuración de su carpeta pública para que apunte a una carpeta que tenga el contenido que está buscando.