直到将动态网站(Node.js + Express)部署到Firebase
首先
最初本来在 Sakura VPS 上部署服务,但后来听说了 Firebase,觉得很想试试部署一下。看到了一本很有参考价值的 Firebase 上运行 Node.js 应用的入门指南?,所以打算按照其中的内容进行一些解释说明。
准备
安装Firebase CLI的指南
首先必须安装Firebase才能开始,所以接下来将进行Firebase的安装和配置。
首先执行以下操作,安装Firebase CLI。
npm install -g firebase-tools
一旦安装完成
firebase login
由于有许多各种各样的问题,我会根据需要用是/否来回答。只要完成Google账户认证,就可以立即使用Firebase。
主持,创建功能。
为了将Node.js部署到Firebase上,初始化hosting和functions来处理动态内容。
mkdir ~/firebase-tutorial
cd ~/firebase-tutorial
在工作空间根目录下输入以下命令。
firebase init hosting
firebase init functions
结果:
firebase-tutorial/
├── firebase.json
├── functions
│ ├── index.js
│ ├── node_modules
│ ├── package-lock.json
│ └── package.json
└── public
├── 404.html
└── index.html
在接下来的部分,我们将在index.js中记录网站的大体设置(如果将index.js的名称更改为具有迷惑性的app.js,会出现错误,如果有人知道如何处理,请在评论中提出)。
在中国引入Express
使用yarn来启用Express。
cd ~/firebase-tutorial/functions
yarn add express
完成add后,在functions的下方创建一个文件夹。
mkdir -p ~/firebase-tutorial/functions/views
mkdir -p ~/firebase-tutorial/functions/routes
-
- views
レイアウトや画面表示用のフォルダ
routes
ルーティング用フォルダ
通过部署简单的程序来验证它,现在准备好启动动态网站(Node.js)了。
使用 Express 进行内容部署
使用简单的程序进行可以部署的测试。
const functions = require('firebase-functions');
const express = require('express');
const path = require('path');
const app = express();
const indexRouter = require('./routes/index');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'routes')));
app.use('/', indexRouter);
exports.app = functions.https.onRequest(app);
当在Firebase上使用Node.js部署动态内容时,实际上只需要引入firebase-functions的第一行代码即可。之后只需完成routes文件夹和views文件夹的设置即可。需要注意的是,本次的views引擎我们选择了jade。
在使用过的routes文件夹下的index.js中编写路由的详细信息。
var express = require('express');
const functions = require('firebase-functions');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Node.js Test' });
});
module.exports = router;
用Jade代码简单地编写生成HTML文件的代码。
extends layout
block content
h1 Welcome to #{title}!
doctype html
html
head
meta(charset='utf-8')
title= title
block header
body
block content
如果到了这一步,就在本地实际运行一下。
$ firebase serve --only hosting, functions
=== Serving from '/Users/hoge/firebase-tutorial'...
i functions: Preparing to emulate functions.
i hosting[nodejs-test-4d63e]: Serving hosting files from: public
✔ hosting[nodejs-test-4d63e]: Local server: http://localhost:5000
Warning: You're using Node.js v10.9.0 but Google Cloud Functions only supports v6.11.5.
✔ functions: app: http://localhost:5001/nodejs-test-4d63e/us-central1/app
如果成功启动了,就在本地主机的端口5000上确认启动。
如果发生错误
Error: No project active. Run with --project <projectId> or define an alias by
running firebase use --add
如果出现此错误,请先在Firebase上创建一个项目。
firebase use --add
如果您执行该操作,将会在控制台上转到项目选择界面,然后只需指定您创建的项目即可启动。
彻底忘记了

由于在Firebase中没有指定针对收到的URL运行的程序,导致了这种情况。首先修改firebase.json文件。
{
"hosting": {
"public": "public",
"rewrites": [{
"source": "**",
"function": "app"
}],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
请注意重写部分的源代码和功能。源代码中的“**”表示不管调用哪个URL,都会运行该功能。另外,由于在功能中包含了app函数,所以我们已经设置成无论调用哪个URL,都会调用app函数。
下面是达到同样含义的用中文表达:在firebase中,静态内容优先于动态内容,因此需要删除静态内容的文件。静态文件保存在public文件夹中,因此我们需要删除这些文件。
cd ~/firebase-tutorial
rm -rf public/*
然后再次使用Firebase启动服务。如果之前的服务还在运行,请使用Ctrl+C停止它。

看起来你做得不错。现在只需部署这个看看~。
$ firebase deploy --only hosting,functions
=== Deploying to 'nodejs-test-4d63e'...
i deploying functions, hosting
i functions: ensuring necessary APIs are enabled...
✔ functions: all necessary APIs are enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (72.14 KB) for uploading
✔ functions: functions folder uploaded successfully
i hosting[nodejs-test-4d63e]: beginning deploy...
i hosting[nodejs-test-4d63e]: found 1 files in public
✔ hosting[nodejs-test-4d63e]: file upload complete
i functions: updating Node.js 6 function app(us-central1)...
✔ functions[app(us-central1)]: Successful update operation.
i hosting[nodejs-test-4d63e]: finalizing version...
✔ hosting[nodejs-test-4d63e]: version finalized
i hosting[nodejs-test-4d63e]: releasing new version...
✔ hosting[nodejs-test-4d63e]: release complete
✔ Deploy complete!
Project Console: hoge
Hosting URL: https://nodejs-test-4d63e.firebaseapp.com
好的,那我们试一试进入Hosting的URL吧~如果部署成功的话,应该会显示和本地一样的界面。
最后
我尝试了一遍在Firebase上部署动态网站的整个流程。你觉得怎么样?由于Firebase可以从网站项目的函数中查看到服务器端的错误等情况,所以我们应该及时进行处理。我由于无法解决添加的包的依赖关系,导致失败了多次,所以请确保在firebase.json中正确添加–save来确保依赖的正确性。