un tronc
ホームページ制作

Cloudflare WorkersでHTMLを公開した手順｜サーバー契約もFTPもなし、デプロイは約5.4秒

この記事は約4分で読めます

公開日
読む時間
約4分

こんにちは！アントロンのNaokoです。

ちょっとしたページを公開したいけれど、サーバーの契約やFTPでの転送が面倒だと感じていませんか？

2026年8月27日に、Cloudflare Workersでアカウントの開設からHTMLの公開までやってみました。Cloudflareが発行する workers.dev のURLで公開するなら、サーバーの契約、DNSの設定、FTPでの転送、SSL/TLS証明書の用意はどれも要りませんでした。デプロイ（公開の操作）にかかった時間は約5.4秒です。

この記事では、実際に打ったコマンドと設定、かかった時間をそのまま書きます。作業はすべてClaude Codeのターミナルから行いました。

使ったもの

  • Cloudflareのアカウント（Googleアカウントでログインして作成）
  • Node.js（私のパソコンはバージョン20）
  • Wrangler（Cloudflare公式のコマンドラインツール）

Wranglerの入れ方は、Cloudflare公式のInstall/Update Wranglerに載っています。公式が勧めているのは、プロジェクトごとに入れる次のコマンドです。

npm i -D wrangler@latest

2026年8月の時点で、最新版のWranglerはNode.js 22が必要でした。私のパソコンはNode.js 20だったので、Node.js 20で動く最後の版の4.86.0を入れています。入れる前に node -v でバージョンを確かめておくと、入れ直さずに済みます。

ログインする

npx wrangler login

実行するとブラウザに認可の画面が開き、許可するとターミナルからCloudflareを操作できるようになります。自分のパソコンから操作するだけなら、APIトークンを発行して設定する必要はありませんでした。

設定ファイルは3項目

プロジェクトの直下に wrangler.jsonc を作ります。最初に公開したときの設定は次の3項目です。

{
  "name": "hello-world",
  "compatibility_date": "2026-08-27",
  "assets": { "directory": "./public" }
}
  • name：Worker名。公開URLの先頭になる
  • compatibility_date：どの時点の仕様で動かすかの日付
  • assets：配信するファイルを置くフォルダ

./public に index.html という名前でHTMLを置き、そのフォルダを指定しただけです。CloudflareのStatic Assetsという機能で配信されるので、Workerのスクリプトは1行も書いていません。

デプロイは約5.4秒

npx wrangler deploy

実行したときにかかった時間は次のとおりです。

  • アセット（HTMLなどのファイル）のアップロード：0.66秒
  • Workerのアップロード：3.64秒
  • トリガーのデプロイ：1.14秒
  • 合計：約5.4秒

公開されたURLをcurlで開くと、0.40秒でHTTP 200（正常に表示できたときの応答）が返りました。

URLは https://<Worker名>.<サブドメイン>.workers.dev の形です。サブドメインはアカウントに1つで、同じアカウントの中ではWorker名の部分だけが変わります（Cloudflare公式：workers.dev）。

workers.devのURLで公開した最初のページをブラウザで開いた画面

2026年8月27日に最初にデプロイしたページです。URLのサブドメインの部分はぼかしています。

公開した時点でHTTPSになっていて、証明書の申請も更新の作業もしていません。独自ドメインで公開する場合は別に設定が要りますが、私は今回その手順は飛ばしました。

更新も同じコマンド

次に、HTMLを作品3点を並べたギャラリーのページに差し替えて、もう一度 npx wrangler deploy を実行しました。

1つ気をつけたいのは、デプロイした直後の1回目の表示です。私が更新したときは、直後の1回目に前の版が返ってきました。1回目だけで「反映されない」と判断して上書きを繰り返さず、時間を置いて開き直して確かめています。

同じ方法でAIチャットボットも公開

同じ手順で、サイトに置くAIチャットボットもWorkersで公開しています。こちらは静的なファイルではなく、スクリプトを動かす形です。回答にはCloudflareのWorkers AIを使っています。

動作見本のページでAIチャットボットを開いた画面

チャットボットで「といあわせ」を押すと、お問い合わせフォームのURLが返ってきた画面です。

サイト側には、</body> の直前に次の1行を足しただけです。

<script src="https://untronc-chat.untronc-nao.workers.dev/widget.js"></script>

Workersの無料プランでは、リクエストは1日100,000件までです（Cloudflare公式：Pricing）。

まず1枚公開してみる

試してみたい方は、手元にあるHTMLを1枚 index.html という名前で public フォルダに入れ、上の3項目の設定ファイルで npx wrangler deploy を実行してみてください。その前に、node -v でNode.jsのバージョンを確かめておくのがおすすめです。

※内容は2026年8月に試したときのものです。公式ドキュメントの記載は2026年9月に確認しました。

最後まで読んでくださりありがとうございました！

コメント

あわせて読みたい

ブログ一覧へ