環境構築からデプロイまで行った作業記録です。
躓いたところをメモっています。
以下を参考にさせていただきました。
プロジェクトの作成
ブラウザからFirebaseへアクセスしログイン、プロジェクトを作成する。
firebase-tools のインストール
npm install -g firebase-tools
create-react-app のインストール
npm install -g create-react-app
これをしないと、create-react-app実行時にエラーが出る。
create-react-app : 用語 'create-react-app' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
ローカルでプロジェクトの作成
mkdir react-app
cd react-app
create-react-app hello-world
We suggest that you begin by typing:
cd hello-world
npm start
Happy hacking!
ローカルで起動
App.jsを修正
$ npm start
Firebaseとの連携
firebase login
ログイン後
コンソールに以下が表示される。
Waiting for authentication...
+ Success! Logged in as XXXXX@gmail.com
Firebase Hostingへの接続設定を追加
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
省略
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) 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
( ) Emulators: Set up local emulators for Firebase features
エラーが表示。スペースを押してなかったため。
Error: Must select at least one feature. Use SPACEBAR to select features, or provide a feature with firebase init [feature_name]
再度実行しHostingを選択、スペース を押しエンター。
Use an existing projectを選択し作成したプロジェクトを選択。
? Please select an option: Use an existing project
? Select a default Firebase project for this directory:
> hello-world-9b4bd (hello-world)
※後述するがFile dist\index.html already exists. Overwrite?の選択肢はNoにすること。
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
Configure as a single-page app (rewrite all urls to /index.html)? の選択肢の違いはこちら。
[firebase init 時に聞かれる「Configure as a single-page app (rewrite all urls to /index.html)?」は選択によって何がどう変わるのか]
(https://qiita.com/megane42/items/96356a88d67fcc1499ee)
Firebaseへのデプロイ
npm run build
firebase deploy
デプロイ後以下の画面になる。
数分待てばページが更新されるという記事もあったが更新されない。
原因
こちらの記事より
【Firebase】Firebase Hosting Setup Completeと表示されてしまう
firebase init した時の選択肢で、
File dist\index.html already exists. Overwrite? No
ここ、絶対Noにすること！
削除してやり直しした。
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No
i Skipping write of public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
+ Firebase initialization complete!
今度は成功した。
