Amazon S3で静的サイトをWeb公開する

2019年5月2日

こんにちは！
オブジェクトストレージの印象が強いAmazon S3ですが、実は静的なリソースをインターネットで公開することができます。

これを使えば、HTML/CSS/JavaScriptだけでできた静的なサイトを公開したり、JSONファイルを公開して別のプログラムから定期的にJSONファイルを更新することでWebAPIを作ることもできます。

それでは早速やってみます！

1. S3バケットの作成・公開

S3バケットの作成・公開

まずは、リソースを保存するS3バケットを作成します。

AWSのコンソールからS3を選び「バケットを作成する」を選択します。

適当なバケット名を付けて「作成」を押します。

バケットが作成されたら一覧から選択し「プロパティ」タブから「Static website hosting」を選択します。

静的なWebサイトとしてホストするように設定する画面です。

「このバケットを使用してウェブサイトをホストする」を選び、「インデックスドキュメント」を設定します。
エラーページを表示したければ「エラードキュメント」も設定しましょう。

次に、バケットに外部からアクセスできるように設定をおこないます。
「アクセス権限」タブの「パブリックアクセス設定」を選択します。

「新規のパブリックバケットポリシーをブロックする」と「バケットにパブリックポリシーがある場合、パブリックアクセスとクロスアカウントアクセスをブロックする」のチェックを外して保存します。
これで、この後追加するパブリックポリシーが有効になります。

次に「バケットポリシー」を選択し「バケットポリシーエディター」に設定のJSONを入力し、保存します。

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::s3-static-web-site0502/*"
        }
    ]
}

Resourceプロパティは自分のバケットのARN（Amazon Resource Name）を設定しましょう。
ARNは「バケットポリシーエディター」の横に書いてあります。

後は、公開したいファイルをアップロードすればサイトが見れます。