基本設定

まず、/etc/nginx/sites-available/defaultファイルにあるサーバーブロックを以下のように更新してください。

server {
    listen 80;
    server_name example.com www.example.com;

    resolver 8.8.8.8;

    location / {
        set $backend <https://example.framer.website>;
        proxy_pass $backend$request_uri;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_ssl_server_name on

この設定を適用すると、受信リクエストがFramerサイトに転送され、ブラウザのアドレスバーには皆さんのドメイン（example.com）がそのまま表示されます。

特定のスラッグのみプロキシする

サイト全体ではなく特定のスラッグ（例：/blogまたは/pricing）だけをプロキシしたい場合は、特定のロケーションブロックを追加または変更する必要があります。

location /my-path {
    set $backend <https://example.framer.website>;
    proxy_pass $backend;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_ssl_server_name on

この設定により、/my-pathに対するリクエストのみがFramerサイトに転送されます。これにより、どのトラフィックをFramerに送るかをより細かく制御できます。

‘proxy_ssl_server_name on’が必要な理由

このディレクティブは、NGINXがリクエストを転送する際に正しいホスト名をSNI（サーバー名表示）方式で送信することを可能にします。この設定を行わないと、カスタムドメインにリクエストを送信する際に400 Bad Request: Invalid hostnameエラーが発生する可能性があります。

SSLでプロキシを保護する

ユーザーを保護し、トラフィックを暗号化するにはHTTPS設定が必要です。

CertbotでLet's Encryptを利用

• 無料で、NGINXと容易に連携し、SSL証明書の生成と更新を自動で処理します。

• ステップバイステップのガイドはCertbotのドキュメントを参照してください。

既存の証明書を使用する

• DigiCertやSectigoなどのプロバイダーから既に発行されている証明書がある場合、ssl_certificateとssl_certificate_keyのようなディレクティブを使用して、NGINXを証明書とキーのファイルに設定すればよいです。

自己署名証明書

• テストや内部用には問題ありませんが、ブラウザでセキュリティ警告が表示されるため、実際の運用サイトには推奨されません。

締めくくり

皆様はどのパスをリバースプロキシとして接続しておきたいですか？この設定だけでも、Framerサイトを皆様のドメインで安定的かつ安全に運用できます。最初は基本的なサーバーブロックで全体をプロキシし、後から必要なパスだけを指定して柔軟に運用することをお勧めします。

本記事はFramer公式ブログの‘Proxying with NGINX’を翻訳・脚色したコンテンツです。