【Amazon S3】で静的Webサイトホスティング

 1. Amazon S3でバケットを作成

まずは、バケットを作成していきます。

AWS Management Console にログインします。

(1) AWS Management Console

【Amazon S3】のManagement Console へ遷移します。

(2) 【Amazon S3】バケット 

【Amazon S3】のManagement Consoleで

【バケットを作成】画面へ遷移します。

(3) バケットを作成

まずバケットを作成します。

AWSコンソールからS3のコンソールに移動し、「バケットを作成」ボタンから作成します。

【バケットを作成】

〔一般的な設定〕

① バケット名

　ドメインが決まっていれば、ドメイン名を入力します。

　例：「aaws.cf」

② AWS リージョン

　希望するリージョンを選択します。

　例：［米国西部(オレゴン) us-west-2］

〔このバケットのブロックパブリックアクセス設定〕

③ 「パブリックアクセスをすべて ブロック」のチェックを外して、全てのチェックを外します。

↓ 上記のチェクを外すと、警告が表示されます。

〔パブリックアクセスのブロックをすべてオフにすると、
このバケットとバケット内のオブジェクトが公開される可能性があります。〕

④ 「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」のチェックを入れます。

〔バケットのバージョニング〕

⑤ バケットのバージョニング：［無効にする］にチェックを入れます。

〔タグ(0) - オプション〕

・未入力でOK

〔デフォルトの暗号化〕

⑥ サーバー側の暗号化：［無効にする］にチェックします。

　※ デフォルト値です。

⑦ ［バケット］ボタンを押下します。

　→ 下記の警告が表示されるのでチェックを入れます。

「パブリックアクセスのブロックをすべてオフにすると、このバケットとバケット内のオブジェクトが公開される可能性があります。」

(4) バケットの作成完了

バケットが作成され、一覧に名前が表示されれば完了です。

2. ファイルアップロード

事前に準備が必要です。

静的Webサイトのファイルが必要。

html,css,JavaScriptなどのファイルを用意してください。

(1) Amazon S3 バケット一覧

バケット一覧

バケットの名前 「aaws.cf」を押下して、オブジェクトへ遷移します。

(2) Amazon S3 オブジェクト

〔オブジェクト〕タブの画面で、アップロードの画面へ遷移します。

① ［アップロード］ボタンを押下します。

(3) アップロード画面 ファイル追加

アップロードの画面で、【ファイルとフォルダ】画面へ遷移します。

〔ファイルとフォルダ〕

［ファイルを追加］ボタンを押下します。

ファイルを選択する画面で出てくるので、アップロード予定のファイルを選択します。

(4) アップロード画面 確認

選択したファイルを確認して、［アップロード］ボタンを押下します。

(5) アップロード完了

アップロードされたファイルを確認して、［閉じる］ボタンを押下します。

3. 静的ウェブサイトホスティングの設定

Webホスティング向けの設定

作成したバケットに移動し、index.htmlをアップロードしておきます。

適宜静的Webサイトとして表示させたいファイルをアップロードします。

【Amazon S3】の一覧からバケット名「aaws.cf」を押下します。

(1) 【プロパティ】画面へ遷移

① 〔プロパティ〕のタブを押下して、プロパティの画面へ遷移します。

(2) プロパティ画面

画面一番下までスクロールして

〔静的ウェブサイトホスティング〕の［編集］ボタンを押下します。

(3) 【静的ウェブサイトホスティングを編集】画面

〔静的ウェブサイトホスティング〕セクション

① 静的ウェブサイトホスティング

「有効にする」を選択

② ホスティングタイプ

「静的ウェブサイトをホストする」を選択

③ インデックスドキュメント

例：「index.html」を入力

④ ［変更の保存］ボタンを押下します

↓ 下記が表示されれば、完了です。

〔静的ウェブサイトホスティングが正常に編集されました。〕

〔静的ウェブサイトホスティング〕セクション

下にURLが表示されますので、アクセスして確認します。

※ この段階では、アクセス許可の設定をしていないので403エラーになります。

4. アクセス許可

アクセス許可の設定を行います。

バケットポリシーの設定から以下のポリシーを入力します。

(1) 【アクセス許可】画面へ遷移

① 〔アクセス許可〕のタブを押下します。

(2) 【アクセス許可】画面

① 〔バケットポリシー〕の［編集］ボタンを押下します。

(3) 【バケットポリシーを編集】画面

【バケットポリシーを編集】

〔バケットポリシー〕

① ポリシー入力

{{バケットARN}} には、作成したバケットの名前を入力してください。

バケットポリシー

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

② ［変更の保存］ボタンを押下します。

↓

正しく設定ができていれば、「アクセス許可の概要」に「公開」と表示されます。

(4) 【プロパティ】画面

① 【プロパティ】タブを押下します。

② 〔静的ウェブサイトホスティング〕セクションにある

　　｛パケットウェブサイトポイント｝のURLをコピーします。

■(5) 【パケットウェブサイトポイント】にアクセス

｛パケットウェブサイトポイント｝にアクセスします。

アップロードしたページが正常に表示されれば完了です。

補足情報

Amazon S3 のドメインで、HTTPSアクセスする方法

・下記のフォーマットで HTTPS でアクセス可能なようです。

https://s3-｛リージョン名｝.amazonaws.com/｛バケット名｝/｛フォルダ名｝/｛ファイル名｝

・HTTP (オレゴンのリージョンの場合)

http://aaws.cf.s3-website-us-west-2.amazonaws.com/index.html

 ↓

・HTTPS (オレゴンのリージョンの場合)

https://s3-us-west-2.amazonaws.com/aaws.cf/index.html

以上です。