はじめに
チーム開発って考えるべきこと・やるべきことが多くて大変ですよね...
そんなお悩みを抱えた方であればCI/CDを導入すればストレスが半減するでしょう。
この記事は導入方法がわからない、そもそもCI/CDって何？といった方向けです。
注意
ここで記述する内容はわかりやすさのために多少の正確性を犠牲にしています。
正確なことを知りたい場合は、Circle CIやGitHub Actions が初心者向けの説明記事を出しているので、
そちらも併せて参照してください。
この記事で話すこと
- CI/CDとはそもそも何なのか
- CI/CDを導入するとどんなメリットがあるのか
- ハンズオン: React（TypeScript）でクリックカウンターを作り、自動デプロイを体験する
話さないこと（前提知識）
この記事では以下の詳細な解説は行いません。必要に応じて公式ドキュメント等を参照してください。
- Cloudflare Workers / Pages の詳細な仕様
- React の基礎構文
- Git, GitHub の基本操作
- GitFlowなどのブランチ戦略
- Vitest・jestなどを用いたテストコードの記法
CI/CDって何？
CI/CDとは、ソフトウェア開発における「変更」から「リリース」までの工程を自動化する仕組みのことです。一般的に以下の2つのフェーズに分けられます。
CI（Continuous Integration：継続的インテグレーション）
- 役割: 「検査の自動化」
- やること: コードがプッシュされるたびに、自動でテストやLint（構文チェック）、ビルドを実行します。
CD（Continuous Delivery/Deployment：継続的デプロイメント）
- 役割: 「リリースの自動化」
- やること: テストを通過したコードを、自動的に本番環境やステージング環境へ反映（デプロイ）します。手動でのファイルアップロードやコマンド操作をゼロにします。
何が嬉しいの？
CI/CDを導入することで、開発者は「コードを書くこと」以外の雑務から解放されます。
1. 品質の担保（バグの早期発見）
自動テストが毎回走るため、人間のチェック・テストの実行漏れに起因する
不具合の発生が防げます。
2. 開発に集中できる（開発者体験の向上）
「ビルドして、FTPでアップロードして…」といった手作業が不要になり、
開発者は「機能をどう作るか」という本質的な業務に集中できます。
3. リリースサイクルの高速化と安定化
デプロイのハードルが下がると、小さな変更をこまめにリリースできるようになります。
- 変更範囲が小さい = 原因特定が容易（直前のコミットが原因と考えられるため）
- 心理的安全性の向上 = 自身で変更範囲を把握しやすくなり、安心して開発を進められます。
ハンズオン
それでは、実際にReactでシンプルなWebアプリを作成し、
GitHub Actions等のCI/CDツールを使ってデプロイする流れを体験してみましょう。
注意
この先のハンズオンではcloudflareのアカウントが必要です。
自身のドメインがなくても続けることはできますが、この機会に購入してみて良いかもしれません。
1. プロジェクトの作成
まずはViteを使ってReact × TypeScriptのプロジェクトを作成します。
$ bun create vite@latest my-react-app -- --template react
一度ここでリポジトリを作成し作成内容を公開しておきます。
2. CI/CDの設定
ここからが本題です。GitHub Actionsを使って、
「mainブランチにコードがプッシュされたら、自動でチェックしてデプロイする」という仕組みを作ります。
2-1. ワークフローファイルの作成
ワークフローとは自動実行される一連のまとまりのことです。
プロジェクトのルートディレクトリに .github/workflows というフォルダを作成し、その中に deploy.yml というファイルを作成してください。
# .github/workflows/deploy.yml
name: Deploy # ワークフローの名前
on: # 実行するタイミングの指定
push:
branches: [main]
workflow_dispatch:
jobs: # 実行する内容
deploy:
name: Deploy to Cloudflare Pages
runs-on: ubuntu-latest
steps:
- name: Checkout code # リポジトリの取得
uses: actions/checkout@v4
- name: Setup Node.js # 実行環境のセットアップ
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Setup Bun # パッケージマネージャのセットアップ
uses: oven-sh/setup-bun@v1
with:
bun-version: latest
- name: Install # 依存関係のインストール
run: bun install
- name: Lint # ソースコードのlint *説明は後述
run: bun run lint
- name: Build # デプロイできる形式にビルド
run: bun run build
- name: Deploy to Cloudflare Pages # Cloudflareにデプロイ
uses: cloudflare/wrangler-action@v3
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} # シークレット *説明は後述
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy dist --project-name=click-counter
ポイント
-
lint: 静的解析ツール
これを使用することにより潜在的なバグの元を発見したり、
コーディングルールに則っていないコードを発見することができます。
発見した場合デプロイが中止されるようにもできます。 -
secrets: GitHubに組み込まれている機密情報の管理をする仕組み
これを使用することによってソースコードに機密情報を記載することなく、
APIKeyやアカウントIDといったセンシティブな情報を管理することができます。
一般的に環境ごとに依存する変数であるため、環境変数などと呼ばれる場合が多いです。
2-2. Cloudflare側でプロジェクト枠を作成する
デプロイ先となるプロジェクトを事前に準備しましょう。
Cloudflareのダッシュボードにログインし、Workers & Pages を開きます。
アプリケーションを作成 > Looking to deploy Pages? Get startedをクリックします。
ここでContinue wth GitHubを選択することでより素早くCDを構築することができますが、
バックエンドなどのデプロイに活用する際、不便な場合があるので今回はよりカスタマイズ性の高いGitHub Actionsを使用する方式をとっています。
Project nameに click-counter と入力し、Create project をクリックします。
Web画面上に「Drag and drop your assets...」と出ますが、ブラウザはそのまま閉じてOKです。これで受け入れ体制が整いました。
2-2. Cloudflareの認証情報を取得する
デプロイにはCloudflareの権限が必要です。以下の2つを取得しましょう。
Account ID: Cloudflareのダッシュボードにログインし、Workers & Pagesの概要ページ右側にある「Account ID」をコピーします。
API Token: ユーザープロフィールの API Tokens ページへ行き、「トークンを作成」をクリックします。テンプレートから「Cloudflare Workers を編集する」を選択し、作成されたトークンをコピーします。
2-3. secretsに認証情報を登録
取得したIDとトークンをGitHubリポジトリに登録します。
作成したGitHubリポジトリのページを開きます。
Settings > Secrets and variables > Actions を選択します。
New repository secret をクリックし、以下の2つを登録してください。
- CLOUDFLARE_ACCOUNT_ID
- CLOUDFLARE_API_TOKEN
これでCI/CDの準備は完了です！
この状態でコードをGitへCommit & Pushすると、GitHub Actionsが動き出し、
Cloudflareへ自動デプロイが走ります。
3. カウンターアプリの実装
では、作成したリポジトリの一部を変更して自動デプロイを体感してみましょう
src/App.tsx を編集してみましょう。
// src/App.tsx
...
</div>
<h1>CI/CDって便利!!</h1>
<div className="card">
...
本来はここでテストコード（Vitest等）も記述し、CI上で実行させますが、今回はデプロイの流れを優先するため割愛します。
これをCommit & Pushすると、リポジトリ側で先ほど作成したActionが実行されます。
デプロイが完了すると緑色チェックマークに変わります。
CloudflareのWorkers & Pages > click-counterからプロダクションのドメインをクリックすることでデプロイされたページに飛ぶことができます。
確認してみましょう
無事反映されていました！
まとめ
今回は、Reactアプリの作成を通じて、CI/CDによるフロントエンドデプロイの自動化を体験しました。
ポイントの振り返り
- CI/CDは「テスト・ビルド・デプロイ」を自動化する仕組み。
- 導入することで、手作業のミスを減らし、開発に集中できる時間を増やせる。
- デプロイを小さな変更の単位に分割することで、バグ対応も簡単になる。
今回はデプロイのみに焦点を当てましたが、応用すれば「AIによるコードレビューの自動化」や「パフォーマンス計測」など、様々なプロセスを自動化できます。
人間は信用できないので自動化ツールに任せて、次のプロジェクトでは「まずはデプロイの自動化から導入してみましょう。
様々な場面のチーム開発における開発者体験が劇的に変わるはずです！