【GitHubActions】複数JobでのWorkflowの制御とデータの受け渡し

# はじめに
こんにちは！　@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上では下記の画像のように視覚的にわかりやすく表示してくれます！
![スクリーンショット 2024-08-12 9.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781911/248d1c7c-ce54-01ff-f227-a3d8af723f4d.png)


# 実際のソースコード
<details><summary>main.yml</summary>

```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() }}
```
</details>

# 終わりに
コミュニティ内でも何人か困っている方をお見かけしたので記事化しました！
コミュニティ内外で困っている方の助けになれたら嬉しいです！

# 参考文献
- [なぜデプロイ時にnpm run buildが必要なのか?](https://qiita.com/bell_007/items/e84cd7a11b1d196e8bb4)
- [[Github Actions] artifactsを使おう！](https://qiita.com/taittide/items/bdb64e15678e6a9fba20)
- [GitHub ActionsでWorkFlowやJobを連鎖させる方法](https://qiita.com/masato_makino/items/f8cf20f3d0025d15bac8)