Cloudflare Workersに静的サイトをアップして、サーバーレス環境を構築する手順をご紹介いたします。
Cloudflare Workersは無料プランが充実しているので、個人開発のWebサービスや小規模なサイトであれば、無料の範囲内で利用できると思います。
料金プランの詳細は下記をご参照ください。
https://www.cloudflare.com/ja-jp/plans/developer-platform
事前準備
サイトの準備
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>Node.jsのインストール
今回ご紹介する方法は、Wrangler CLIを使ってデプロイするので、Node.jsのインストールが必要です。
コマンドプロンプトやターミナル上で以下コマンドを実行してNode.jsがインストールされているか確認してください。
node -vNode.jsがインストールされていない場合は、公式サイトからLTS版(安定版)をダウンロードしてインストールしてください。
Cloudflareアカウントの作成
Cloudflare Workersを利用するには、Cloudflareのアカウントが必要です。
アカウント作成がまだの場合は事前に作成してください。
Cloudflare Workersに静的サイトを設置する手順
さて、ここから本題です。
プロジェクトフォルダを作成しHTMLを配置
まずはプロジェクトフォルダを作成してHTMLファイルを配置します。
以下のような感じでプロジェクトフォルダを作成して、その中にpublicというフォルダを作成します。public内のファイルがデプロイされます。
my-test-site/
├── public/
│ └── index.htmlプロジェクトフォルダ名はmy-test-siteとしていますが、これは任意のフォルダ名で構いません。
wrangler.jsoncを作成
プロジェクトフォルダ直下にwrangler.jsoncというファイルを作成します。
my-test-site/
├── wrangler.jsonc
├── public/
│ └── index.htmlファイルの内容は以下の通りです。
{
"$schema": "node_modules/wrangler/config-schema.json",
"name": "my-test-site",
"compatibility_date": "2026-08-12",
"assets": {
"directory": "./public"
}
}nameは任意の名前を指定します。(発行される公開URL内に入ります)
compatibility_dateは今日の日付を入れましょう。compatibility_dateの日付は、プログラムの動作や機能の後方互換性を維持するための指定です。
Wranglerをインストール
コマンドプロンプトやターミナルでプロジェクトフォルダまでcdで移動します。
プロジェクトフォルダで以下コマンドを実行して、Wranglerをインストールします。
npm install --save-dev wranglerCloudflareにログイン
以下のコマンドを実行すると、ブラウザが開くので、Cloudflareにログインします。
npx wrangler login「Wrangler wants to access your account」という画面が出るので[Authorize]をクリックします。
「Authorization granted to Wrangler」と表示されれば承認完了です。
ローカルで動作確認
※この手順はスキップしても大丈夫です。
ローカルで動作確認したい場合は、以下コマンドを実行して表示されるURLにアクセスします。
npx wrangler devCloudflare Workersにデプロイ
以下コマンドを実行すると、Cloudflare Workersにデプロイされます。
npx wrangler deploy初回実行時は、「Would you like to register a workers.dev subdomain now?」と聞かれます。Yesを選択して、Cloudflare Workersのプロジェクトで使うサブドメインを設定しましょう。(Noを選択した場合はデプロイだけされて公開URLが発行されません)
今回の場合、発行される公開URLが以下のようになります。
https://my-test-site.【入力したサブドメイン】.workers.dev
デプロイ時に公開URLも表示されますので、公開URLにアクセスしてサイトが表示されるか確認しましょう。
ファイルを変更した場合は、再度デプロイコマンドを実行すれば上書きされます。
Cloudflare管理画面での確認
Cloudflareの管理画面で、[ビルド] -> [コンピュート] -> [Workers & Pages]を開くと、デプロイされたプロジェクトが表示されます。
デプロイしたプロジェクトの削除
もしデプロイしたプロジェクトを削除したい場合は、プロジェクトの右側にある三点マークから[設定を表示]を選択して設定画面を開きます。
下の方に「Worker の削除」という項目があるので、[削除]をクリックすると削除できます。
あとがき
実際に作業してみると、デプロイまで5分くらいで完了すると思います。
サーバーレス構成でWebサイトを公開してみたいと思っている場合は、ぜひ参考にしていただければ幸いです。
コメントを残す