リバースプロキシでShifterの静的サイトをサブディレクトリでアクセスする

自身のサーバー上のリバースプロキシを通じて、Shifterの静的サイトをサブディレクトリでアクセスする方法について説明します。

目標:

訪問者が、外部サーバー(例:EC2)とドメイン名(例:example.com)を使用して、Shifterウェブサイトのサブディレクトリにあるコンテンツにアクセスできるようにする。

転送アクセス構造:

  • 外部サーバー: https://www.example.com
  • Shifter (※): https://abc123.on.getshifter.io/subdir/
    ※ サブディレクトリ設定が有効になっており、subdirは対象のサブディレクトリの名前です。

要件:

  • ShifterサイトのURL(例:abc123.on.getshifter.io
  • Shifterでサブディレクトリ設定が有効になっていること
  • リバースプロキシ用のNginx

Shifterの設定

  1. Shifterの静的サイトのURLをコピーします。ライブページで確認できます。
  2. サブディレクトリ設定が有効になっていることを確認してください。有効になっていない場合は、サポートドキュメント「サブディレクトリデプロイ」を参照してください。

Nginxの設定例 (ver. 1.17.10)

proxy_set_headerを使用して、正しいHostヘッダーを転送するようにしてください。


resolver 8.8.8.8 valid=10s ipv6=off;
server {

[...中略...]


    location ~ /subdir/ {
        proxy_read_timeout      300;
        proxy_connect_timeout   300;
        proxy_redirect          off;
        set $cloudfront_distribution YOUR-SHIFTER_URL.ON.GETSHIFTER.IO;
        proxy_pass              https://$cloudfront_distribution;
        proxy_ssl_name $cloudfront_distribution;
        proxy_ssl_server_name on;
        proxy_set_header        X-Forwarded-Proto       $scheme;
        proxy_set_header        Host                    $cloudfront_distribution;
        proxy_set_header        X-Real-IP               $remote_addr;
        proxy_set_header        X-Forwarded-Host        $http_host;
        proxy_set_header        X-Forwarded-Server      $host;
        proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
    }
}