Contents
Cloudflare Workersとは？ゼロから始める前に
Cloudflare Workersは、エッジコンピューティングを活用した軽量なサーバーレス関数です。HTTPリクエストを直接処理でき、グローバルに分散されたネットワーク上で動作するため、レイテンシーの削減やカスタムロギングなど、Web開発者にとって実用的な強みがあります。公式ドキュメントと併せて学ぶことで、実装に必要な知識を網羅しやすくなります。
アカウント作成手順
Cloudflare Workersの導入にはアカウント登録が前提です。無料プランでも基本機能は利用可能ですが、実際にWorkerを動かす際は有料プランも選択肢になります。
メール登録と認証フロー
Cloudflare公式サイトにアクセスし、アカウントを作成する手順を以下にまとめます。
- Cloudflare公式サイトにアクセスし、「Sign Up」ボタンをクリックします。
- 任意のメールアドレスとパスワードを入力し、確認コードを受け取ります。
- メール内のリンクをクリックしてアカウントを有効化します。
有料プランの選択（必要時）
商用利用や高トラフィック対応が必要な場合は、有料プランへの切り替えが必須です。
- 無料プラン: 10,000リクエスト/月 (制限あり)
- Pro Plan: リクエスト数無制限・アドオン機能使用可能
- Business Plan: チーム管理・高可用性を確保
詳しくはCloudflare Pricingページを参照してください。
ローカル環境構築とWrangler CLIのインストール
Workerスクリプトを作成・デプロイするために、ローカルでの開発環境が必要です。Node.jsとWrangler CLIを導入することで、手軽に開発できます。
Node.js環境の準備
Cloudflare Workers公式推奨バージョンはv20.x以上となっています。
- Node.js公式サイトからLTS版(v20.x)をダウンロードし、インストールします。
- インストール後、
npm -vやnode -vコマンドでバージョン確認を行います。
npm経由でのwrangler導入手順
Wrangler CLIはNode.js環境で動作するため、事前にNode.jsをインストールしてください。
-
Wrangler CLIをグローバルにインストールするには以下のコマンドを実行します。
bash
npm install -g wrangler -
インストール後、
wrangler --versionでバージョンが確認できます。
Workerスクリプトの作成と構成
プロジェクト初期化から基本的なコードテンプレートまでをステップバイステップで解説します。実際の手順は公式ドキュメントに記載されている内容とほぼ一致します。
wrangler initによるプロジェクト初期化
Cloudflare Workersプロジェクトを作成するには以下のように操作してください。
-
任意のディレクトリを作成し、以下のコマンドを実行します。
bash
wrangler init my-worker -
インタラクティブな質問に応答するか、
--type hello-worldオプションでテンプレートを使用します。
基本的なエッジコンピューティングコードテンプレート
以下は、Cloudflare Workersで使用される基本構造です。
|
1 2 3 4 5 6 7 8 |
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request) { return new Response('Hello, World!', { status: 200 }); } |
このコードは、アクセス時に「Hello, World!」という文字列を返すシンプルな例です。公式ドキュメントのサンプルと完全に一致しています。
デプロイ手順と確認方法
Workerスクリプトを作成したら、Cloudflareにデプロイします。初回実行時はエラーメッセージに注意が必要です。
wrangler deployコマンドの実行
WorkerをCloudflareにデプロイするには以下のように操作してください。
-
プロジェクトディレクトリ内から以下のコマンドを実行します。
bash
wrangler deploy -
実行結果にはデプロイ先URLが表示されるため、確認用にコピーしておきます。
ダッシュボードでのステータスチェック
デプロイ後のWorkerの状態はダッシュボードで確認できます。
- Cloudflareアカウントのダッシュボードから「Workers」セクションを開きます。
- 作成したWorkerが一覧表示されるので、ステータス（Active/Inactive）を確認します。
ドメイン設定と公開準備
デプロイ後も、実際のドメイン経由でアクセスさせる必要があります。DNS設定やSSL証明書の有効化がポイントです。
CNAMEレコードの追加手順
Cloudflare WorkerのURLをドメインにマッピングするには以下を行います。
- 作成したWorkerのURL（例：
https://my-worker.example.com）を取得します。 - ドメイン担当者（またはドメインプロバイダ）にアクセスし、CNAMEレコードを設定します。
example.comのCNAME値をCloudflare WorkerのURLに変更します。
HTTPS設定とSSL証明書の有効化
セキュリティ向上のため、HTTPS接続が必要です。
- CloudflareのDNSセクションで「SSL/TLS」タブを開きます。
- 「Full (strict)」を選択すると、自動的にSSL証明書が有効になります。
- ドメインのプロキシ設定を「On」にすることで、Cloudflare経由での通信が可能になります。
パフォーマンス最適化のポイント
Workerは軽量であるため、キャッシュ戦略やEdge Functionsの活用でさらにパフォーマンスを向上させられます。
キャッシュ戦略の設計
|
1 2 3 4 5 6 7 |
以下の表では、Cloudflare Workersでのキャッシュ設定例とその目的をまとめています。 | 対象 | 設定例 | メモ | |-----------------|------------------------------------|---------------------------------------| | **HTML/CSS/JS** | `cache-Control: max-age=3600` | 高頻度アクセスリソースに適用 | | **APIレスポンス** | 30分以上のキャッシュ | 無駄な再計算を防ぐ | | **静的コンテンツ** | ファイル種別ごとに最適化 | 比較表を作成して管理 | |
キャッシュ戦略は、リソースの更新頻度とトラフィックパターンに応じて柔軟に調整が必要です。
Edge Functionsの活用例
Edge Functionsは、Cloudflare Workersの機能拡張として有効です。
- アクセス制御: IP制限や国別のルーティングを実装できます。
- カスタムヘッダ追加: ロギングやセキュリティ強化に有効です。
- リダイレクト処理: URL短縮やキャンペーンURLのマネージメントが可能です。
まとめ
Cloudflare Workersを導入するには、以下のような手順が必要です：
公式ドキュメントと併用しながら実際に環境構築を試してみましょう。
- アカウント作成と初期設定を完了する
- Wrangler CLIでローカル環境構築を行う
- Workerスクリプトを作成・デプロイする
- ドメインのCNAME設定とSSL証明書有効化を行う
- キャッシュ戦略やEdge Functionsで性能を最適化する