本記事でやること
下記の構成でサーバレスで動的サイトを作成する。
- Firebase
- Firebase Hosting
- Firebase Cloud Functions
- Node.js
- Express（フレームワーク）
- EJS（テンプレートエンジン）
- Express Generator（雛形の作成）
プロジェクトディレクトリの新規作成から、Firebase へデプロイして動作確認をするところまでを掲載します。
各種ツールはインストールしておいてください。
環境
- Windows 10
- Ubuntu(WSL) 18.04.5 LTS
- npm v6.14.11
- firebase v9.3.0
事前準備
- Firebase コンソールから新規プロジェクト作成する
- 料金プランを Blaze (従量制)に変更しておく ※ 使用量に応じて料金が発生するのでご注意ください
手順
新規プロジェクトフォルダを作成
mkdir testapp
cd testapp
Firebase Hosting を初期化
firebase init hosting
# 対話式の質問には下記のように回答してください。
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
public フォルダは必要ないので削除
rm -r public
express-generator で ソースフォルダを作成
# テンプレートエンジンは EJS を使用
express -e functions
npm を初期化
npm init
EJS をインストール
npm install -save ejs
関連パッケージを削除・インストールしておく
npm uninstall debug --save
npm install firebase-functions firebase-admin static-favicon morgan cookie-parser body-parser
index.js を編集
先頭と末尾に下記を追加
index.js
constfunctions=require('firebase-functions');（中略）module.exports.func_https=functions.https.onRequest(app);firebase.json を編集
firebase.json
{"hosting":{"public":"functions","ignore":["firebase.json","**/.*","**/node_modules/**"],"rewrites":[{"source":"**","function":"func_https"←これに変更}]},"functions":{←以下の3行を追加"runtime":"nodejs12"←追加}←追加}ローカル環境で動作確認
Firebase エミュレータを実行して動作確認する
firebase emulators:start
localhost にアクセスして下記画像のようになればOK
Firebase へデプロイ
firebase deploy -i
Webコンソールで Hosting と Cloud Functions を確認すると、データがアップされています。
Hosting でURLを確認してアクセス
無事デプロイができました！
参考にさせていただいた記事
【Firebase】Cloud Functions + Express + EJSで動的コンテンツを配信する
大変参考になりました。ありがとうございました。