AWS S3で静的ウェブサイトをホスティングする

背景

会社でホームページ作成の案件を任されたのをきっかけに、S3,CloudFront,Route53,CircleCIを用いてウェブサイトを公開するまでの流れを知ることができたので、整理も兼ねて記事を書くことにしました。

概要

今回はタイトル通り、S3で静的ウェブサイトをホスティングするところまでを書きます。

まず、静的ウェブサイトとは、予め作成されたhtmlファイル等をサーバにアップロードしておき、ブラウザからのリクエストに対してそのままそのファイルをレスポンスするサイトのことです。

S3とは、Amazonが提供するクラウドストレージサービスのことです。
S3は動的ウェブサイトには対応していませんが、静的ウェブサイトなら独自ドメインを割り当てることで、S3のみで完結するため、低コスト、高安定なサイト運営が可能です。

手順

バケットを作成する

S3 Management Consoleからバケットを作成します。
このとき、バケット名を割り当てるドメイン名と同じにすることに注意して下さい。
これはあとでRoute53でS3バケットに独自ドメインを割り当てるためです。

リージョンは「アジアパシフィック(東京)」を選択。
「次へ」を連打し、バケット作成を完了します。

静的ウェブサイトをホストする

作成したバケットを選択し、「プロパティ」タブをクリック。
「Static website hosting」をクリックし、「このバケットを使用してウェブサイトをホストする」を選択します。

すると、

  • インデックスドキュメント
  • エラードキュメント
  • リダイレクトルール が表示されます。

インデックスドキュメントとは、ファイル名を指定せずにアクセスしたときに表示されるページです。
アップロードするファイル名を入力します。

エラードキュメントとは、ファイルが存在しないなど、エラーが発生したときに表示されるページです。
今回は上記と同じファイル名を入力します。

リダイレクトルールとは、特定のコンテンツのウェブページのリクエストを自動的にリダイレクトするように設定できるルールのことです。
空欄可なので、今回はスルーします。

「保存」し、ホスティングの設定完了です。

アクセス権を付与する

初期設定では、バケットに対するアクセス権は当事者にしかありません。
今回はウェブサイトを公開したいので、誰でもバケットにアクセスできるように設定します。

「アクセス権限」タブをクリックし、バケットポリシーを選択。
するとテキストエリアが出てくるので、以下のバケットポリシーをコピペして追加します。
examplebucketの部分は作成したバケット名に変更してください。

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/*"]
    }
  ]
}

匿名ユーザーに読み取り専用のアクセス権を与えるよという意味です。
テキストエリアの下のドキュメント→Bucket Policy Examples→Granting Read-Only Permission to an Anonymous Userに詳細が書いてあるので気になる方はどうぞ。

「保存」して、アクセス権限の設定完了です。

結果

以上で、静的ウェブサイトをS3でホスティングし、誰でも閲覧可能な状態にすることができました。
CloudFront,Route53,CircleCIについての記事はおいおい書くことにします。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.