🚀

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

2023/01/13に公開約1,700字

実装内容

ローカルで作成しているアプリケーション(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でもデプロイされたか確認しておきましょう。
お疲れ様でした。

Discussion

ログインするとコメントできます