React × Firebase × Gitlabで自動デプロイ(CI/CD)を構築する

実装内容

ローカルで作成しているアプリケーション（React）が対象のブランチにマージ(Gitlab)されたら、自動でFirebaseにデプロイされること。CI/CDを構築する。

前提条件

1. Reactでアプリケーションを作成している。
2. Firebaseに登録しプロジェクトを作成している。
3. ローカル環境とFirebaseを接続している。

全体の流れ

1. Firebaseで作成しているプロジェクトのトークンを取得する。
2. Gitlabにてトークンを登録。
3. ローカルにて.gitlab-ci.ymlファイルを作成する。
4. プッシュしてCI/CDが成功しているか確認する。

1. Firebaseで作成しているプロジェクトのトークンを取得する

以下コマンドを実行し、firebaseのトークンを取得してください。

firebase login:ci

実行すると Firebaseとの接続ページに移ります。接続が成功すると以下の画面が表示されます。

コンソールにfirebaseトークンが発行されます。
1//〜〜〜がトークンなのでコピーします。

2. Gitlabにてトークンを登録

発行されたトークンをコピーしたら、Gitlabに登録します。
プロジェクトに移動し、設定のCI/CDを選択します。
そして、変数という項目にて変数の追加をクリック。
キーには$FIREBASE_TOKEN、値には先ほどのトークンを貼り付けて変数を追加します。

これでトークンの登録が完了しました。

3. ローカルにて.gitlab-ci.ymlファイルを作成する

ルートディレクトリ直下に「.gitlab-ci.yml」というファイルを作成します。

中身に実行したい内容を記述します。こちらを参考にしました。
今回は以下の内容を記述しました。

.gitlab-ci.yml

image: node:latest

stages:　　#行うのはdeployと宣言
  - deploy

cache:
  paths:
    - node_modules/

deploy: 　#以下deployでの内容
  stage: deploy
  only:
    refs:
      - dev
  script:
    - npm run build
    - npm install -g firebase-tools 　#firebaseCLIを使用するためにインストール
    - firebase deploy --token $FIREBASE_TOKEN　　#firebaseプロジェクトにデプロイ

4. プッシュしてCI/CDが成功しているか確認する

.gitlab-ci.ymlを作成したらGitlabにプッシュしてマージします。
プロジェクトのCI/CDの項目で成功と表示されていれば、完成です。

念の為Firebaseでもデプロイされたか確認しておきましょう。
お疲れ様でした。