在 firebase 的公共目录中托管静态内容答案

【问题标题】：Hosting static content in public directory on firebase在 firebase 的公共目录中托管静态内容
【发布时间】：2021-09-21 13:31:54
【问题描述】：

我在 Firebase 上托管一个使用 cloud functions 和 hosting 的应用程序。前者以包含 API 的 NodeJS express 应用程序的形式提供动态内容，后者为我的 express 应用程序提供 css、javascript 等静态内容。

（Here 是一个很好的教程来设置 express 和 firebase 托管）

通常在具有standard structure 设置的快速应用程序中，会创建一些文件夹，例如bin、routes、views 和public。其中大部分都可以轻松复制到您的 Firebase 应用中。

问题：

问题是同时使用 hosting 和 functions。

使用以下index.js（以app.js 表示），我可以使用firebase 模拟器（函数、托管等）在本地成功查看和模拟我的应用程序

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const express = require("express");
const engines = require("consolidate");
...

admin.initializeApp({
    credential: admin.credential.applicationDefault(),
    databaseURL: "https://....firebaseio.com"
});

// app routes
const usersRouter = require('./app/users');
...

const app = express();

// #Working locally only - for deplopyment, all static linkes must load resources as [hosting-domain.app.com]/css/styles.css
app.use("/public", express.static(path.join(__dirname,'../public')));

app.use(flash());

app.engine('pug', require('pug').__express)
app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

// Use the createSession endpoint for login & verify each session
app.use(authenticate);

...
app.use('/user', usersRouter);
app.get('/', (req, res) => {
    return res.redirect("/user/login");
});

app.get('*', (req, res, next) => {
    res.render("404");
})

exports.app = functions.https.onRequest(app);

// api routes
exports.api = require('./api/api.js');

如何在使用 firebase 函数处理动态内容的同时成功地在 firebase 主机上提供静态内容？

（答案如下）

【问题讨论】：

标签： node.js firebase express google-cloud-functions firebase-hosting

【解决方案1】：

滚动到底部查看 TL;DR 和解决方案

在写这个问题时，我在考虑了每个 firebase 功能以及它们各自的作用后找到了解决方案。

在本地托管静态内容与部署在 firebase 上

部署时，资产的路径，例如我可以在本地获取的[my-domain.web.com]/public/styles/my-styles.css 在部署时不会加载。相反，我需要使用[my-domain.web.com]/styles/my-styles.css。

在本地工作，但在部署时不能：

[my-domain.web.com or localhost:5000]/public/styles/my-styles.css

在本地和部署时工作

[my-domain.web.com or localhost:5000]/styles/my-styles.css

原因是public directory 内的任何内容都直接托管在您的域中。因此，使用express.static 需要相同的文件夹结构等。但是公共目录的内容是（自动）从您的域的根目录托管的。

在 express 中，需要指定在哪里可以找到您的静态内容，然后由 nodejs 或您选择的其他托管功能托管。

但 Firebase 会自动为您托管静态内容。因此，无需包含甚至不需要以下行：

app.use("/public", express.static(path.join(__dirname,'../public')));

因为它仅用作混淆点（并且也仅在本地提供文件，即混淆点）。请记住，public folder takes precedence over dynamic content 中的任何内容。

见little blue note right above the middleware section：

Note: The static files in the public directory take precedence over the rewrites, so any static files will be served alongside the Cloud Functions endpoints.

公共目录是：

my-firebase-app
    \ functions
    \ public               < ------ this one
    \ ..other files

TL;DR

给定文件夹结构：

my-firebase-app
    \ functions /
        \ views /
            \ root.pub     < ---- pug template file
    \ public \             < ------ this one
        \ styles /
            \ my-styles.css < ----- styles file
    \ ..other files

确保您所有的pug/handlebars/ejs等模板都假定公共目录是您域的根目录，因此您的静态内容加载为[localhost:5000或yourdomain.web.app]/styles/my-styles.css

普通快递应用 通常托管您的快速应用程序将使用以下内容：

app.use("/public", express.static(path.join(__dirname,'../public')));

在您的 pub（模板文件）中，您将拥有类似的东西

link(rel="stylesheet", href="/public/styles/my-styles.css")

Firebase Functions + Hosting App，应改为：

删除app.use("/public"...) 功能（firebase 托管将此托管到您的根域）
任何指向静态内容的链接都应使用

link(rel="stylesheet", href="/styles/my-styles.css")

注意href中“/public”的省略

【讨论】：

【解决方案2】：

您可以将静态文件添加到 Firebase 托管的公共目录中。

在这种情况下，'public' 是我的托管目录。要将文件存储在<domain>/css/..，只需创建一个名为“css”的新文件夹，如图所示并添加您的文件。

【讨论】：