はじめに
こんにちは！ @art93dev です！
現在JISOUというコミュニティでReactの勉強をしています。
その中でCI/CDを学習しており、今回はJobs内でbuild,test,deployを直列処理する方法を紹介します。
複数Jobに分割する理由
複数Jobに分ける理由として以下が挙げられます。
- Job実行時にネットワーク不調等が発生した後、失敗したJobからリトライできること
- どのJobが原因で失敗したか視覚的にわかりやすい
- （今回は行っていませんが）複数のJobを並列に実行することによる高速化
２つの必要な技術
データの受け渡し artifact
# データのアップロード (build内)
- name: Upload dist
uses: actions/upload-artifact@v2
with:
name: dist
path: ./dist
# データのダウンロード (deploy内)
- name: Download dist
uses: actions/download-artifact@v2
with:
name: dist
「buildにて生成したdistフォルダをdeployにて呼び出す」技術です。
npm run buildを実行した際、src配下のソースコードを最低限のファイルにまとめてdistフォルダ(またはbuildフォルダ)の中に格納されています。
npm run deployではこのdistフォルダを使用してデプロイすることでサイトの読み込みの高速化を図っているそうです。
上記のようにbuild内にてupload-artifactでdistフォルダをアップロードし、deploy内でダウンロードすることでdistフォルダの受け渡しができます。
ちなみにtest時はdistフォルダ配下のファイルではなく、srcフォルダ配下のファイルを元にテストを実行するためdistフォルダのダウンロードは必要ありません。
処理の直列化 needs
test:
needs: build
~~~
deploy:
needs: test
上記のようにneeds:hogeとすることで処理を直列化することができます。
GitHubActions上では下記の画像のように視覚的にわかりやすく表示してくれます！
実際のソースコード
main.yml
main.yml
name: React Deploy
on:
push:
branches: ["main"]
workflow_dispatch:
jobs:
build:
name: build
runs-on: ubuntu-latest
env:
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm install
- name: Run build
run: npm run build
- name: Upload dist
uses: actions/upload-artifact@v2
with:
name: dist
path: ./dist
test:
name: test
runs-on: ubuntu-latest
needs: build
env:
VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm install
- name: Run test
run: npm run test
deploy:
name: deploy
runs-on: ubuntu-latest
needs: test
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm install
- name: Download dist
uses: actions/download-artifact@v2
with:
name: dist
- name: Install firebase-tools
run: npm install --save-dev firebase-tools
# 必要な認証情報の準備
- name: Decode service account key
run: |
echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV
# Firebaseのスペースを指定する
- name: Change Firebase space
run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}
# Deployする
# FIREBASE_CLI_EXPERIMENTS: webframeworksを設定しないとDeployできない
- name: deploy
run: ./node_modules/.bin/firebase deploy
env:
FIREBASE_KEY: ${{ secrets.FIREBASE_KEY}}
FIREBASE_CLI_EXPERIMENTS: webframeworks
# 認証情報を削除してセキュリティ性を高める
- name: delete GOOGLE_APPLICATION_CREDENTIALS
run: rm $GOOGLE_APPLICATION_CREDENTIALS
if: ${{ always() }}
終わりに
コミュニティ内でも何人か困っている方をお見かけしたので記事化しました！
コミュニティ内外で困っている方の助けになれたら嬉しいです！