Reactで作ったWebアプリをFirebaseでホストしようとしたところ、
公式ドキュメントどおりにいかなかったのでメモしておきます。
単純化のために、この記事では create-react-app コマンドで作ったばかりの
空っぽのWebアプリをFirebaseにデプロイする手順を掲載します。
- 前提条件
- Webアプリを作成
- Firebaseでプロジェクトを追加
- FirebaseをWebアプリに追加
- Firebaseのコマンドラインツール(CLI)をインストール
- Firebaseにログイン
- Firebaseプロジェクトの構成ファイルを作成
- ビルドしてローカルで確認
- FirebaseにWebアプリをデプロイ
前提条件
本記事の手順を実行するには、以下の環境が必要です。
- npm
- node.js
- Visual Studio Code
- Firebaseに登録済である
Firebaseのアカウントは以下のURLで作成することができます。
Webアプリを作成
Facebook社謹製のツール「Create React App」で空のWebアプリを用意します。
既に手持ちのWebアプリがある方は飛ばしてOKです。
まず、npm経由で「Create React App」をインストールします。
コマンドプロンプトで以下を実行します。
次にプロジェクトを作成したいフォルダへ移動し、
create-react-app コマンドを実行します。
こうなります。
さて、ローカル環境で結果を確認してみましょう。
作成されたプロジェクトフォルダ内に移動して、
code . と入力すると現在のフォルダをVisual Studio Code で開くことができます。
Visual Studio Codeのターミナルで以下のコマンドを実行しましょう。
ビルドが走り、ブラウザで http://localhost:3000 が起動するはずです。
だいたい以下の感じの画面になれば成功。
Firebaseでプロジェクトを追加
管理コンソールでプロジェクトを追加します。
必要な情報を入力します。
プロジェクトIDはFirebase内で一意らしく、プロジェクト名が被ると連番が付きます。
この時点でreact-sampleは86468番煎じのようです（笑
FirebaseをWebアプリに追加
プロジェクトが出来上がると以下の画面が開きます。
コードのアイコンをクリックしてプロジェクトに設定すべき値を表示します。
表示された値をコピーします。
今回はReact + TypeScriptの構成なのでscriptタグの中身だけでOKです。
コピーしたコードをindex.tsxのimport直後に貼り付けます。
変数 config の定義をvarからconstに直しておきましょう。
当然ですがfirebaseが分からんと怒られました。
インストールします。
index.tsxにimportします。
これでエラーが消えました。
Firebaseのコマンドラインツール(CLI)をインストール
次に開発用の端末にコマンドラインツールをインストールします。
コマンドプロンプトで以下を実行します。
Firebaseにログイン
引き続き以下を実行します。
Googleアカウントと連動するための同意画面なんかが出てきますので
画面の案内どおりに進めてログインを完了します。
Firebaseプロジェクトの構成ファイルを作成
Visual Studio Codeのターミナルで以下を実行します。
（コマンドプロンプトでも良いですが作成された構成ファイルが
すぐ確認できるのでVSCodeでやっています。）
警告が出ますが無視します。
途中、publicフォルダ名を聞かれます。「build」を指定します。
出来上がったfirebase.jsonを開き、余計なignoreを消します。
ビルドしてローカルで確認
いよいよ動作確認です。
Visual Studio Codeのターミナルで以下を実行します。
実行したら聞かれるままにプロジェクトを選択してエイリアスを指定します。
で、ビルドして
ローカルで起動します。
起動したURLをブラウザで表示できれば成功です。
FirebaseにWebアプリをデプロイ
デプロイします。
成功したら一通り完了です。
以上、参考になれば幸いです。
