S3のWebサイトホスティングでリダイレクトを設定する

2023.06.26

はじめに

この記事では、curlコマンドの--locationオプションの動作を確かめるために、S3の静的サイトホスティング機能を使ってリダイレクト設定を行います。

curlコマンド--locationオプションとは

curlコマンドに--locationオプションをつけると、ページにリダイレクト設定がされていたときに追従させることができます。

また、--max-redirsオプションに数を指定することで、追従するリダイレクトの数を設定できます。デフォルトは50です。

curl - How To Use

S3でWebサイトをホスティングする

バケット作成

まずはS3バケットを作成します。今回はリダイレクト元、リダイレクト先、更にリダイレクトする先の3つのバケットを作成します。

S3のページに移動し、「バケットの作成」をクリックします。

バケット名に任意の名前を入力します。ACLは無効のままにします。

静的ウェブサイトホスティングの機能を使うためには、ブロックパブリックアクセス設定をオフにする必要があります。

「パブリックアクセスをすべてブロック」のチェックボックスを外し、「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」のチェックボックスにチェックを入れます。

その他はデフォルト設定のままで、「バケットを作成」をクリックします。今回は3つのバケットを作成するので、残り2つも同じように作成します。

バケットポリシーの編集

3つのバケットが作成できたら、続いてバケットポリシーを編集します。

S3でウェブサイトをホスティングするためには、

  • ブロックパブリックアクセス設定のオフ
  • バケットポリシーの修正

の2つの作業が必要になります。

ウェブサイトアクセスのアクセス許可の設定 - Amazon Simple Storage Service

作成したバケットの「アクセス許可」⇒バケットポリシーの「編集」をクリックします。

バケットポリシーを以下のように記述します。Resourceのところには作成したバケットのARN内のすべてのオブジェクトを指定します。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "バケットARN/*"
            ]
        }
    ]
}

記述したら「変更の保存」をクリックして保存します。残り2つのバケットについても同様の設定を行います。

静的ウェブサイトホスティングとリダイレクトの設定

続いてウェブサイトのホスティングとリダイレクトの設定を行います。

作成した3つのバケットをそれぞれバケット1、バケット2、バケット3として、

  • バケット1⇒バケット2⇒バケット3

とリダイレクトするように設定をします。

  • バケット3(最終的なリダイレクト先)の設定
  • バケット2の設定
  • バケット1の設定

という順序で設定をしていきます。

まず、バケット3にあたるバケットの「プロパティ」⇒静的ウェブサイトホスティングの「編集」をクリックします。

静的ウェブサイトホスティングで「有効にする」を選択、インデックスドキュメントに「index.html」を入力します。

その他の設定はそのままにして「変更の保存」をクリックします。

すると、「プロパティ」⇒静的ウェブサイトホスティングのセクションにこのようにウェブサイトのエンドポイントが表示されます。

今は何のファイルもアップロードしていないので、アクセスすると404エラーになります。

※403エラーになる場合は、「ブロックパブリックアクセス設定」「バケットポリシー」が正しく設定されていない可能性があります。

ローカルでindex.htmlファイルを作成し、以下の内容で保存します。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

バケット3の「オブジェクト」⇒「アップロード」からindex.htmlファイルをアップロードします。

アップロードが終わったら、再度ウェブサイトのエンドポイントにアクセスします。

以下のように表示されたらOKです。

これでバケット3の設定は完了です。

続いてバケット2の設定を行います。バケット3と同様、「プロパティ」⇒静的ウェブサイトホスティングの「編集」をクリックします。

バケット2はバケット3へのリダイレクトを行うので、ホスティングタイプでは「オブジェクトのリクエストをリダイレクトする」を選択、ホスト名にはバケット3のエンドポイント(https://を除く)を入力、プロトコルで「http」を選択します。

「変更の保存」をクリックするとバケット3同様、ウェブサイトのエンドポイントが表示されます。

このエンドポイントをクリックして、バケット3のエンドポイントと同じ画面が表示されたらOKです。

バケット1も同様に設定します。バケット1の場合は、リダイレクト先のホスト名はバケット2のエンドポイントになります。

最終的に、バケット1のエンドポイントにアクセスして、以下の画面が表示されるようになればOKです。

※ホスティング設定でエンドポイント名を間違えるなどして何度も設定し直した場合、キャッシュの関係でうまくリダイレクトできないことがありました。その場合はシークレットウインドウでアクセスすればうまくいきました。

curlコマンドの動作確認

ではリダイレクト設定されたWebサイトが用意できたので、curlコマンドの動作を確認していきます。

--locationオプションなし

まずは--locationオプションをつけずにバケット1のエンドポイントにアクセスしてみます。

curl http://curl-redirect-test-1.s3-website-ap-northeast-1.amazonaws.com

結果は何も表示されません。

-iオプションをつけるとヘッダーを表示することができるので、つけて実行します。

curl http://curl-redirect-test-1.s3-website-ap-northeast-1.amazonaws.com -i

リダイレクトを示す301ステータスコードが返ってきているのがわかります。

HTTP/1.1 301 Moved Permanently
Date: Mon, 26 Jun 2023 08:17:02 GMT
Location: http://curl-redirect-test-2.s3-website-ap-northeast-1.amazonaws.com/
Server: AmazonS3
Content-Length: 0

--locationオプションあり

--locationオプションをつけてアクセスします。

curl http://curl-redirect-test-1.s3-website-ap-northeast-1.amazonaws.com --location

最終的なリダイレクト先である、バケット3にアップロードしたhtmlファイルの内容が表示されました。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>My Website Home Page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
  <p>Now hosted on Amazon S3!</p>
</body>
</html>

-iオプションでヘッダーを確認すると、バケット1⇒バケット2⇒バケット3と遷移したことがわかります。

HTTP/1.1 301 Moved Permanently
Date: Mon, 26 Jun 2023 08:22:15 GMT
Location: http://curl-redirect-test-2.s3-website-ap-northeast-1.amazonaws.com/
Server: AmazonS3
Content-Length: 0

HTTP/1.1 301 Moved Permanently
Date: Mon, 26 Jun 2023 08:22:15 GMT
Location: http://curl-redirect-test-3.s3-website-ap-northeast-1.amazonaws.com/
Server: AmazonS3
Content-Length: 0

HTTP/1.1 200 OK
Date: Mon, 26 Jun 2023 08:22:15 GMT
Last-Modified: Mon, 26 Jun 2023 01:42:25 GMT
Content-Type: text/html
Server: AmazonS3
Content-Length: 197

--locationオプションと--max-redirsオプションを指定

--max-redirsオプションでリダイレクトする数を指定します。今回はリダイレクト数を1に設定します。

curl http://curl-redirect-test-1.s3-website-ap-northeast-1.amazonaws.com --location -i --max-redirs 1

バケット1⇒バケット2へのリダイレクトは行われましたが、バケット3へのリダイレクトは行われていないことがわかります。

HTTP/1.1 301 Moved Permanently
Date: Mon, 26 Jun 2023 08:24:34 GMT
Location: http://curl-redirect-test-2.s3-website-ap-northeast-1.amazonaws.com/
Server: AmazonS3
Content-Length: 0

HTTP/1.1 301 Moved Permanently
Date: Mon, 26 Jun 2023 08:24:34 GMT
Location: http://curl-redirect-test-3.s3-website-ap-northeast-1.amazonaws.com/
Server: AmazonS3
Content-Length: 0

curl: (47) Maximum (1) redirects followed

おわりに

テスト用にリダイレクト設定されたWebサイトを用意しようと思うと少し面倒ですが、S3バケットの静的ウェブサイトホスティング機能を使えばいくつかの設定をするだけで簡単に用意できてとてもありがたいなと思いました。

この記事がどなたかの参考になれば幸いです。