三蔵開発メモ

Web開発やインフラ関連のメモを共有します

CloudflontとS3で503を返すメンテナンスページ作成

S3だけでメンテページを作成しようとしたが、S3単体だと503を返すことができないので、
CloudfrontとS3でメンテナンスページを作成したときのメモ。

s3バケットを作成

・まずマネジメントコンソールに入り、S3のバケットを作成。
・作ったバケットの横の虫眼鏡を押して、プロパティを表示。
・「静的サイトホスティング」をクリックし、「ウェブサイトのホスティングを有効にする」を選択。
・「インデックスドキュメント」はなくては作れないので、適当に「index.html」としておく。
・「アクセス許可」を選択し、「バケットポリシーの編集」を選択。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名]/*"
        }
    ]
}

上記のようにポリシーを作成する(これでアップロードしたものすべてが自動で閲覧可になる)

s3にリソースアップロード

・s3マネジメントコンソールで対象のバケット名をクリックし、右上の「アクション」ボタンを押して、「アップロード」を選択。
ドラッグアンドドロップでhtmlファイル等リソースをアップロード。
・ちゃんと表示されているかどうか先ほどのプロパティ画面の「静的サイトホスティング」のところにある「エンドポイント」にアクセス
(「バケット名.s3-website-ap-northeast-1.amazonaws.com」とかなっているやつ。そこから「/maintenance.html」みたいにリソース名でアクセスできる)

cloudflontを作成

・「create Distribution」を選択。「Web」のほうの「Get Started」を選択。
・「Origin Settings」の「Origin Domain Name」にバケット名を入れる(文字入力すればサジェストされる)
・「Restrict Bucket」をYESにする。 ・「Origin Access Identity」をCreate a New Identityにする。 ・「Grant Read Permissions on Bucket」をYes, Update Bucket Policyにする。 ・下のほうにある「Distribution Settings」内にある「Alternate Domain Names (CNAMEs)」というところに、先ほどのs3のエンドポイントを入力
・あとはデフォルトのまま「Create Distribution」を押して作成する。

Error Pages設定

・cloudflontのサイドメニュー「Distributions」を選択したら、先ほど作ったDistribution一覧にあると思うので、IDをクリック。
・タブメニューの「Error Pages」を選択し、「Create Custom Error Response」を選択。 ・「HTTP Error Code」は「403:Forbidden」、「Error Caching Minimum TTL」はデフォルト。 ・「Customize Error Response」を「Yes」にする。
・「Response Page path」という設定項目がでてくるので、s3に設置したメンテページのhtmlのパスを設定。
(直下に「maintenance.html」というファイルを置いていたら「/maintenance.html」)
・「HTTP Response Code」は「503:Service Unavailable」を選択し、「Create」を選択。

疎通確認

・15分~30分くらいで表示されるようになるので、その後cloudflontのサイドメニュー「Distributions」の一覧のところにある要素「Domain Name」にアクセスする。
(ランダム文字列.cloudfront.netみたいなやつ)
・無事メンテページが表示されて、503がレスポンスで返ってくれば準備完了。
・実際メンテナンスに入る前に、DNSの設定を疎通確認したクラウドフロントの「Domain Name」にすればOK。
※Route53のAlias設定でcloudflontディストリビューションを設定する場合は、Route53の料金がかかりません!

追記

・作りたてのS3は、307 Temporary Redirectを上記設定で疎通を行うと返してくることがたまにある。
対策を調べたのですがこれというものは見つからず、事前にs3バケットのみ用意しておくのがよさそうです。(データ置いとくだけなら1GB月4円くらいなので)