FirebaseでNode.jsのWebアプリを動かす

express-generatorで作ったNode.jsのWebアプリケーションをFirebaseで動かすまでの手順の紹介です。

事前準備
Webアプリの初期化
Webアプリのプログラムの追加
WebアプリをFirebase用に変更
動作確認

事前準備

Firebaseのアカウント作成
Firebase CLIのインストール
ローカルでプロジェクトのディレクトリの作成

Webアプリの初期化

プロジェクトのルートディレクトリに移動したあと、以下のコマンドでFirebaseの初期化をします。コマンドを実行すると選択肢が出てくるので、「Hosting」と「Functions」を選択します。

$ firebase init

🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

You're about to initialize a Firebase project in this directory:

  /Users/username/work/my-app

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm y
our choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

Firebaseのプロジェクトを選択します。今回は事前にFirebaseのコンソールからプロジェクトを作っておきました。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
  [don't setup a default project]
❯ my-app (my-app-1a1a1z)
  [create a new project]

言語を選択します。今回はJavaScriptを選択します。

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript
  TypeScript

以下、全部Enter。

✔  Firebase initialization complete!

このメッセージが出たら、初期化完了です。

Webアプリのプログラムの追加

functions配下のpackage.jsonに、express-generatorの設定を追加します。scriptsとdependenciesに設定を追加することになると思います。
設定を追加したpackage.jsonが以下です。

{
  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "~2.5.7",
    "express": "~4.16.0",
    "express-jquery": "^1.8.3",
    "http-errors": "~1.6.2",
    "morgan": "~1.9.0",
    "firebase-admin": "~5.12.0",
    "firebase-functions": "^1.0.1"
  },
  "devDependencies": {
    "eslint": "^4.12.0",
    "eslint-plugin-promise": "^3.6.0"
  },
  "private": true
}

次に、express-generatorで作成したNode.jsのWebアプリのプログラムをfunctions配下に設置します。mvなりcpで持ってきてください。
Node.jsのWebアプリを設置した後のディレクトリ構成は以下になります。

.
├── firebase.json
├── functions
       ├── bin
       ├── config
       ├── index.js
       ├── node_modules
       ├── package.json
       ├── public
       ├── routes
      └── views

WebアプリをFirebase用に変更

express-generatorで作成したデフォルトのままだと、Firebaseで動きません。Firebase用にプログラムを修正していきます。

まず、HTTPリクエストをトリガーに、Firebase FunctionsでWebアプリを実行するようにします。app.jsを以下のように修正します。

// 追加
var functions = require('firebase-functions');

// module.exports = app;から以下に変更
exports.app = functions.https.onRequest(app);

次に、HTTPリクエストがapp関数にアクセスするようにリライトの設定をします。firebase.jsonに以下の設定を追加します。

  rewrites: [{
    source : /** ,
    function : app
}],

ここまで出来たら、npm installで必要なモジュールをインストールします。

$ cd functions
$ nom install

動作確認

以下でローカルにFirebaseのサーバを立ち上げます。

$ firebase serve --only functions,hosting

http://localhost:5000/ にアクセスして、ブラウザに作成したNode.jsのWebアプリが表示されたらOKです。お疲れさまでした。

darudaru

だるだるしてるエンジニア