ReactをFirebase Hostingでデプロイしてみる

# はじめに

Firebaseを使う機会があったので、勉強も兼ねて今回ReactアプリケーションをFirebaseHostingでデプロイしてみようと思います。

# Firebaseとは
Googleが提供しているモバイルアプリ開発やwebアプリケーション開発向けのプラットフォームです。
MBass/Bassと呼ばれるバックエンドサービスを提供しています。

:::note
Bassは、Backend as a service
MBassは、Mobile Backend as a serviceの略称です。
:::

# Reactアプリの準備
今回は`npm`を使わずに`yarn`を使います。

:::note
yarnの方がnpmよりもインストールが早いので、今回はyarnを使って行っていこうと思います。
:::
```
yarn create react-app react-firebase-hosting
```

`ls`コマンドを使って以下のような表示が出れば、アプリの作成はできています。
```
ls
react-firebase-hosting
```

以下のコマンドでreactアプリを起動します。
```
yarn start
```
コンソールに以下の内容が出ているか確認します。
```
Compiled successfully!

You can now view react-firebase-hosting in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.31.192.204:3000

Note that the development build is not optimized.
To create a production build, use yarn build.
```
次に下のurlにアクセスして、画像のような表示が出れば、作成は成功です。

http://localhost:3000

![スクリーンショット 2024-06-27 15.02.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/6e94d57a-a479-b737-e13a-43eb4f40548e.png)



# Firebaseの使用方法
次にFirebaseのプロジェクトを作成します。

`Go to console`を選択する。
![スクリーンショット 2024-06-26 10.45.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/931e492a-bc47-5564-c5ff-874f723ef4ac.png)

遷移したページの先で`プロジェクト`を作成を選択する。
![スクリーンショット 2024-06-26 10.45.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/3cf687e1-d2ce-1e92-d65c-52fedf81903d.png)

今回は、下のようなプロジェクトをつけてみます。
![スクリーンショット 2024-06-27 15.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/a7c22fb4-dc03-2c34-19fc-6bee9a4b266a.png)


続行を選択すると以下のような画面になります。有効にチェック入れておくことをお勧めします。
![スクリーンショット 2024-06-26 10.53.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/7cda5a27-8066-b7f2-143d-e66679644a2e.png)

下も状況に合わせて、設定してください。よくわからない人は画像のように設定してください。
![スクリーンショット 2024-06-26 10.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/7a2cff7f-f922-82e1-259e-b9a020fd2a95.png)

こうするとプロジェクトが作成されます。

# firebaseの準備

webを選択します。マークは、androidの横にあるマークのアイコンを選択すればいいです。
![スクリーンショット 2024-06-27 13.07.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/0f3606ff-5995-af46-fa78-9bafee234fe8.png)

アプリの名前を設定します。
加えて、`Firebase-Hosting`を設定も設定します。
![スクリーンショット 2024-06-27 15.18.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/3ae65128-464f-b022-e16a-27918da450ad.png)


スクリプトを控える
![スクリーンショット 2024-06-27 13.11.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/8a9e58c4-62f9-f8dd-4db2-0476fb800217.png)

下の画像は、firebaseへのデプロイをcliで行うためのライブラリのインストール方法を示しています。
![スクリーンショット 2024-06-27 13.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/f950fb5c-6c12-145c-98b5-f81a4ac8e722.png)
しかし、今回はyarnを使っているので
```
yarn global add firebase-tools
```
でインストールします。

下の画像では、firebaseへのデプロイ方法が書かれています。
![スクリーンショット 2024-06-27 15.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/e186ce1d-b7e5-b48d-3a17-d08e6866489f.png)


確認して次に進んだ後に、以下の画面が出れば完了です。
![スクリーンショット 2024-06-27 15.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/c93b4368-8d2e-e233-0a18-79c9de85493c.png)



# Reactで各種設定
firebaseSDKをインストールします。
```
yarn add firebase
```

左のプロジェクト設定を選択します。
![スクリーンショット 2024-06-27 17.34.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/0c72db26-3b81-f26f-6f44-79f93eaa9479.png)

この画面になったら下にスクロールする。
![スクリーンショット 2024-06-27 17.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/bdb2e0b0-eca8-74e8-cde0-a34a1b806001.png)

この画面にAPIキー
![スクリーンショット 2024-06-27 17.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/feb6b6fa-ec2b-3c87-5bc4-1d32b8fd34db.png)


```.env
REACT_APP_APP_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_DATABASE_URL=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGEBUCKET=
REACT_APP_MESSAGING_SENDER_ID=
REACT_APP_APP_ID=
REACT_APP_MEASUREMENT_ID=

```
下のようなファイルを作ります。
```src/firebase.js
import firebase from "firebase";

const config = {
  apiKey: process.env.REACT_APP_APP_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};
firebase.initiaraizeApp(config);
export default config;

```

## FirebaseCLIをインストール
デプロイに必要なFirebaseCLIをインストールします。
```
yarn global add firebase-tools
```
```
firebase login
```
ログイン画面に飛ぶので、ログインしてください。

ログインし終わったら初期化してください
```
firebase init
```

すると、下の画面になると思います。
![スクリーンショット 2024-06-27 18.31.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/83a0887e-33fe-27ed-d4cd-a6f13604822c.png)

ここから矢印キーで青の>を動かせるので、`Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys`を選択します。選択できると以下のような画面になると思います。

```
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm
your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◉ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)
```

選択すると、下のような画面が出てくるので、`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
```

次にプロジェクトを選択します。
![スクリーンショット 2024-06-27 18.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/65de31f5-6a43-f988-9983-8dc9ffbf097e.png)
>ここだけ写真ですいません

すると下のようになります。

```
=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory?
```

これはデプロイされたものを指定します。
この後`yarn build`でデプロイしますが、buildディレクトリにできるので、それを指定します。
```
? What do you want to use as your public directory? build
```

次に下のような表示が出ます。
```
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
```
今回は該当するのでyesを選択します。
```
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
```

次にGithubで自動デプロイを有効にするか聞かれます。
```
? Set up automatic builds and deploys with GitHub? (y/N)
```
今回はしないのでNにします
```
? Set up automatic builds and deploys with GitHub? (y/N) N
```
以下の表示されたら成功です。
```
✔  Wrote build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!
```

次に下のコマンドでビルドします。
```
yarn build
```

下の表示が出てきたらビルドできています
```
Creating an optimized production build...
Compiled successfully
```

ここからfirebaseにデプロイします。
```
firebase deploy
```

以下の文面が出てきたら成功です！
```
✔  Deploy complete!
```

本当にデプロイできたか確認してみましょう。
下の方に行くとHostingURLが書かれていると思うのでそこにアクセスします。
```
Project Console: https://console.firebase.google.com/project/react-firebase-hosting-qiita/overview
Hosting URL: https://react-firebase-hosting-qiita.web.app
```

うまくいきました！
![スクリーンショット 2024-06-27 21.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/081c1781-0120-440e-1d31-8b2834bfa3d0.png)

# 最後に

firebaseはGithubを利用してCI/CDを行えるらしく、CI/CDについてよくわかっていないことも多いので、次はそれを挑戦してみようと思います。