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

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

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

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

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は「バケットポリシーエディター」の横に書いてあります。

後は、公開したいファイルをアップロードすればサイトが見れます。
私がアップロードしたファイルと実際のサイトのURLを載せておきます。

See the Pen s3-static-web-site0502 by danishi (@danishi) on CodePen.



https://s3-static-web-site0502.s3-website-ap-northeast-1.amazonaws.com/

ウニョウニョ動いてるやつは、「particles.js」を使ってみました。

これで静的サイトが公開できました!

GitHub Pagesで公開するときよりも手軽に使えて便利ですね!

気になるのは運用コストですが、S3は以下3点に関して費用がかかります。

  • ストレージ使用量
  • データ転送量(アップロードは無料)
  • リクエスト数(GETは安く、POSTは高い)
軽くてあんまり見られないサイトなら安くなるのかな。
サーバサイドの処理が必要ないならEC2で公開するより俄然割安だとは思います。

でわ。