Блог

Я пробовал много подходов для загрузки и запуска проекта node / vue на хостинге firebase, но безуспешно.

Я следовал официальным рекомендациям на канале Firecast YouTube, но, похоже, я чего-то не понимаю.

Мой vue.js приложение в режиме SSR отлично работает на localhost. Оно немного отличается от базового приложения node / express. После развертывания на хостинге Firebase у меня появляется страница с ошибкой 404. (Документация Quasar по развертыванию SSR)

Я создал приложение с помощью quasar build -m ssr , которое генерирует новую папку dist/ssr folder.

firebase.json файл в корне моего проекта, с помощью которого я инициировал проект firebase, firebase init содержит следующие строки:

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

Перед развертыванием на хостинге firebase я пытаюсь протестировать его с помощью firebase serve но при доступе к странице на localhost:5000 я получаю сообщение об ошибке 404 или No-content.

У кого-нибудь есть решение?

Итак, вот решение, которое я придумал.

Я создал шаблон проекта на github:https://github.com/danieltorscho/gcp-quasar

1. После инициализации вашего проекта firebase в корневой папке вашего проекта с помощью firebase init , откройте созданный 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"
  }
}
  

2. Установка зависимостей yarn add firebase-admin firebase-functions

3. Открыть и отредактировать /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
  

4. Теперь создайте приложение SSR с quasar build -m ssr

5. В вашем терминале перейдите к ./dist/ssr/ и запустите yarn install , чтобы установить модули узла.

6. Наконец, вернитесь к своему корневому пути «./» и протестируйте перед развертыванием с помощью firebase serve команды. Оно будет доступно на порту 5000, как обычно. localhost: 5000

При использовании http://localhost:5000 в вашем браузере будет запрошен файл с именем «index.html » из вашей общей папки, которая dist/ssr . Из того, что вы показали здесь, нет index.html в этой папке. Я вижу «index.js » и «template.html «.

Вам либо нужно будет выполнить одно из следующих действий:

• Организовать index.html будет создано в dist / ssr
• Или измените свой URL, чтобы найти HTML-файл, который существует в dist / ssr
• Или измените конфигурацию общедоступной папки, чтобы указать на папку с нужным вам контентом.