GitHub と Cloudflare Pages で静的サイトを deploy する

Workers と Pages 上で動く project を管理する場所です。ここから新しい application を作成します。

1. Cloudflare Dashboard にログインします。
2. 左メニューから Workers & Pages を選択します。
3. 右上の Create application を押します。

Worker や Page の作成方法は複数ありますが、本ラボでは repository から自動で build と deploy を行うため GitHub を使用します。

1. Create a Worker 画面で Import a repository を探します。
2. Connect GitHub を選択します。
3. GitHub の認証ページに遷移するまで待ちます。

Cloudflare が repository を読み取り deployment を作成できるよう、GitHub 上で Cloudflare Workers and Pages の導入と認可が必要です。

1. ログイン中の GitHub アカウントが正しいことを確認します。
2. All repositories を選ぶか、deploy する repository だけを選択します。
3. Install & Authorize を押します。

アカウントによっては、GitHub が Cloudflare との接続を完了する前に追加の確認を求めます。

1. 画面に表示されているアカウントを確認します。
2. 求められた場合は Verify via email を押します。
3. 確認メールを開き、認証を完了します。

確認後、認可画面に戻って GitHub 上の Cloudflare Workers and Pages の導入を完了します。

1. Cloudflare が要求する権限を確認します。
2. 選択した repository がラボ用のものであることを確認します。
3. Install & Authorize を押して完了します。

GitHub の接続後、アカウントがアクセスできる repository の一覧が表示されます。

1. website の source code がある repository を探します。
2. KaizenDev またはラボ用 project の repository を選択します。
3. Next を押して build 設定に進みます。

project を build するコマンドと、production へ deploy するコマンドを決める手順です。

1. production branch を選択します。通常は main です。
2. website に合わせて Project name を入力します。
3. Build command を入力します（例: npm run build）。
4. project に応じた Deploy command を入力します（例: npx wrangler deploy）。
5. Deploy を押します。

build log がリアルタイムで表示されます。dependency、コマンド、環境変数、出力設定の誤りはここで確認します。

1. project の Deployments タブを開きます。
2. Queued、Building、Deploying の状態を確認します。
3. deployment が失敗した場合は build log を読みます。
4. build が成功したら deployment URL を控えます。

deploy 後、Cloudflare は project に既定のドメインを作成します。独自ドメインを設定する前の動作確認に使えます。

1. project の Settings または Domains を開きます。
2. Workers domain（既定のドメイン）が有効か確認します。
3. ブラウザーで既定のドメインを開きます。

custom domain を使うと、既定のドメインではなく組織の実際のドメインで website を公開できます。

1. Custom Domains and Routes で Add Custom Domain を押します。
2. 使用する domain または subdomain を入力します。
3. Cloudflare の DNS / route の案内に従います。
4. domain の状態が Active になるまで待ちます。

最後に production の website を開き、deploy 後の実際の表示を確認します。

1. production URL または custom domain を開きます。
2. トップページに想定どおりの KaizenDev の内容が表示されるか確認します。
3. 画像、ナビゲーション、主要なボタンを確認します。
4. 表示に問題がある場合は deployment log または source code に戻って修正します。