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

2020年12月8日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アカウントを取得していない場合は、以下の記事を参考にしてみて下さい。

git入門　～仕組みを理解する～　第８回　GitHubにアカウントとリポジトリを作成しよ

第７回まででcommitの仕組みや２つのリポジトリを利用したcommitの反映する方法について学んできました ...

https://snowsystem.net/git/git-master/git-8/

1. GitHub Actionsの使い方
- 1.1. Actionsを開く
- 1.2. workflowのYAMLファイルを作成する
2. GitHub ActionsのYAMLファイルをReact＋Firebaseデプロイ用に修正する
- 2.1. 「.github/workflows/deploy.yml」ファイルを取得する
- 2.2. 「.github/workflows/deploy.yml」ファイルを修正する
3. GitHub – Settings – SecretsにFirebase tokenを環境変数に設定する
- 3.1. Firebase Tokenを取得
- 3.2. Firebase TokenをSecretsに登録
4. GitHubにPushし自動でビルド／テスト／デプロイが実行されることを確認する

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行目	name	GitHub 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」をクリックし変数名と値を登録します。

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

Name	Value
FIREBASE_TOKEN_PROD	firebase login:ciコマンドで取得した値

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

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

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

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

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

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

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

git,GitHub

Posted by snow