Как развернуть приложение Nuxt SSR для запуска через облачные функции? - PullRequest
Новая
       59

Как развернуть приложение Nuxt SSR для запуска через облачные функции?

0 голосов
/ 06 апреля 2020

Я следовал этому среднему посту в качестве руководства по размещению моего приложения nuxt на хостинге Firebase.

Однако развертывание происходит, когда я затем посещаю url Я получаю сообщение об ошибке Cannot GET /. Если я проверяю журналы функций, я вижу, что функция завершается с ошибкой 404.

Это мои функции / индекс. js

const functions = require('firebase-functions')
const admin = require("firebase-admin")
const { Nuxt } = require('nuxt-start')
const nuxtConfig = require('./nuxt.config.js')

admin.initializeApp()

const config = {
  ...nuxtConfig,
  dev: false,
  debug: true,
  buildDir: "nuxt",
  publicPath: "public",
}

const nuxt = new Nuxt(config)

exports.ssrapp = functions.https.onRequest(async (req, res) => {
  await nuxt.ready()
  nuxt.render(req, res)
})

И это конфигурация firebase 

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

Структура проекта такая: 

/
 /src
 /functions
 /public
 /public_base

Когда я запускаю firebase deploy, я вижу, что содержимое / sr c копируется в / functions / nuxt. Для тестирования у меня также есть файл / functions / package. json, включающий все зависимости, которые есть в моем файле / src / package. json file.

Как мне запустить и запустить это приложение? Если вам нужно больше подробностей, дайте мне знать.

Обновление # 1

Я пытался обслуживать хостинг и функции с помощью команды firebase serve --only functions,hosting -p 5004.

Запуск сервера таким образом дал мне еще несколько идей. В частности, я получил это предупреждающее сообщение во время загрузки, которое затем привело к фактическому сообщению об ошибке при загрузке страницы. 

WARN  Module @firebase/app not found. Silently ignoring module as programatic usage detected

Я не установил этот пакет в каталог функций, поскольку у меня его не было в моем sr Каталог c тоже. Однако после его установки внутри / functions и перезапуска сервера dev это предупреждающее сообщение исчезло, а вместе с ним и ошибка, которую я получал при загрузке страницы.

Я также заметил несколько предупреждений, связанных с vue, vue -server-renderer и vue -template-compiler не работают с одной и той же версией.

Теперь все работает нормально!

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Я пытался обслуживать хостинг и функции локально, используя команду firebase serve --only functions,hosting -p 5004.

. Таким образом я смог обнаружить кучу предупреждений и ошибок, таких как 

FATAL 

Vue packages version mismatch:

- vue@2.5.21
- vue-server-renderer@2.6.11

This may cause things to work incorrectly. Make sure to use the same version for both.

WARN  Module @firebase/app not found. Silently ignoring module as programatic usage detected

I удостоверился, что эти vue пакеты действительно работали в той же версии. Затем я также добавил пакет @firebase/app в /functions/package.json (который, однако, отсутствует в /src/package.json.

. Я снова запускаю локальный сервер, и все работает. Затем я развернул развертывание в firebase, и все работало как и ожидалось.

0 голосов
/ 06 апреля 2020

Ваша конфигурация и структура выглядят правильно.

Я также делал это примерно год go с моим приложением, и я столкнулся с той же проблемой. Это связано с самим кодом функции. Я также пытался использовать nuxt.render(req, res) ( Docs ), но у меня это никогда не работало, поэтому я вместо этого использовал nuxt.renderRoute(route) ( Docs ). Это прекрасно работало.

Вы можете изменить свой код на что-то вроде этого: 

const { Nuxt } = require('nuxt')

...

exports.ssrapp = functions.https.onRequest(async (req, res) => {
  await nuxt.ready()

  const result = await nuxt.renderRoute(req.path) // Returns { html, error, redirected }
  res.send(result.html) // Sends html as response
})

Это сработало для меня. Вы должны рассмотреть возможность обнаружения любых ошибок, хотя. Я надеюсь, что это решит вашу проблему.

Это всего лишь обходной путь, если кто-нибудь знает, почему nuxt.render не работает, мне было бы интересно узнать. Я потратил много часов из-за этого с моим приложением ...

...