1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CloudFront + S3の静的ホスティングでメンテナンス画面の表示

Posted at

サーバーが1台で冗長化構成をしていない場合に再起動などが必要なメンテナンスもあるかと思います。
例えば、EC2のインスタンスサイズを上げるとか、またはカーネルのアップデートなど。
そういう時に別のインスタンスを立ち上げるのもいいですが、今回はS3で静的ホスティングでメンテナンス画面を表示する方法を書いていきます。

大前提として、S3もCloudFrontも利用していることとします。

メンテナンスページの準備

  1. S3に新しいバケットを作成します。(アクセスはパブリックにしておく。)

  2. メンテナンスページのhtmlを作成してS3にアップロードします。
    s3_maintenance.jpg

  3. S3のプロパティタブから「静的ウェブサイトホスティング」を有効にします。s3_static_hosting.jpg

  4. エンドポイントにアクセスして表示されることを確認します。

CloudFrontの設定

  1. 利用しているディストリビューションを選択し、メンテナンス用のオリジンを作成します。
    1. その際にオリジンドメインを先ほど作成したS3を選択します。
    2. 「S3 バケットアクセス」はOAIを使用にチェックを入れ、新しいOAIを作成します。

cloudfront_create_origin.jpg

  1. 新しくビヘイビアを作成します。オリジンは先ほど作成したオリジンを指定します。

cloudfront-create-behaver.jpg

S3のバケットポリシーにCloudFrontのオリジンを許可

  1. S3の「アクセス許可」からバケットポリシーに以下のポリシーを追加する。
    1. オリジンのIDとバケット名は適宜変えてください。
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity {オリジンのID}"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{バケット名}/*"
        }
    ]
}

CloudFrontのオリジンID
cloudfront-origin-id.jpg

表示の確認

  1. https://example.com/maintenance.html のパスで表示されたらOKです!

特定のIPのみメンテナンスを表示しない場合

  1. CloudFrontの関数で新しく関数を以下のように追加します。
function handler(event) {
    var request = event.request;
    var clientIP = event.viewer.ip;
    // アクセス許可するIPを設定
    var IP_WHITE_LIST = [
     '{対象の特定IP}',
    ];
    // クライアントIPが、アクセス許可するIPに含まれていればtrueを返す
    var isPermittedIp = IP_WHITE_LIST.includes(clientIP);

    if (!isPermittedIp) {
        var response = {
            statusCode: 302,
            statusDescription: 'Found',
            headers:
                { "location": { "value": "https://example.com/maintenance.html" } }
            }

        return response;
    } else {
        return request;
    }
}
  1. テストタブからリクエストを送信し、OKだったら発行タブから関数を発行します。
  2. もし、関数を変えたい場合は、構築タブで関数を変更し、そのあと必ず毎回「関数を発行」をクリックしてください。でなければ反映されません。
  3. あとは「関連付けられているディストリビューション」で関連付を追加し、対象のディストリビューションを選択すれば完了です。

最後に

いかがだったでしょうか?
AWSに慣れていないと少し難しく感じるかもしれませんが、一度試してみてください。
万が一急ぎや分からなければ、仕事の依頼という形になりますがお問い合わせ頂ければと思います。

投稿者について

山梨でやまなみテクノロジーズ株式会社の代表をしている小畑です。
WordPress周りの改修やweb制作、SEO対策やデータ分析にお困りでしたらお問い合わせください。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?