React向けGitHub Actions CI/CD
GitHub Actions のワークフローで、プッシュのたびに lint、テスト、ビルド、デプロイの手順を自動化します。
「React向けGitHub Actions CI/CD」はCoddyKit上の無料React Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
GitHub Actions とは
GitHub Actions は GitHub に組み込まれた CI/CD プラットフォームです。.github/workflows/ 以下の YAML ファイルでワークフローを定義し、プッシュ、プルリクエスト、スケジュールなどのイベントをきっかけに実行します。
基本的な CI ワークフロー
依存関係をインストールし、Lint を実行して、プッシュとプルリクエストのたびにテストを実行する最小限のワークフローです。
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm test -- --coveragenode_modules のキャッシュ
node_modules ではなく npm のキャッシュである ~/.npm をキャッシュして、依存関係のインストールを高速化します。actions/setup-node の cache オプションでこの処理を行えます。
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm' # caches ~/.npm based on package-lock.json hashビルドステップ
テストの後にビルドステップを追加し、プロジェクトがエラーなくコンパイルできることを確認します。
- name: Build
run: npm run build
# For Next.js — catch TypeScript errors:
- name: Type Check
run: npx tsc --noEmitマージ時に Vercel へデプロイ
ワークフローで Vercel CLI を使用し、main へのプッシュ時に Vercel へデプロイします。
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
run: |
npm install -g vercel
vercel pull --yes --environment=production --token=$VERCEL_TOKEN
vercel build --prod --token=$VERCEL_TOKEN
vercel deploy --prebuilt --prod --token=$VERCEL_TOKENマージ時に S3 へデプロイ
main でのビルドが成功した後、ビルド出力を S3 に同期し、CloudFront のキャッシュを無効化します。
- name: Deploy to S3
if: github.ref == 'refs/heads/main'
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 sync dist/ s3://my-bucket/ --delete
aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"CI での Playwright E2E
ビルド後に CI で Playwright の E2E テストを実行します。専用のステップでブラウザーバイナリをインストールします。
- name: Install Playwright Browsers
run: npx playwright install --with-deps chromium
- name: Run E2E Tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/並列マトリックスジョブ
マトリックス戦略を使用すると、複数の Node.js バージョンや環境にまたがってテストを並列実行できます。
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18, 20, 22]
steps:
- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}シークレット管理
機密性の高い値（API キーやデプロイトークン）を GitHub Secrets（リポジトリ → Settings → Secrets）として保存します。ワークフローでは ${{ secrets.MY_SECRET }} としてアクセスできます。
条件付きステップ
if: 条件を使用すると、特定のブランチや PR イベントの場合、または前のステップが成功した場合にだけステップを実行できます。
- name: Deploy
if: github.ref == 'refs/heads/main' && github.event_name == 'push'
run: npm run deployステータスバッジ
README にビルドステータスバッジを追加すると、CI の状態を一目で確認できます。
<!-- README.md -->
確認問題
異なる Node.js バージョンなど、複数の設定で同じジョブを同時に実行する GitHub Actions の機能はどれですか。
まとめ
.github/workflows/ の YAML ファイルで CI ワークフローを定義します。高速なインストールには、cache: 'npm' を指定した actions/setup-node を使用します。Lint、型チェック、テスト、ビルドの各ステップを追加します。main ブランチへのプッシュ時に条件付きでデプロイします。シークレットは GitHub Secrets に保存し、複数バージョンのテストにはマトリックスビルドを使用します。
よくある質問
「React向けGitHub Actions CI/CD」レッスンは無料ですか？
はい。「React向けGitHub Actions CI/CD」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「React向けGitHub Actions CI/CD」で何を学びますか？
GitHub Actions のワークフローで、プッシュのたびに lint、テスト、ビルド、デプロイの手順を自動化します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「React向けGitHub Actions CI/CD」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vercelへのデプロイ：Zero-ConfigとPreview URLs
- AWS S3とCloudFrontでReact SPAをホスティング
- React/Next.js AppのDocker化
- React向けGitHub Actions CI/CD