直到将动态网站(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

如果您执行该操作,将会在控制台上转到项目选择界面,然后只需指定您创建的项目即可启动。

彻底忘记了

スクリーンショット 2018-09-03 16.40.35.png

由于在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停止它。

スクリーンショット 2018-09-03 16.55.44.png

看起来你做得不错。现在只需部署这个看看~。

$ 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来确保依赖的正确性。

广告
将在 10 秒后关闭
bannerAds