かべぎわブログ

技術的なことについてかけたらいいな…

S3と独自ドメインでウェブサーバを構築する

S3にはストレージとして利用する以外にもうひとつの使い方があります。
それは静的コンテンツを公開するWebサーバとしての使い方です。

S3には静的ウェブホスティング機能というものがあり、この機能を有効にするとS3に保存したファイルをWebサイトとして公開することができます。

手順

独自ドメイン名でS3バケットを作成する

独自ドメイン名でS3バケットを作成します。
たとえば当ブログのドメイン名でもある「www.kabegiwablog.com」で運用するのであれば「www.kabegiwablog.com」というバケットを作成します。
f:id:kabegiwakun:20171119112612p:plain

静的ウェブホスティングを有効にする

作成したバケットのプロパティを開き「Static website hosting」を選択します。
設定項目が開くので「このバケットを使用してウェブサイトをホストする」を選択し、「保存」します。
「インデックスドキュメント」と「エラードキュメント」はそれぞれ「index.html」と「error.html」で構いません。
f:id:kabegiwakun:20171119113158p:plain

バケットポリシーを設定する

現時点ではアクセス許可をだれにもしていない状態ですのでバケットポリシーでオブジェクトへのアクセス許可を与えます。

バケットの「アクセス権限」から「バケットポリシー」を選択してバケットポリシーエディターに以下のように入力します。
f:id:kabegiwakun:20171119114628p:plain

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*"
        }
    ]
}

"Resource": "arn:aws:s3:::www.example.com/*"の箇所は自分のバケットのARNに読み替えてください。

実際に設定されたかどうか確認してみます。
S3に任意の内容の「index.html」ファイルをアップロードし、S3のエンドポイントのURLを指定してブラウザでアクセスしてみると、以下のようにファイルの中身が見れるはずです。
f:id:kabegiwakun:20171119115557p:plain

S3のエンドポイントのURLは静的ウェブホスティングを有効にした際と同じく、バケットのプロパティを開き「Static website hosting」を選択したところに記載があります。
f:id:kabegiwakun:20171119115800p:plain

Route53で独自ドメインを設定する

S3へのアクセスはできるようになりました。
つづいて独自ドメインでアクセスできるように設定します。

具体的にはAレコードのAlias機能を利用します。

Route53で「Create Record Set」を選択して、それぞれ以下のように設定します。

  • Name - www.
  • Type - A - IPv4 address
  • Alias Target - バケットの一覧が出てくるので今回作成したバケットを選択

f:id:kabegiwakun:20171119121310p:plain
 

以上で設定は完了です。
さて、独自ドメインでアクセスしてみると、S3上のオブジェクトにアクセスできるようになっているはずです。
f:id:kabegiwakun:20171119121559p:plain

サーバーレスシングルページアプリケーション ―S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス

サーバーレスシングルページアプリケーション ―S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス