Github Actionsを使ってpush時にCDを行う

# はじめに
GithubActionsで自動デプロイ(cd)することに三連休を費やしました。
非常に時間がかかってしまったので、今後のためにプロセスをまとめます。

# 実現したいこと
GithubActionsを用いて、プロジェクトをpush時にビルドとデプロイまで行う。

# 行ったこと
### 1.GithubActionsの理解
こちらの記事を参考に使い方を把握しました。

https://qiita.com/Teach/items/d2c4d7bec98228df1807

#### ここでの疑問１「ymlとは何？」

https://wa3.i-3-i.info/word13803.html

https://wa3.i-3-i.info/word13801.html

上記サイトより引用
>YAMLのルールに従って書かれた、テキストファイルのこと
>> 構造化されたデータを表現するのに便利な、ファイルの書き方ルール（のひとつ）

ヤムルと読むそう
XMLなどの類のひとつ、データのやりとりに使われる書き方のひとつと理解しました。

#### ここでの疑問2「.ymlに記載の内容がわからない」

「GitHub Actions　リファレンス」で検索するとドキュメントがでてきました。

https://docs.github.com/ja/actions/writing-workflows/workflow-syntax-for-github-actions#name

各構文を検索すると具体例とともに説明が記載されています。

### 2.GithubActionsでbuildできるようにする
1.で学んだことを元に、CDしたいプロジェクトにymlファイルを作成しました。

```yml:release.yml
name: Release

on:
  workflow_dispatch:

jobs:
  project_build:
    runs-on: ubuntu-latest
    steps:
      - run: npm run build
```

結果はエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/1a4082f6-d5e5-4e3b-81c7-b8f5f9fa1261.png)

こちらを参考に修正

https://zenn.dev/jinwatanabe/articles/4026d373383739#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

```yml:release.yml
name: Release

on:
  workflow_dispatch:

jobs:
  project_build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build
```

ワークフローがリポジトリにアクセスできるよう、チェックアウトを行う。
npmコマンドを使用できるようにする必要がありました。

### 3.GithubActionsでdeployできるようにする
2.で参考にした記事ではfirebase-toolsを使用していました。


https://zenn.dev/jinwatanabe/articles/4026d373383739#3.-github-actions-%E3%81%AE%E8%A8%AD%E5%AE%9A

firebase-tools、upload-artifactを使用して、build⇒deployをするように追記しました。
また、push時にデプロイされるようにon: pushに修正しました。

```yml:release.yml
name: Release

on: push

jobs:
  project_build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@main
        with:
          name: dist
          path: dist

  project_deploy:
    runs-on: ubuntu-latest
    needs: project_build
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js and cache
        uses: actions/setup-node@v2
        with:
          node-version: "18"
          cache: "npm"
      - name: Download Artifact
        uses: actions/download-artifact@main
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: joinflux/firebase-tools@v9.16.0
        with:
          args: deploy --project=study-record-7da4e --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```

おおまかな流れは下記です。

1. project_buildで、buildを行い、upload-artifactでdist配下（buildしたモジュール）をアップロードする
2. project_deployでdownload-artifactでアップロードしたモジュールをダウンロードし、ダウンロードしたものをdeployする。

結果はsuccessとなり、build・deployまですることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/0c56430c-4bf2-4c85-8c76-fea6424ffb26.png)

#### 実際にサイトにアクセスすると真っ白い画面に…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/bf9f14a0-4177-4fbb-bae2-8fa3e0f84737.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/7ba77c00-ed3b-4187-b32b-3f36402f56b8.png)

supabaseUrl is required.のエラーがコンソール上に表示されていました。

https://qiita.com/gantarooou_js/items/bc493bba82a8a6b1ab32

こちらの記事を参考に修正

```diff_yaml:release.yml
jobs:
  project_build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "18"
      - name: Install dependencies
        run: npm install
      - name: Run build
        run: npm run build
+       env:
+         VITE_NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.VITE_NEXT_PUBLIC_SUPABASE_URL }}
+         VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{secrets.VITE_NEXT_PUBLIC_SUPABASE_ANON_KEY }}
      - name: Archive Production Artifact
        uses: actions/upload-artifact@main
        with:
          name: dist
          path: dist
```


# おわりに
過去のエラー解消記事に助けられました。私も助けられるような記事書きたいです。

# 参考

https://wa3.i-3-i.info/word13803.html

https://wa3.i-3-i.info/word13801.html

https://qiita.com/Teach/items/d2c4d7bec98228df1807

https://github.com/marketplace/actions/checkout

https://github.com/marketplace/actions/firebase-tools

https://github.com/marketplace/actions/upload-artifact

https://github.com/marketplace?type=actions