如何通過雲功能將 Nuxt SSR 應用部署到 firebase？

Question

我按照這篇中等帖子作為指南，在 firebase 主機上托管我的 nuxt 應用程序。

部署完成，但是，當我訪問url時，我收到Cannot GET /錯誤消息。 如果我檢查 function 日志，我會看到 function 完成時出現 404 錯誤。

這是我的函數/index.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時，我確實看到 /src 的內容被復制到 /functions/nuxt。 為了測試，我還有我的/functions/package.json文件包括我在/src/package.json文件中的所有依賴項。

我怎樣才能啟動並運行這個應用程序？ 如果您需要更多詳細信息，請告訴我。

更新#1

我嘗試使用命令firebase serve --only functions,hosting -p 5004服務托管和功能。

像這樣運行服務器給了我更多的見解。 具體來說，我在加載時收到此警告消息，然后在加載頁面時導致實際錯誤消息。

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

我沒有在函數目錄中安裝這個 package，因為我的 src 目錄中也沒有它。 但是，在 /functions 中安裝它並重新啟動開發服務器后，該警告消息消失了，並且我在頁面加載時遇到了錯誤。

我還發現了一些與 vue、vue-server-renderer 和 vue-template-compiler 未運行相同版本有關的警告。

現在一切似乎都運行良好！

Answer 1

您的配置和結構看起來正確。

大約一年前，我也用我的應用程序這樣做了，我遇到了同樣的問題。 它與 function 代碼本身有關。 我也嘗試過使用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不起作用，我很想知道。 因為這個，我在我的應用程序上浪費了很多時間......

Answer 2

我嘗試使用命令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

然后我確保那些 vue 包確實在運行相同的版本。 然后我還在 /functions/package.json 中添加了@firebase/app /functions/package.json （但是，在/src/package.json中不存在。

我再次運行本地服務器，一切正常。 然后我部署到 firebase，一切都按預期工作。

Answer 3

以下對我有用（使用 nuxt-start 代替）：

const functions = require("firebase-functions");
const { Nuxt } = require("nuxt-start");

const config = {
  dev: false
};

const nuxt = new Nuxt(config);

let isReady = false;

async function handleRequest(req, res) {
  if (!isReady) {
    try {
      isReady = await nuxt.ready();
    } catch (error) {
      process.exit(1);
    }
  }
  await nuxt.render(req, res);
}

exports.nuxtssr = functions.https.onRequest(handleRequest);