Firebase 函数不使用 express.js 和 EJS 视图引擎提供静态文件答案

【问题标题】：Firebase functions not serving static files with express.js and EJS view engineFirebase 函数不使用 express.js 和 EJS 视图引擎提供静态文件
【发布时间】：2019-06-26 07:03:54
【问题描述】：

过去一个月我一直在研究这个问题，但没有找到任何有用的解决方案。我目前正在尝试使用 firebase 函数以及 express.js 和 EJS 视图引擎来托管网站。

我将讨论将静态 CSS 文件提供给 EJS 文件的问题。我已经翻遍了，但似乎找不到任何有帮助的正确答案。

我有以下文件结构（在函数文件夹内）：

公开
观看次数
index.js

这是我的 index.js：

const functions = require('firebase-functions');
const express = require("express");
const ejs = require("ejs");
var path = require('path');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//  response.send("Hello from Firebase!");
// });

var app = express();

app.set('view engine', 'ejs');

// app.use('/static', express.static('public'));
app.use(express.static(__dirname + "/public"));
app.get("/", (request, response) => {
    response.render("test");
})

// app.listen(5000, () => {
    // console.log("Active app on port 5000");
// });
exports.webApp = functions.https.onRequest(app);

它正在渲染的页面（test.ejs）：

<html>

<head>

    <link rel="stylesheet" href="style.css" type="text/css">
</head>


<body></body>
</html>

最后是 style.css 文件：

html {
    background-color: black;
}

（style.css 和 test.ejs 都是这样完成的，只是为了测试，因为我对所有这些都有很大的问题）

我在网上尝试了大多数解决方案，但所有这些解决方案都只能在本地运行 express.js 应用程序时工作，而不能通过 firebase 服务或部署命令。我对此完全迷失了，感谢您提供任何帮助。

【问题讨论】：

我在 Cloud Run 和 express 静态中间件中看到了这个问题。你最终找到解决方案了吗？
介意分享您的文件夹结构吗？谢谢。
您找到解决方案了吗？我不认为@zemunkh 的回答是正确的。
任何遇到此问题的人，请在此处查看我的问题和答案：stackoverflow.com/a/68346542?noredirect=1

标签： node.js express google-cloud-functions ejs

【解决方案1】：

问题在于 Google Cloud 计划。

一开始，所有 Firebase 用户都使用完全免费的 Spark 计划。最近，Google Cloud 可能屏蔽了我们一年前免费使用的一些功能。

所以，您需要转到Google Cloud console，然后更改您要部署的项目的计划。然后，如果您没有注册您的支付卡，您应该为 firebase 托管 或 firebase 功能 功能注册。

几分钟后，它会加载所有必要的文件，例如加载已部署网站时缺少的样式 CSS、JS 文件。

然后享受您部署的网站。 ;)

【讨论】：

我希望就是这样！我有完全相同的问题！我可以在本地主机上提供我的静态文件没有问题，但是不要在 Firebase 主机上加载。我刚刚将我的计费帐户更新到该项目（5 分钟前），但它仍然无法正常工作。祈祷它很快就会起作用:)
这很奇怪。我的计划总是设置为 Blaze，但它不起作用。你介意把你的代码分享给我吗（当然不是全部）？我想看看文件的结构以及你是如何设置服务器的。谢谢。
是的，firebase 主机应用程序中的目录是一种有趣的东西。您应该查看本教程。我记得它对我有用。 youtube.com/watch?v=LOeioOKUKI8

【解决方案2】：

问题的 TL;DR：

在普通的 NodeJS 和 Express 托管中，需要指定静态内容的目录。由于 firebase 托管会为您托管此静态内容（/public 目录托管在您的域根目录中），

解决方案：您可以执行以下操作：

只需省略 app.use(express.static(__dirname + "/public"));（因为这样可以消除 Firebase 托管为您进行的重复托管尝试）
您的所有样式、javascript 等都需要省略 /public 部分，

例如

来自这个：

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

到这个：

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

你可以测试一下：

使用原始（错误/不正确的静态资源链接）托管您的应用，然后浏览到静态资源链接 - 您应该得到 404 或至少无法加载资源。
使用相同的“错误”链接，省略 url 的“.../public...”部分，您的静态内容将正确呈现。

这意味着 firebase 托管将 /public 目录的所有内容托管到您域的根目录。

接下来，通过删除静态目录app.use() 函数进行更改，并删除静态内容链接中/public 的所有痕迹（如上所示）。
浏览到您的页面（包括更改后的静态路由），您的页面将正确加载所有样式、脚本等（假设您没有任何错误代码；））

【讨论】：

【解决方案3】：

如果您在 2021 年 7 月遇到此问题。 Firebase 云功能不适用于 Spark（免费）计划。您需要先将您的项目升级到 Blaze 计划（不要担心！这是现收现付计划。Spark 计划包含在其中，因此在超出限制之前不会向您收费）。要升级到 blaze 计划，您需要在 Google Cloud 平台中设置结算信息，当您选择升级时，这些信息会自动定向。

这是我在 firebase 函数中设置 EJS View 引擎的代码：

const functions = require('firebase-functions');                                
    const express = require("express");         
    const app = express();


    app.set("views",__dirname+"/tmp");
    app.set("view engine","pug");
    app.engine('pug', require('pug').__express);
    app.get("/",p3p(p3p.recommended),function(req,res){
       res.render("index");
    });
    app.get("/login",p3p(p3p.recommended),function(req,res){
       res.render("login");
    });
    exports.main = functions.https.onRequest(app);

我希望您可以将其与 pug 视图引擎相关联，并在 firebase 函数中配置您的设置以提供静态文件。

【讨论】：