学習アプリにCI / CDを導入してみた

# はじめに
CI/CDってなに？となった方。私もそうです、まず単語の意味から理解していきましょー！！
※今回実装したアプリはホスティングサービスに「firebase」、バックエンドサービスに「supabase」を利用しています。

# CI/CDとは？
CI/CDとは「Continuous Integration（継続的インテグレーション）/ Continuous Delivery（継続的デリバリー）」の略称です。CI/CDは、何か特定の技術を指すものではなく、ソフトウェアの変更を常にテストし、自動で本番環境に適用できるような状態にしておく開発手法のことをいう。
つまり、テストやデプロイを自動化するということですね！

# CD（継続的デリバリー）の導入
やり方はこちらを参考にしました。

https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy

まず、```デプロイ``` をしたことが無かったので「firebase」にデプロイを実装しました。
初めて ```デプロイ``` ができた時は、「これがデプロイってやつか!!!」と興奮したのを覚えております笑

これで[アプリのリンク](https://study-record-c7907.web.app/)を検索すると、実装されたアプリが操作できるようになりました！

上記で手動での ```ビルド＆デプロイ``` を実装できたので、いよいよCDの導入です。

github Actionsを使用して、「firebase」に自動デプロイを実装します。

https://qiita.com/shun198/items/14cdba2d8e58ab96cf95

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

こちらを参考にして実装しました。
作成したワークフローはこちらです。
<details>
<summary>main.yml</summary>

```
name: Scheduled deploy

on:
  schedule:
    - cron: "0 6 * * *"
  workflow_dispatch:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Nodejs
        uses: actions/setup-node@v4
        with:
          node-version: "18"

      - name: Unit test
        run: |
          npm install
          npm test
        env:
          VITE_SUPABASE_URL: ${{secrets.VITE_SUPABASE_URL}}
          VITE_SUPABASE_KEY: ${{secrets.VITE_SUPABASE_KEY}}

  build-and-deploy:
    name: deploy
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js and cache
        uses: actions/setup-node@v4
        with:
          node-version: "18"
          cache: "npm"

      - name: Install dependencies # deploy時にもdistフォルダを生成するため
        run: npm install

      - name: Run build
        run: npm run build
        env:
          VITE_SUPABASE_URL: ${{secrets.VITE_SUPABASE_URL}}
          VITE_SUPABASE_KEY: ${{secrets.VITE_SUPABASE_KEY}}

      - name: Install firebase-tools
        run: npm install --save-dev firebase-tools

      - name: Decode Firebase service account key
        run: |
          echo "${{ secrets.FIREBASE_KEY }}" | base64 -d > ./firebase-key.json
          echo "GOOGLE_APPLICATION_CREDENTIALS=${{ github.workspace }}/firebase-key.json" >> $GITHUB_ENV

      - name: change space
        run: ./node_modules/.bin/firebase use ${{ secrets.FIREBASE_PROJECT_ID }}

      - name: Deploy to Firebase Hosting
        run: |
          ./node_modules/.bin/firebase deploy
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
          FIREBASE_CLI_EXPERIMENTS: webframeworks

      - name: delete GOOGLE_APPLICATION_CREDENTIALS
        run: rm $GOOGLE_APPLICATION_CREDENTIALS
        if: ${{ always() }}

```

</details>
ワークフローも記事通りに書けたし「完璧や！」と思い、いざ actions を実行したらエラー！


原因は「firebase」や「supabase」のAPIキーが参照できなかったようです。
gitに上げたくないので、環境変数にしていたのですがgithub actions の実行時に参照できませんでした。

# CI（継続的インテグレーション）の導入
まず、CIを実装するにはどんな手順が必要か？を考えました。
1.テストコードを書く
2.push時にテストコードが自動で実装される

今回は、javascriptのテストフレームワークで有名な「Jest」を使用しました。
ただ、React環境でのJestの扱い方は無知であったため、まずは使い方を調べました。

React環境では「react testing library」というパッケージが必要であるため、そちらを追加して環境を構築しました。

私なりのテストコードの書き方なのですが、まずAIのテストケースを命令してテンプレートを起こしてからをそれを編集するという順序で行っています。

なので、**まずはAIでテストコードを作成し、分からない部分や関数を逐一調べて自分で修正していくということを繰り返して完成させました。**

そして完成したテストコードを自動化させるために以下の手順を実施しました

https://qiita.com/Kei-dev-1213/items/aca49a9ad1ea8e75578a

# 学んだこと
- CI/CD は今後のメンテナンスを効率化するために絶対に実装するべき
- 自動化の大切さを身に染みて感じた
- 初回は時間や手間がかかっても、後々を考えると時間の効率化や品質を上げるためになるなら実施すべき

今回は、とりあえず完成させている人の記事や情報を第一に参考にすることを念頭に作業を進めました。
今までは、自分で「う～ん、こんな感じかな。。」と試行錯誤したりすることが多く、時間がかかっていました。
ではなく、まずは人の情報に頼るということを意識することでスピードを持って課題解決につながることが出来ました。

### 自分一人でやり切ろうとしないことが超大事！！

# おわりに
Webアプリのでプロを初めて経験できたのと、世の中でよく聞くCI/CDの実装を1人で出来たことで自信がつきました！

# 参考
https://www.sbbit.jp/article/cont1/81640

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp