「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へのデプロイを自動化します。
# .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 に設定しておく必要がありますvercelCLIのインストールも自動で行っています
デプロイ成功の確認と活用方法
確認手順と失敗時のチェック
結論：Actions画面とVercelのログで確認可能です。
確認方法：
- GitHub の「Actions」タブ → 実行ログを確認
- Vercel ダッシュボード → 成功時は新しいURLが表示されます
- 失敗した場合 → エラーメッセージを元に
node_modulesの依存や token 設定を見直す
完成形コードとファイル構成
my-react-app/
├── .github/
│ └── workflows/
│ └── deploy.yml
├── src/
│ └── App.js
├── package.json
├── vercel.json（任意）
└── README.md
deploy.yml（前述のYAML）
App.js（例）
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環境を導入してみてください。
Japanese 
English