MonacaでPWAを作ってFirebaseにDeployする

Monacaはアシアル株式会社が運営しているアプリ開発環境で、
3個までの非商用のプロジェクトであれば無料から使えます。

Monaca クラウド IDEというブラウザ上で動くIDEを使用すると
環境構築の必要なく、iOSやAndroidアプリの開発ができます。

また最近では、ネイティブアプリのような動作をするウェブアプリである
PWA(Progressive Web Apps)の開発も可能です。

Monacaは外部サービスと連携してクラウド IDEから
直接Deployすることも可能です。

FirebaseでBasic認証

社内専用のアプリやテスト用のアプリのように公開されては困る場合
アクセス制限のためにせめてBasic認証くらいはかけたいですよね。

FirebaseでBasic認証をかけてHostingするやり方については、
解説しているページはたくさんありますが、
特にこちらのページは非常にわかりやすく参考になりました。
「FirebaseでBasic認証をかけてサイトを作る(Hostingする)」

これを使うにはCloud Functions for Firebaseを使用する必要があるのですが
Monaca クラウド IDEから直接Functionsを使用することは出来ないため
IDEから直接DeployしてBasic認証をかけることは出来ません。

firebase-toolsでMonacaのPWAプロジェクトをDeploy

Monacaで作ったPWAプロジェクトをfirebase-toolsでDeployすることで
Basic認証をかけながらHostingが出来たので手法を紹介します。

開発環境を作る必要がないのがMonacaを使うメリットだったのですが
背に腹は代えられません。

といってもやることは非常に簡単です。
firebase-toolsでフォルダを初期化しておいて、
プロジェクトをエクスポートしてwwwをfunctionsに突っ込んで
firebase.jsonとfunctions\index.jsを書き換えるだけです。
（これだけで分かる人は以下は読む必要はありません）

Firebase CLIの準備

公式リファレンスが非常に詳しく丁寧に書かれているので参考になります。
Firebase CLI リファレンス
スタンドアロンバイナリもあるのですがNode.jsごと入れてしまいしょう。

以下のページが画面写真も多く参考になると思います。
　Windows 10へNode.jsをインストールする
Nodistを用いた方法はこちら。
　Node.jsをインストールする方法(Windows)

とりあえずnpmが使えるようにしておきましょう。

Firebaseへのログイン

コマンドプロンプトを開いて以下を入力して
firebase-toolsをインストールします。

> npm install -g firebase-tools

インストールが済んだらFirebaseへログインします。

次にログインをします。

> firebase login

環境によってログインの方法は異なりますが、
ブラウザが立ち上がってログイン画面が出てくる場合や
さらにブラウザでログイン後にハッシュが表示されて
それをコマンドプロンプトにコピペする場合もあります。

プロジェクトファイルの初期化

PC上の適当な場所にプロジェクトフォルダを作成し、
コマンドプロンプトのcdでそのフォルダまで移動します。

カレントフォルダがプロジェクトフォルダになったら
以下のコマンドを入力します。

> firebase init

すると以下のような画面が出ます。

ここで、アプリを掲載するためのHostingと、
Basic認証をするためのFunctionsを選択します。

その後は基本的にEnterを連打していればデフォルト設定が適用されます。
プロジェクトを選択するメニューが出てきますが、
既存のプロジェクトに追加したい場合は選択してください。

初期化が終了すると、フォルダにプロジェクトファイルが作成されます。

index.jsとfirebase.jsonの書き換え

publicフォルダ内のindex.htmlファイルは削除します。
次に、functions\index.jsを以下のように書き換えます。
userとpasswordの部分は適宜書き換えてください。

const functions = require('firebase-functions')
const express = require('express')
const basicAuth = require('basic-auth-connect')

const app = express()

app.all('/*', basicAuth(function(user, password) {
  return user === 'hoge' && password === 'hogehoge';
}));

app.use(express.static(__dirname + '/www/'))

exports.app = functions.https.onRequest(app)

全てのリクエストに対してBasic認証をかけるとともに
アクセスさせたいファイルのあるフォルダを設定しています。
今回はwwwというフォルダで設定しました。

次に、firebase.jsonを書き換えます。

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

全てのアクセスに対してappというfunctionを使用するようrewriteします。

これでファイルの書き換えは終了です。
index.js内でexpressとbasic-auth-connectを使用しているので
それらをfunctionsフォルダにインストールしておきます。

functionsフォルダに移った後に以下のコマンドを入力してください。
その後デプロイ前にプロジェクトフォルダに戻っておきましょう。

> npm install --save express
> npm install --save basic-auth-connect

Monacaプロジェクトの追加

これでようやくBasic認証出来るプロジェクトの雛形が出来ました。
そこに、Monacaで作成したプロジェクトファイルを入れていきます。

Monaca クラウド IDEのプロジェクト＞エクスポートから
プロジェクトのZipファイルを取得して解凍します。
解凍されたもののうち、wwwフォルダのみを使用します。

wwwフォルダを、先程作ったプロジェクトフォルダの、
functionsフォルダ内にコピーしてください。

これで準備は完了です。

Firebaseへデプロイ

> firebase deploy

エラーがなければデプロイされます。