Contents
Cloudflare Workersの導入前に必要な準備
Cloudflare Workersを活用するには、事前準備が不可欠です。本セクションでは、アカウント登録とドメイン設定に関する基本的な手順や注意点を解説します。正しい準備がなければWorkersの機能を十分に活かせないため、以下で確認しておきましょう。
Cloudflareアカウントの登録手順
Cloudflareアカウントの作成は、公式サイトから3ステップで完了できます。
- 公式サイト（https://www.cloudflare.com/）にアクセスし、「無料で始める」ボタンをクリック
- メールアドレスとパスワードを入力して会員登録
- 管理画面からドメイン追加の手順に従う
注意点:
- 既存のDNSプロバイダでも利用可能です。無料プランでは1つのドメインまで無料で使用できますが、複数ドメインを扱う場合は有料プラン検討が必要です。
- アカウント作成時に「Enterprise機能」の有無を確認しておくとよいでしょう。
ドメイン設定の確認
Cloudflareでのドメイン管理は、DNSレコードの変更が必須です。以下がチェックポイントです：
| 項目 | 必要な内容 | 補足 |
|---|---|---|
| ドメイン名 | 既存のWebサイトドメイン | 子ドメインも利用可能 |
| DNSレコード | Aレコード・CNAMEレコードをCloudflareに変更 | DNSプロバイダの設定に応じて最大72時間かかる場合があるため、変更後は3日間待機推奨 |
| SSL設定 | 自動で有効化される | 初期設定では「Flexible」モードがデフォルト。本番環境では「Full」モードに変更することを検討 |
ポイント:
- DNSレコードの変更は、ドメインプロバイダの管理画面からCloudflare側のDNSサーバー（
ns1.cloudflare.com,ns2.cloudflare.comなど）に切り替える必要があります。 - ドメインが正しく反映されるまでには時間がかかるため、運用前には変更を確認してください。
Workers Dashboardの基本操作
Workers Dashboardはスクリプトの作成・管理を一元的に行うコントロールパネルです。UIの理解と初期設定手順を押さえることで、効率的な運用が可能になります。
ダッシュボード画面の構成解説
Dashboardにアクセスすると以下の要素が表示されます：
- 左サイドバー: Workerの作成・管理、スクリプト一覧などのメニュー
- 中央エリア: 現在選択中のWorkerのコード編集領域
- 右サイドバー: デプロイ履歴やログ確認用のタブ
特徴:
- グラフィカルなUIで、JavaScriptコードの入力だけでなく、イベントハンドリング設定も直感的に行えます。
- Cloudflare公式ツール「Wrangler CLI」との連携が可能で、ローカル環境でのテストやデプロイに最適です。
新規Workerの作成手順
新規Workerを作成するには以下の手順を実行します：
- Dashboard左上にある「Create a Worker」ボタンをクリック
- ワーカー名とスクリプトのテンプレートを選択（初期値は
Handle the request） - 「Create」ボタンを押下して作成確認
- 作成後、コード編集画面に遷移します
注意事項:
- Workerの命名には英数字とアンダースコアのみ使用可能。特殊文字やスペースは不可です。
- 新規作成時にテンプレートを選択できるため、初心者向けに最適な初期設定が可能です。
Cloudflare Workers用JavaScript基礎
Cloudflare WorkersではJavaScriptを使用してリクエスト・レスポンスを処理します。基本的な構文とイベントハンドリングの理解が重要です。
イベントハンドリングの基本構文
WorkerはaddEventListenerを使ってイベントを処理します。以下が基本構造です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
addEventListener('fetch', event => { try { event.respondWith(handleRequest(event.request)) } catch (error) { console.error('Error:', error) return new Response('Internal Server Error', { status: 500 }) } }) async function handleRequest(request) { try { return new Response('Hello, Cloudflare!', { status: 200 }) } catch (error) { console.error('Response error:', error) return new Response('Internal Server Error', { status: 500 }) } } |
ポイント:
fetchイベントはすべてのHTTPリクエストを捕捉します。- 非同期処理（
async/await）が推奨されます。
リクエスト/レスポンス処理
リクエストとレスポンスの取得・変更には以下のように記述します：
|
1 2 3 4 5 6 7 8 9 10 11 |
try { const response = await fetch(request) return new Response(response.body, { status: response.status, headers: { 'Content-Type': 'text/plain' } }) } catch (error) { console.error('Fetch error:', error) return new Response('Internal Server Error', { status: 500 }) } |
注意事項:
- リクエストのURLやヘッダーは
request.url,request.headersから取得可能です。 new Response()メソッドを使用することで、レスポンスをカスタマイズできます。
シンプルなWorkerの作成とデプロイ
Cloudflare Workersは最小限のコードで動作させることが可能です。以下に手順を示します。
サンプルコードの構築
以下のコードは「Hello World」表示用のWorkerです：
|
1 2 3 4 5 6 7 8 |
addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }) async function handleRequest(request) { return new Response('Cloudflare Workers! 🚀', { status: 200 }) } |
活用シーン:
- 初心者向けのサンプルとして、本番環境での動作確認に最適です。
ローカルテスト方法
ローカルでの動作確認にはwranglerコマンドを使用します：
|
1 2 |
wrangler dev |
注意事項:
wrangler.tomlファイルを作成し、プロジェクト設定を完了する必要があります。- 一部の機能（例: KVストレージ）は本番環境限定です。
本番環境へのデプロイ
以下のコマンドでデプロイが可能です：
|
1 2 |
wrangler deploy |
エラー対処ポイント:
- デプロイ失敗時の原因は、ログ画面（Dashboard右サイドバー）に表示されます。
- コードの構文エラーや設定ミスを修正して再度デプロイします。
HTTPリバースプロキシの実装例
Cloudflare Workersは、HTTPリバースプロキシとしても活用できます。以下に基本的なコード例とヘッダー処理方法を示します。
基本的なプロキシ処理のコード
以下は、指定されたURLにリクエストを転送する例です：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
addEventListener('fetch', event => { event.respondWith(proxy(event.request)) }) async function proxy(request) { try { const url = new URL(request.url) const targetUrl = 'https://example.com' + url.pathname const response = await fetch(targetUrl, request) return new Response(response.body, { status: response.status, headers: { 'Content-Type': 'text/html' } }) } catch (error) { console.error('Proxy error:', error) return new Response('Internal Server Error', { status: 500 }) } } |
ポイント:
fetch()でリクエストを指定URLに転送します。- 実際の使用では、ドメインやパスの変換が必要です。
ヘッダー処理の具体例
ヘッダー情報を加工するには以下のように記述します：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
try { const headers = new Headers() headers.set('X-Custom-Header', 'Cloudflare Proxy') return new Response(response.body, { status: response.status, headers: headers }) } catch (error) { console.error('Header error:', error) return new Response('Internal Server Error', { status: 500 }) } |
活用シーン:
- 認証トークンの追加や、特定のヘッダー情報の削除などに利用可能です。
導入後の確認とトラブルシューティング
デプロイ後も、適切な動作が保証されるように確認やエラー対処が必要です。以下に具体的な手順を紹介します。
ログ確認方法
Cloudflare Dashboardの右サイドバーに「Logs」タブがあります。この画面では：
- エラー発生時の詳細情報が表示されます
- リクエスト・レスポンスの履歴を確認できます
活用法:
ログを定期的にチェックすることで、異常動作の早見が可能になります。
よくあるエラー対処法
以下はよく発生するエラーと解決策です：
| エラーメッセージ | 原因 | 対処法 |
|---|---|---|
500 Internal Server Error |
スクリプトの構文エラー | コードを再確認し、修正してデプロイ |
403 Forbidden |
ドメイン設定が不正 | DNSレコードをCloudflareに変更 |
Worker not found |
ワーカー名が間違っている | デプロイ時に指定したワーカー名を確認 |
まとめ:
トラブルシューティングは、ログの確認とエラーメッセージから原因を特定することが重要です。Cloudflare公式ツール「Wrangler CLI」やDashboardのログ機能を活用し、迅速な対応が可能です。