やりたいこと

reactで作ったWebアプリをコマンドラインからデプロイしたい。

環境

macOS Big Sur バージョン11.5.2

目次

1. Firebaseプロジェクトの設定

2. アプリの準備

3. アプリのデプロイ

1.Firebaseプロジェクトの設定

まずFirebase でプロジェクトの作成を行います。 下記の画像の赤い四角で囲んだ「使ってみる」をクリックしてください。 Googleアカウントにログインし、「プロジェクトを追加」をクリックします。
次に、プロジェクト名を入力し「続行」をクリックします。
Googleアナリティクスの設定は、「Default Account For Firebase」を選択し、「プロジェクトを作成」をクリックします。
処理が終了したら、「続行」をクリックすると、ダッシュボードに遷移します。
ダッシュボードに遷移したら、 下記の画像で赤の四角で示しているアイコンをクリックします。

するとウェブアプリへのFirebaseの追加画面に遷移します。次に、ウェブアプリの名前を入力し、チェックマークにチェックをして「アプリを登録」をクリックします。
そして、「Firebase SDKの追加」、「Firebase CLIのインストール」と続くのですが、特に設定することもないので「次へ」を押してください。
「Firebase Hostingへのデプロイ」では「コンソールに進む」を押してください。これでFirebaseのダッシュボードでの設定は終わりです。

2. アプリの準備

今回は、単純に下記のコマンドを入力し、reactのアプリケーションの雛形をデプロイします。

$ npx create-react-app test-app
$ cd test-app
$ yarn start

yarn startを実行し、http://localhost:3000/ にアクセすると、下記の画像のようなサイトが見られます。 これを、Firebaseでホスティングします。

3. アプリのデプロイ

次に、コマンドラインで下記のコマンドを実行します。

$ yarn add global firebase-tools
もしくは
$ npm install -g firebase-toos

次に、「firebase login」を実行するとGoogleアカウントのログインページが開くので、使用するアカウントを選択。

$ firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=978944836&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

ログインできたら、

$ yarn build

を実行し、buildファイルを作成します。
次に

$ firebase init

を実行すると、下記のような選択肢が出てくる。

? 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 selec
t, <a> to toggle all, <i> to invert selection)
❯◯ Database: Configure Firebase Realtime Database and deploy 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
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

今回は、Hostingするだけなので十字キーで「Hosting: Configure and deploy Firebase Hosting sites」まで矢印を持っていき、spaceキーを押して選択し、Enterを押す。

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices.
 ◯ Database: Configure Firebase Realtime Database and deploy 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
 ◯ Remote Config: Get, deploy, and rollback configurations for Remote Config

次に、下記のような選択肢が出てくる。1. Firebaseプロジェクトの設定ですでにプロジェクトを作成したので、「Use an existing project」でEnterを押す。すると先ほど作成したプロジェクト名が出てくるので、選択してEnterを押す。

? 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

次に下記のような質問がくるので、下記のように入力する。

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote build/404.html
✔  Wrote build/index.html

これで設定は完了です。
次にfirebase deployを実行させ、firebaseにアプリをデプロイします。

$ firebase deploy

=== Deploying to 'test-app-fa963'...

i  deploying hosting
i  hosting[test-app-fa963]: beginning deploy...
i  hosting[test-app-fa963]: found 7 files in public
✔  hosting[test-app-fa963]: file upload complete
i  hosting[test-app-fa963]: finalizing version...
✔  hosting[test-app-fa963]: version finalized
i  hosting[test-app-fa963]: releasing new version...
✔  hosting[test-app-fa963]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/test-app-fa963/overview
Hosting URL: https://test-app-fa963.web.app

Hosting URLに記されているURLにアクセスすると、下記のようにサイトにアクセスできるようになります。

おわりに

今回は、簡単にReactのアプリをfirebaseにデプロイしてみました。 アプリの内容を変更したい場合は、2. アプリの準備のコードを変更してみてください。 最後まで、読んでいただきありがとうございました。

---