先日「Cloudflare Workersに静的サイトを設置する手順」という記事を投稿しました。この記事ではWrangler CLIを使ってデプロイする方法を紹介しましたが、今回はGitHubと連携して自動デプロイできるようにする方法をご紹介いたします。
事前準備
サイトの準備
Cloudflare Workersに設置したいサイトを準備します。今回も超絶シンプルに以下のHTMLファイルのみ用意しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloudflare Workers Test</title>
</head>
<body>
<p>テストです</p>
</body>
</html>CloudflareとGitHubアカウントの作成
Cloudflare Workersを利用するには、Cloudflareのアカウントが必要です。また、GitHubと連携するため、GitHubアカウントも必要になります。
アカウント作成がまだの場合は事前に作成してください。
GitHubでリポジトリの作成
GitHubでリポジトリを作成して、クローンしておきます。
クローンしたフォルダ(ローカルリポジトリ)内にファイルを設置していきます。
Cloudflare WorkersとGitHubのリポジトリを連携する手順
HTMLファイルとwrangler.jsoncを作成
ローカルリポジトリ内にHTMLファイルとwrangler.jsoncを設置します。フォルダ構成は以下のようにします。
my-test-site/
├── .git
├── wrangler.jsonc
├── public/
│ └── index.htmlwrangler.jsoncの内容は以下の通りです。wrangler.jsoncは.gitignoreに入れておいた方が良いです。
{
"name": "my-test-site",
"compatibility_date": "2026-08-18",
"assets": {
"directory": "./public"
}
}リポジトリに何もファイルがないと最初のデプロイ時にエラーが発生するので、この時点で一度コミット/プッシュをしておきます。
GitHubリポジトリとの連携
Cloudflareの管理画面で、[ビルド] -> [コンピュート] -> [Workers & Pages]にアクセスし、[アプリケーションを作成する]をクリックします。
[Connect GitHub]をクリックし、GitHubアカウントにログインします。
※この時点で下記のエラーが出る場合があります。このエラーが出る場合、GitHub側で問題が発生している可能性が高いので、時間を置いてから再度試してみてください。GitHubに障害が発生しているかは、GitHub Statusで確認できます。
No server is currently available to service your request.
Sorry about that.Please try refreshing and contact us if the problem persists.
GitHubアカウントにログインできたら、「Only select repositories」を選択して連携したいリポジトリを選択します。そして[Install & Authorize]をクリックします。
次にビルド設定を行います。今回はビルドは必要ないのでビルドコマンドは空欄で構いません。デプロイコマンドはそのまま「npx wrangler deploy」を入力した状態で[デプロイ]をクリックします。
「非本番ブランチのビルド」にチェックを入れておくと、mainブランチ以外のブランチにプッシュした場合もプレビューデプロイが走ります。本番公開する前にdevelopブランチなどで表示確認をしたい場合はチェックを入れてください。
これでCloudflare WorkersとGitHubの連携は完了です。次からはリポジトリにプッシュする度に自動でデプロイされます。
あとがき
GitHubのリポジトリと連携したら、運用がだいぶ楽になりますね。
Cloudflare Workersで静的サイトを運用しようと思っていたら、ぜひ参考にしていただければと思います。
コメントを残す