【React×CI/CD】自動デプロイ環境を構築！GitHub Actions×Vercelで即公開可能に

プログラミング

「Reactアプリを更新するたびに手動でデプロイするのが面倒」
「変更を反映させるまでに時間がかかる」
そんな悩みを感じている方も多いのではないでしょうか？

実は、GitHub ActionsとVercelを組み合わせれば、コードをプッシュするだけでReactアプリを自動でデプロイできます。

この記事では、CI/CDの考え方からGitHub Actionsの設定、Vercelとの連携方法までを、初心者にも分かるように具体的なコードと手順で解説します。

CI/CDとは何か？Reactでなぜ必要？

自動化された開発の流れを理解する

結論：CI/CDは開発効率と品質を両立するために欠かせません。

CI/CDとは以下の意味を持ちます。

  • CI（継続的インテグレーション）：コードの変更を自動で統合
  • CD（継続的デリバリー/デプロイ）：自動でテストや本番環境へ反映

React開発においては、「コードを修正 → push → 自動で公開」という流れが確立されることで、

  • デプロイのミスを防ぐ
  • リリース頻度が上がる
  • 開発スピードが上がる

という大きな効果があります。

経済産業省の「デジタルガバメント実行計画」でも、開発サイクルの高速化＝DX推進の柱とされており、CI/CDの導入は重要視されています（出典：https://cio.go.jp/digital_gov_action_plan）。

GitHub Actionsの仕組みと導入手順

自動で動く「処理の流れ」を定義する

結論：GitHub Actionsは、プッシュやマージなどのイベントに応じて自動で処理を実行する機能です。

構成要素は以下の通りです。

  • Workflow：処理のまとまり
  • Event：処理を起動するきっかけ（例：push）
  • Job：実行単位（複数まとめて動かす）
  • Step：コマンドやスクリプトを1つずつ実行

GitHub上で.github/workflows/フォルダにYAML形式のファイルを追加すれば利用できます。

Vercelと連携する理由と設定方法

なぜVercelなのか？

結論：Reactのホスティングと自動更新に特化しており、GitHubとの連携が非常に簡単です。

Vercelは以下の特徴があります。

  • 無料プランあり
  • GitHubのリポジトリと連携するだけで自動デプロイ
  • デプロイごとにURLを発行（プレビュー機能あり）
  • mainやdevなどのブランチごとに切り分け可能

実際のGitHub Actions構成例

基本のYAML設定を紹介

結論：push時にビルド→Vercelへのデプロイを自動化します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: リポジトリのチェックアウト
        uses: actions/checkout@v3
      - name: Node.jsのセットアップ
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: 依存関係のインストール
        run: npm install
      - name: Vercelへデプロイ
        run: |
          npm install -g vercel
          vercel --prod --token=$VERCEL_TOKEN
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

ポイント：

  • VERCEL_TOKEN は GitHub の Secrets に設定しておく必要があります
  • vercel CLIのインストールも自動で行っています

デプロイ成功の確認と活用方法

確認手順と失敗時のチェック

結論：Actions画面とVercelのログで確認可能です。

確認方法：

  • GitHub の「Actions」タブ → 実行ログを確認
  • Vercel ダッシュボード → 成功時は新しいURLが表示されます
  • 失敗した場合 → エラーメッセージを元に node_modules の依存や token 設定を見直す

完成形コードとファイル構成

1
2
3
4
5
6
7
8
9
my-react-app/
├── .github/
│   └── workflows/
│       └── deploy.yml
├── src/
│   └── App.js
├── package.json
├── vercel.json（任意）
└── README.md

deploy.yml（前述のYAML）

App.js（例）

1
2
3
4
5
6
7
8
9
function App() {
  return (
    <div>
      <h1>CI/CD Test App</h1>
      <p>GitHub Actions + Vercel 自動デプロイ</p>
    </div>
  );
}
export default App;

まとめ

この記事では、Reactで作ったアプリをGitHub ActionsとVercelを使って自動でデプロイする方法を紹介しました。

重要なポイント：

  • GitHub Actionsはプッシュやマージのたびに処理を自動実行できる
  • Vercelと組み合わせることで、ノーコストで本番公開が可能
  • 自動化により、ミスや手間を大幅に削減できる

Reactアプリを継続的に更新する際には、ぜひこのCI/CD環境を導入してみてください。

タイトルとURLをコピーしました