Firebase Hostingにデプロイ
やりたいこと
create-react-appで作成したプロジェクトをFirebase Hostingにデプロイ
npm install
npm install -g firebase-tools
ログイン
firebase login
ビルド
npm run build
create-react-appでプロジェクトを作成した場合、npm run buildでビルドが実行され、buildフォルダにファイルが生成されます。
デプロイ
firebase init
Firebaseプロジェクトを初期化して、プロジェクトにfirebase用の設定ファイルを生成します。
なお、firebase initを実行すると、下記の設定項目がコマンドライン上に表示されるので、適宜設定を行います。
// 準備できてる？ -> y ? Are you ready to proceed? (Y/n) y // 使用するFirebaseのサービスを選択。今回はHostingを利用したいので、Hostingの箇所でスペースを押して選択する ? 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 // オプション設定。すでにFirebaseプロジェクトを作成している場合には Use an existing project を選択 ? 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 // 上記で Use an existing project を選択した場合にはFirebaseプロジェクトのリストが表示されるので、適宜選択 ? Select a default Firebase project for this directory: > burndown-app (burndown-app) // デプロイするディレクトリを選択。私の環境ではbuildフォルダにビルドしたファイルが生成されているため、buildフォルダを設定 ? What do you want to use as your public directory? (public) // SPAとして構成するか否か。SPAのアプリケーションの場合はy ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) // ビルドして生成したindex.htmlを上書きするか否か。既存プロジェクトの場合はn ? File build/index.html already exists. Overwrite? (y/N)
以上を設定すると、firebase用の設定ファイルが生成される。
後はデプロイ用のコマンドを実行するだけで、デプロイできる。
firebase deploy
というわけで
デプロイしてみました。
burndown-app.firebaseapp.com
ただのToDoリストも作り飽きてきたので、少しだけ変化球でバーンダウンチャートを作成。
とにかくデプロイすることだけを目標に必要最低限の機能のみで実装を行ったので
少しずつ改良を加えていきたい。（バグもまだあるし。。）
