今回は今まで作ってきたミニアプリをFirebaseのホスティング機能を使ってデプロイします。
なんだかんだ言って一ヶ月近くこのアプリに関する投稿をしてきましたが、とうとうデプロイまで来ました。
それではやっていきましょう。
Contents
デプロイの前に...
デプロイする前にリリースチェックリストを参考にAPIキーの設定、Authenticationのホワイトリストの設定を行う必要があります。
APIキーの設定
Google Developer ConsoleにてAPIキーの設定を行います。
アクセスをするとFirebaseが自動で生成した様々な設定を見ることが出来ます。
今回はBrowser key以外は使用しないので、他は全て削除しました。
その上でBrowser keyの設定を変更します。
アプリケーションの制限からHTTPリファラーを選びます。
これによって指定したウェブサイト以外からのAPIキーの使用が出来なくなります。
ウェブサイトの制限の下にある欄から「項目を追加」を選び、ウェブサイトを追加します。
ポイント
URLがわからなくても心配しないで下さい。ウェブサイトは「(プロジェクトID).firebaseapp.com」という形式ですが、デプロイする際に確認できるので後から設定しても問題ありません。
下の保存ボタンを押すことを忘れずに。
開発環境では「http://localhost:3000/*」を追加する必要があるので注意です。
ちなみにローカルホストを登録しないと以下のようなエラーが出ます。
リリースする際はローカルホストは外しておきましょう。
Authenticationのホワイトリストの設定
FirebaseコンソールにてAuthenticationの設定もする必要があります。
AuthenticationメニューのSign-in methodタブを下にスクロールしていくと以下のように「承認済みドメイン」が表示されています。
つまり自動でドメインのホワイトリストが設定されています。
基本的にこれで構わないのですが、リリースする際はlocalhostは削除しましょう。
Firebase Hosting
ここまではやや面倒でしたが、ここからデプロイまではとても簡単です。
Firebaseのドキュメントも参考にしつつ進めていきましょう。
プロジェクトのビルド
まずはプロジェクトをビルドしておきます。
yarn build
でビルドします。これでbuildフォルダに最適化されたファイルが生成されます。
firebase-toolsのインストール
FirebaseコンソールのHostingメニューを選び、「始める」ボタンをクリックすると以下のようなウィンドウが表示されます。
表示される手順に従っていきます。
まずはfirebase-toolsをインストールする必要があるようです。yarnを使用しているので以下のコマンドでインストールします。
yarn global add firebase-tools
次にFirebase CLIでログインします。
firebase login
自動でブラウザのタブが開き、以下のような確認メッセージが表示されますので、「許可」ボタンを押します。
すると以下のようにログインが成功します。
次にプロジェクトのセットアップをしていきます。
セットアップ
先程の手順で表示されていたようにコンソールでfirebase initを実行します。
ここから対話形式で色々聞かれます。
「 Which Firebase CLI features do you want to ......」
→「Hosting」のみにチェックを入れてEnter
その他のセットアップは以下のようにしました。
===Project Setup===
「let's associate this project directory with a Firebase project ....」
→「Use an existing project」から今回のプロジェクトを選択します。
===Hosting Setup===
「What do you want to use as your public directory?」→「build」
Reactのプロジェクトの場合はビルドファイルはbuildフォルダに生成されるため、公開ディレクトリはbuildを指定して下さい。
「Configure as a single-page app」→「Yes」
シングルページアプリケーションなのでYesです。全てのリクエストをindex.htmlによって処理させたいため、この設定をする必要があります。
ポイント
ちなみにFirebase以外のサーバーを利用する場合でもこの種の設定はする必要があります。頭にとどめておくと良いでしょう。
「index.htmlをOverwriteするか」→「No」
index.htmlはビルド時に生成されているため「No」です。上書きはさせないように。
参考↓
これで設定はOKです。
あとは実際にアプリを動かしていきます。
ローカルでテスト
本番環境にいきなりデプロイするのではなく、まずはローカルでテストしましょう。
以下のドキュメントが参考になります。
セットアップはすでに出来ているので、
firebase serve
これでローカルでFirebaseのホスティング機能がエミュレートできます。
http://localhost:5000にアクセスしましょう。
おそらく表示はされてもログインは出来ないはずです。APIキーがブロックされているためです。
表示はされる
先程のように「http://localhost:5000/*」をGoogle Developer Consoleでホワイトリストに登録します。
その後きちんと動作していることを確認して下さい。
APIキーのホワイトリストを設定すると、API通信が機能する
確認できたら最後にデプロイします。
デプロイ
では最後にデプロイをしましょう。
firebase deploy
でデプロイが可能です。
「Hosting URL: https://five-questions-77934.firebaseapp.com」のように表示されます。早速アクセスしてみましょう。
ローカルホストではなく「〜〜.firebaseapp.com」でアクセスできていることが確認できます。
注意ポイント
もしログインなどAPI通信でエラーが起きる場合は、Google Developer ConsoleでAPIキーの設定を確認してみて下さい。保存ボタンを押し忘れていないか注意です。
一通り機能を試してみましょう。
私の環境では問題なく全ての機能が動作していました。
ホスティングの状況に関してはFirebaseコンソールで確認できます。
もしホスティングを止めたい場合はコンソールで以下のコマンドを実行して下さい。
firebase hosting:disable
本当にdisableさせるか確認されるので、「Yes」と答えます。
その後にURLにアクセスすると以下のようにページが見つからなくなります。
このように配信の停止も出来ました。
完了
実際にウェブ上にアプリを公開することが出来ました！
これにてアプリ作成はほぼ完了です。
React + REST API・Firebase SDK、Cloud Storageの使用などアプリ作成に必要な一通りのことがカバー出来たと思います。
まだいくつかの機能や修正が終了していませんが、記事にする必要性を感じなくなったので一旦ここで終了とします。
残っていることとしては、
- Q&Aを追加出来るようにする
- Export機能
- 各種バリデーション
などがありますが、このまま続けるよりも新しいことをやった方がいいかなと思っています。
(追加で記事を書くかもしれませんが、いつになるかは未定です。)
それでは！