はじめに
CI/CDってなに？となった方。私もそうです、まず単語の意味から理解していきましょー！！
※今回実装したアプリはホスティングサービスに「firebase」、バックエンドサービスに「supabase」を利用しています。
CI/CDとは？
CI/CDとは「Continuous Integration（継続的インテグレーション）/ Continuous Delivery（継続的デリバリー）」の略称です。CI/CDは、何か特定の技術を指すものではなく、ソフトウェアの変更を常にテストし、自動で本番環境に適用できるような状態にしておく開発手法のことをいう。
つまり、テストやデプロイを自動化するということですね！
CD（継続的デリバリー）の導入
やり方はこちらを参考にしました。
まず、デプロイ をしたことが無かったので「firebase」にデプロイを実装しました。
初めて デプロイ ができた時は、「これがデプロイってやつか!!!」と興奮したのを覚えております笑
これでアプリのリンクを検索すると、実装されたアプリが操作できるようになりました！
上記で手動での ビルド＆デプロイ を実装できたので、いよいよCDの導入です。
github Actionsを使用して、「firebase」に自動デプロイを実装します。
こちらを参考にして実装しました。
作成したワークフローはこちらです。
main.yml
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() }}
原因は「firebase」や「supabase」のAPIキーが参照できなかったようです。
gitに上げたくないので、環境変数にしていたのですがgithub actions の実行時に参照できませんでした。
CI（継続的インテグレーション）の導入
まず、CIを実装するにはどんな手順が必要か？を考えました。
1.テストコードを書く
2.push時にテストコードが自動で実装される
今回は、javascriptのテストフレームワークで有名な「Jest」を使用しました。
ただ、React環境でのJestの扱い方は無知であったため、まずは使い方を調べました。
React環境では「react testing library」というパッケージが必要であるため、そちらを追加して環境を構築しました。
私なりのテストコードの書き方なのですが、まずAIのテストケースを命令してテンプレートを起こしてからをそれを編集するという順序で行っています。
なので、まずはAIでテストコードを作成し、分からない部分や関数を逐一調べて自分で修正していくということを繰り返して完成させました。
そして完成したテストコードを自動化させるために以下の手順を実施しました
学んだこと
- CI/CD は今後のメンテナンスを効率化するために絶対に実装するべき
- 自動化の大切さを身に染みて感じた
- 初回は時間や手間がかかっても、後々を考えると時間の効率化や品質を上げるためになるなら実施すべき
今回は、とりあえず完成させている人の記事や情報を第一に参考にすることを念頭に作業を進めました。
今までは、自分で「う～ん、こんな感じかな。。」と試行錯誤したりすることが多く、時間がかかっていました。
ではなく、まずは人の情報に頼るということを意識することでスピードを持って課題解決につながることが出来ました。
自分一人でやり切ろうとしないことが超大事！！
おわりに
Webアプリのでプロを初めて経験できたのと、世の中でよく聞くCI/CDの実装を1人で出来たことで自信がつきました！
参考
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼