読者です 読者をやめる 読者になる 読者になる

うさがにっき

読書感想文とプログラムのこと書いてきます

S3を使った静的サイトの構築

概要

Amazon S3(Simple Storage service)のWebホスティング機能を使って静的サイトを構築する

S3の操作については以前に触れたことがあるのでこちらも参照
負荷の大きなものをS3で提供する「Web Storage」 - うさがにっき

詳細

S3のBucketを作成する、Bucketが静的サイトのホストとなる
f:id:tiro105:20150618144241p:plain
f:id:tiro105:20150618144305p:plain
f:id:tiro105:20150618144329p:plain

バケット名でエラー、バケット名は全ユーザで異なる必要があるらしい
f:id:tiro105:20150618144354p:plain
修正し再作成したら作成できた

作成した「practicestaticsite-aws」バケットのプロパティから(名前の横の虫眼鏡から表示できる)静的ウェブサイトホスティングを選択
f:id:tiro105:20150618144657p:plain

ウェブサイトのホスティングを有効にするを選択しインデックスドキュメントに「index.html」、エラードキュメントに「error.html」を設定する
f:id:tiro105:20150618144823p:plain

次にバケットポリシーを変更して、ファイルへのアクセス権を修正する
f:id:tiro105:20150618145028p:plain

バケットポリシーはXMLで記述するが、自分で書くのはしんどいので、バケットポリシージェネレータを使う
下部の AWS Policy Generatorを選択
f:id:tiro105:20150618145237p:plain

こんな感じで設定
arnには「arn:aws:s3:::バケット名/ファイル名」を設定するので今回は「arn:aws:s3:::practicestaticsite-aws/*」となる
f:id:tiro105:20150618145422p:plain

Addしたら作ったものが下部に追加されるのでGenerate PolicyでXMLを表示する
f:id:tiro105:20150618145452p:plain

これをコピー
f:id:tiro105:20150618145831p:plain

パケットポリシーに先ほどコピーしたものを貼り付け保存
f:id:tiro105:20150618145940p:plain

今度はバケットの名前をクリックし、バケットの中身を表示する
index.htmlとerror.htmlをuploadする
f:id:tiro105:20150618150141p:plain
f:id:tiro105:20150618145808p:plain

これでアクセスできるようになる
プロパティの静的ウェブサイトホスティングの中のエンドポイントからURLが確認できるのでそこにアクセス
f:id:tiro105:20150618150311p:plain
index
f:id:tiro105:20150618150346p:plain
error
f:id:tiro105:20150618150413p:plain

S3のWebホスティングにはリダイレクトの設定もできる
ウェブページリダイレクトの設定 - Amazon Simple Storage Service
Amazon S3 ウェブサイト設定のルーティングルールのプロパティ - AWS CloudFormation
今回は静的ウェブサイトホスティングの中のリダイレクトルールを編集するからRoutingrulesをxmlで編集する

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>foo/</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyPrefixWith>bar/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>404.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

これでfoo/はbar/に置き換えられ、404ページは404.htmlに遷移する

参考

Amazon Web Services パターン別構築・運用ガイド

Amazon Web Services パターン別構築・運用ガイド