この文書は、Framerを学ぶ日本国内のユーザーが、日本語資料の不足によって直面する困難を解決するために、公式ブログの内容を翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆さんに少しでも役立つことを願っています。

Cloudflareでプロキシ設定をする

FramerサイトをCloudflareと一緒に使用すると、リバースプロキシを構成できます。これはトラフィック管理、カスタムルーティング、インフラポリシー遵守など高度な活用ケースに適しています。

リバースプロキシとは、サイトと訪問者の間にCloudflareのようなサービスを配置する方式です。これにより次のことが可能です。

• 内部インフラとの統合（例: ファイアウォール、ルーティングルール適用）

• 高度なロギングおよび規制要件の遵守

• CDN、キャッシング、地域別トラフィック管理の制御

しかし、Framerは自体で多くの機能を提供するため、特定のインフラまたはポリシーのニーズがある場合にのみリバースプロキシの使用を推奨します。
Note: リバースプロキシはScaleおよびEnterpriseプランでのみサポートされています。

Framerサイトを設定する

1. Framerプロジェクトを開き、Site Settings → Domainsに移動してください。

2. 無料のFramerサブドメインを追加した後（例: example.framer.website)

3. Domainsセクションの下部に移動し、Canonical URLを設定してください。
   例: “Advanced”入力欄にカスタムドメインexample.comを入力してサイトを公開します。

Cloudflareでドメインを設定する

1. Cloudflareにログインした後、カスタムドメイン（例: example.com）を追加します。

2. DNS設定に移動し、ルート（@）またはサブドメイン（app.example.com）をダミーAレコード（例: 192.0.2.1）に指定します。

Note: Cloudflare DNS管理画面でAレコードが192.0.2.1を指し、プロキシ状態がアクティブ（オレンジの雲アイコン）に設定されていることを確認します。

Cloudflare Workerを作成する

1. CloudflareダッシュボードでWorkers & Pagesに移動し、新しいWorkerを作成します。

2. トラフィック全てを処理するためにルートを指定します。例: example.com/*

3. Workerコードを入力: 下記の例からmy-company.framer.website部分を実際のFramerドメインに置き換えてください。

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  return fetch('<https://my-company.framer.website>' + url.pathname + url.search, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
}

設定を確認する

• Workerが正しいドメインルートに接続されていることを確認します。

• 変更が適用されるまで数分かかることがあります。

• ブラウザの開発者ツールまたはHTTPヘッダー検査ツールを使用して、トラフィックがCloudflareを通じてルーティングされているか確認してください。

• 問題がある場合や助けが必要であれば、Framerサポートチームにお問い合わせください。

本記事はFramer公式ブログの『How to proxy with Cloudflare』を翻訳・脚色したコンテンツです。