個人的に学習した内容と詰まったところを記述していこうと思います。また、本記事はReactで作成したアプリケーションを前提に記載しています。所々怪しい部分もあるかもしれませんが、その際はコメントいただけるとありがたいです。
基本的には以下の流れで簡単にデプロイすることができます。
Firebaseの準備
Firebaseに登録Firebase
CLIをインストール
npm install -g firebase
3. Firebaseへログイン
firebase login
これでFirebaseを利用できる環境になりました。
ただ、上記の手順だとログインしただけなので、firebaseの機能を利用することはできません。
プロジェクトの作成も合わせて行いましょう！
Firebaseプロジェクトの作成（外部サイト）
Firebaseでデプロイ
Firebaseの準備が整ったら早速デプロイです。
FirebaseのHostingを利用したデプロイはかなりお手軽で簡単にできます。
また、Firebaseのコンソール上からデプロイ履歴もみることができるので管理もしやすいです。
以下、デプロイ手順になります。
- デプロイしたいアプリケーションのディレクトリまで移動して以下のコマンドを実行
firebase init
このコマンドを打つといろんな質問が飛んできます。今回はHostingのみの利用を前提としているので、以下のように答えてもらえれば問題ないです。
Which Firebase CLI features do you want to setup for this folder ?
→ Hosting: Configure and deploy Firebase Hosting sites をスペースキーで選択してリターン
スペースキーで選択してからでないとエラーになります。
Select a default Firebase project for this directory
→ Firebaseコンソールで作成したprojectを選択
What do you want to use as your public directory?
→ public (何も入力せずリターン)
Configure as a single-page app (rewrite all urls to /index.html)
→ Y(SPA設定されていることの確認、Reactアプリケーション前提なので問題なし)
File public/index.html already exists. Overwrite
→ アプリケーションにあるものを上書きしますか？という質問。基本的にNOと答える。
（筆者は上書きしてしまい、Firebaseの初期画面がずっと出ていた。上書きされてReactのroot要素がなくなってしまったため）
以上です！
質問途中でGithubとの連携を聞かれますがその質問もNOと答えていただければOKです。
２. アプリケーションをビルド
ビルドする前に必ず確認して欲しいのが、firebase init したときに生成されるfirebase.jsonというファイルがあるのですがそこの設定を確認して欲しいです。自分はこれがわからずに結構詰まってました。
"hosting": {
"public": "public",
以下略
ここの設定がpublicのままだとデプロイしたあと何も表示されない白い画面しか出てこなくなります。なので、ここの設定が
"hosting": {
"public": "build", // ここが"build"になっていることを確認する
以下略
以上を確認してから、
npm run build
を実行してください。
３. デプロイ
ここまで来ればほとんど作業は終わったと言っても良いです。あとは以下のコマンドを打てばあなたのアプリケーションはデプロイされ公開されます。
firebase deploy
デプロイが完了すると、
=== Deploying to '*****'...
略
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com
と表示されるので、Hosting URLに記載されているURLで公開されたアプリケーションをみることができます。
かなり簡単にデプロイすることができます。Firebaseは無料で使い始めることができるのでいいですね。