在 firebase 的 public 目录中托管静态内容

Question

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

（Here 是设置 express 和 firebase 托管的好教程）

通常在具有 standard structure 设置的 Express 应用程序中，会创建一些文件夹，例如 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 托管上成功提供静态内容？

（答案如下）

Answer 1

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

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

Answer 2

滚动到底部以获得 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 需要相同的文件夹结构等。但是 public 目录的内容是（自动）从您域的根目录托管的。

在 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.

public 目录是：

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 等模板假定 public 目录是您域的根目录，因此您的静态内容加载为[localhost:5000 或 yourdomain.web.app]/styles/my-styles.css

普通快递应用程序 通常托管您的快递应用程序会使用类似的东西：

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

在你的酒吧（模板文件）中你会有类似

的东西

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

Firebase Functions + Hosting App，这应该改为：

删除 app.use("/public"...) 功能（firebase 托管将其托管到您的根域）
任何link静态内容应该使用

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

注意在href

中省略了“/public”

在 firebase 的 public 目录中托管静态内容

Hosting static content in public directory on firebase

node.js

firebase

express

google-cloud-functions

firebase-hosting