create-react-appで作ったアプリをFirebase(Hosting)で利用する方法についいてまとめました。
ほぼ同じ目的の記事があり参考にさせていただきました。
前提
- Firebaseでもうプロジェクトが作られている
必要なツールのインストール
まだの人は以下の通り、必要に応じてインストール
npm install -g create-react-app
npm install -g firebase-tools
プロジェクトの作成と動作確認
create-react-app my-app
cd my-app
npm start
ローカルの3000ポートで下記のような画面が起動するはず。
これをFirebase上に展開します。
Firebaseで利用できるように設定
ログインしてるか確認。してないならする。
firebase login
Firebaseで利用するための初期化を開始。
firebase init
どの機能使う？
今回はHostingを使うので、Hostingを選びます。
? Which Firebase CLI features do you want to set up for this folder?
◯ 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側の話）を利用するので、既存のプロジェクトを選択（その後、具体的なプロジェクトを選ぶ）。
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
どのディレクトリをpublicにする？
create-react-appではbuildフォルダにビルドされたアップ対象のフィアル群が出力されるのでbuildを記入。
? What do you want to use as your public directory? build
SPAとして設定する？
Reactで作ったWebはSPAなので、yを選択
? Configure as a single-page app (rewrite all urls to /index.html)? y
buildとdeploy
今回は編集も何もせず、そのままテンプレートファイルをbuildしてdeployしてみます。
build
buildは以下の通り。
npm run build
deploy
deployは以下の通り。
firebase deploy --only hosting
deployが完了するとURLが表示されるので、それをブラウザで見てみます。
https://{project_name}.firebase.com/となるようです。
動作確認
ではURLを開いてみます。
動いているようです。後はひたすら開発するだけ。