GitHub ActionsでCI/CD環境を構築する ～ReactアプリをFirebaseへデプロイするyamlファイルの書き方～

git,GitHub

CI/CD環境はこれまでCircleCIを利用してきたのですが、Reactのversion17でcreate-react-appしたプロジェクトをCircleCIでbuildすると以下のエラーが発生するようになりました。

The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.

原因は恐らくメモリ不足と思われるのですが、これを機会にGitHub ActionsでCI/CD環境を構築してみようと思いました。

今回はReactアプリをFirebaseのHostingへ自動で[ビルド] => [テスト] => [デプロイ]を行う環境をGitHub Actionsで構築する場合の手順をまとめました。

GitHub ActionsはGitHubのCI/CD機能ですので、GitHubアカウントを取得していない場合は、以下の記事を参考にしてみて下さい。

　

GitHub Actionsの使い方

Actionsを開く

GitHubでCI/CDを行いたいリポジトリを開き、「Actions」を開きます。

workflowのYAMLファイルを作成する

GitHub ActionsのworkflowのYAMLファイルを作成する方法はいくつかありますが、簡単な「Set up this workflow」から作成する方法で説明します。

「Set up this workflow」をクリック

今回は、自分でYAMLファイルを記述するので一番上の「Simple workflow」の「Set up this workflow」をクリックします。

YAMLファイル名を設定する

YAMLファイル名をわかりやすい名前に変更できます。

ここではファイル名を「deploy.yml」として進めます。

実際のYAMLの記載内容についてはここで設定してもよいですが、今回はこのままコミットしローカル側で変更します。

画面右上に「Start commit」ボタンがありますのでクリックしコミットします。

GitHub ActionsのYAMLファイルをReact＋Firebaseデプロイ用に修正する

「.github/workflows/deploy.yml」ファイルを取得する

GitHubのリポジトリに「.github/workflows/xxx.yml」ファイルが作成されていますので、

ローカル側でgit fetch & merge（もしくはgit pull）でGitHub ActionsのYAMLファイルを取得します。

ディレクトリ構成はこのような感じ

$ tree .github
.github
`-- workflows
    `-- deploy.yml

「.github/workflows/deploy.yml」ファイルを修正する

Reactプロジェクトをルートディレクトリではなく「app」ディレクトリの配下に作成している場合のサンプルになります。

name: React Firebase CI/CD

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build_test_deploy:
    runs-on: ubuntu-18.04
    timeout-minutes: 10

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Node
        uses: actions/setup-node@v1
        with:
          node-version: 14.15.1

      - name: Install Dependencies
        run: |
          yarn install
        working-directory: app

      - name: Build
        run: |
          yarn build
        working-directory: app

      - name: Test
        run: |
          yarn test
        working-directory: app

      - name: Install Firebase Tools
        run: |
          npm install -g firebase-tools
        working-directory: app

      - name: Deploy
        env:
          FIREBASE_TOKEN_PROD: ${{ secrets.FIREBASE_TOKEN_PROD }}
        run: |
          firebase deploy  --only hosting --project prod --token $FIREBASE_TOKEN_PROD
        working-directory: app
行番号項目説明
1行目nameGitHub Actionsの画面で表示されるワークフロー名
3行目onワークフローをトリガーするイベントを設定
4行目
5行目		push
　branches: [master]		pushされた場合に実行
masterブランチを指定
6行目
7行目		pull_request
　branches: [master]		pull requestされた場合に実行
masterブランチを指定
9行目jobsワークフローに定義するジョブを設定
※1つのワークフローには1つ以上のジョブを設定する
10行目ジョブ名ジョブ名を設定
※サンプルではbuild_test_deploy
11行目runs-onビルドやデプロイを実行するイメージを指定
※サンプルではubuntu-18.04
12行目timeout-minutesジョブのタイムアウト時間を設定
※通常は3分程度で完了するためサンプルでは10分を指定
14行目stepsジョブに定義するステップ（タスク）を設定
15行目
16行目		name: Checkout
uses: actions/checkout@v2		チェックアウトする場合に指定するコマンド
※GitHubのactions/checkoutリポジトリに実際の処理がある
18行目
～
21行目		name: Install Node
uses: actions/setup-node@v1
with:
　node-version: 14.15.1		nodeをインストールする場合に指定するコマンド
インストールするnodeのバージョンを指定できる
23行目
～
26行目		name: Install Dependencies
run: |
　yarn install
working-directory: app		packege.jsonを元に必要なパッケージをインストール
working-directoryで実行するディレクトリを指定できる
28行目
～
31行目		name: Build
run: |
　yarn build
working-directory: app		Reactプロジェクトをビルド
working-directoryで実行するディレクトリを指定できる
33行目
～
36行目		name: Test
run: |
　yarn test
working-directory: app		テストコマンド実行
working-directoryで実行するディレクトリを指定できる
38行目
～
41行目		name: Install Firebase Tools
run: |
　npm install -g firebase-tools
working-directory: app		Firebaseにデプロイするためにfirebase-toolsをインストール
43行目
～
48行目		name: Deploy
env:
　FIREBASE_TOKEN_PROD: ${{ secrets.FIREBASE_TOKEN_PROD }}
run: |
　firebase deploy –only hosting –project prod –token $FIREBASE_TOKEN_PROD
working-directory: app		Firebaseのhostingにデプロイする
「–project prod」は「.firebaserc」で設定した環境名を指定する
「default」のままの場合は指定不要

「$FIREBASE_TOKEN_PROD」はGitHubの環境変数に設定することで参照できる
設定方法はこの後に説明

GitHub – Settings – SecretsにFirebase tokenを環境変数に設定する

「.github/workflows/deploy.yml」ファイルに設定した「$FIREBASE_TOKEN_PROD」の値をGitHubのSecrets（環境変数）に登録します。

Firebase Tokenを取得

Firebase Tokenは以下のコマンドで取得できます

firebase login:ci

dockerコンテナ内から実行する場合は以下のように「–no-localhost」を指定することで取得できます。

firebase login:ci --no-localhost

Firebase TokenをSecretsに登録

GitHubの「Settings」画面で「Secrets」を選択するとSecrets（環境変数）の登録画面が表示されます。

「New repository secret」をクリックし変数名と値を登録します。

ここでは、以下の通り登録します。

NameValue
FIREBASE_TOKEN_PRODfirebase login:ciコマンドで取得した値

GitHubにPushし自動でビルド／テスト／デプロイが実行されることを確認する

「.github/workflows/deploy.yml」をコミットしPushしましょう。

GitHub Actionsが自動的にPushを検知しdeploy.ymlの内容を実行します。

実行結果は「Actions」画面で確認できます。

緑色のチェックがついていれば無事成功です。

ジョブのStep毎の結果を確認することもできます。

CircleCIの画面とよく似ていますね。

git,GitHub

Posted by snow