dayjournal memo

Total 973 articles!!

Try #079 – Amazon CloudFrontの公開設定を色々とためしてみた

Yasunori Kirimoto's avatar

画像




Amazon CloudFrontの公開設定を色々とためしてみました!



事前準備

  • 事前にAmazon S3に公開したいファイル一式をアップロード
  • 設定は非公開のままでOK

画像

画像



Amazon S3と組み合わせた公開

Amazon CloudFrontとAmazon S3を組み合わせて公開する方法です。


AWSコンソール → CloudFrontをクリック。

画像


「CloudFrontディストリビューションを作成」をクリック。

画像


対象のS3のドメインを指定。S3のバケットアクセスを指定しポリシーは自動更新に設定。httpsにリダイレクトする設定。ルートオブジェクトにS3のindex.htmlを設定。その他は今回はデフォルトのまま設定。

画像


作成後、S3のバケットを確認するとポリシーが自動で設定されているのを確認。

画像


作成されたCloudFrontのS3用のディストリビューションのURLにアクセスしてみる。

画像


CloudFront経由でS3にアクセスしWebSiteが表示される。

画像



指定IPのみ公開

Amazon CloudFrontで指定IPのみ公開する方法です。


事前準備として、CloudFront経由でS3でのWebSite表示。


関数 → 「関数を作成」をクリック。

画像


関数名と説明を設定 → 「関数を作成」をクリック。

画像


CloudFront FunctionsでIP制限をする関数を設定します。

function handler(event) {
    var request = event.request;
    var clientIP = event.viewer.ip;
    // 許可したいIP指定
    var allowIP  = '許可したいIP';

    if (clientIP === allowIP) {
        return request;
    } else {
        var response = {
            statusCode: 403,
            statusDescription: 'Forbidden',
        }
        return response;
    }
}

画像


発行 → 「関数を発行」をクリック。

画像


関数作成後関連付けのメニューが表示されるので「関連付けを追加」をクリック。

画像


対象のディストリビューション・イベントタイプ・キャッシュビヘイビアを設定 → 「関連付けを追加」をクリック。

画像


関連付けされたかを確認。

画像


設定したIPからURLにアクセスするとWebSiteが表示されます。指定IP以外はWebSiteが表示されません。



Basic認証公開

Amazon CloudFrontでBasic認証で公開する方法です。


事前準備として、CloudFront経由でS3でのWebSite表示。


関数 → 「関数を作成」をクリック。

画像


関数名と説明を設定 → 「関数を作成」をクリック。

画像


CloudFront FunctionsでBasic認証をする関数を設定します。

function handler(event) {
    var request = event.request;
    var headers = request.headers;
    // ユーザーとパスワード設定
    var user = 'ユーザーを設定';
    var pass = 'パスワードを設定';
    var authValue = 'Basic ' + (user + ':' + pass).toString('base64');
    
    if (typeof headers.authorization === 'undefined' || headers.authorization.value !== authValue) {
        var response = {
            statusCode: 401,
            statusDescription: 'Unauthorized',
            headers: {'www-authenticate': {value:'Basic'}}
        };
        return response;
     } else {
        return request;
     }
}

画像


発行 → 「関数を発行」をクリック。

画像


関数作成後関連付けのメニューが表示されるので「関連付けを追加」をクリック。

画像


対象のディストリビューション・イベントタイプ・キャッシュビヘイビアを設定 → 「関連付けを追加」をクリック。

画像


関連付けされたかを確認。

画像


URLにアクセスするとユーザーとパスワードの入力画面が表示されます。

画像


設定したユーザーとパスワードを入力するとWebSiteが表示されます。



Vue.jsルーティング対応 (おまけ)

Amazon CloudFrontでVue.jsのルーティング対応する方法です。

Vue.jsで構築したアプケーションを、デプロイした時にルーティングページがうまく表示されなくてはまったときの解決方法です。


事前準備として、CloudFront経由でS3でのWebSite表示。


エラーページ → 「カスタムエラーレスポンスを作成」をクリック。

画像


エラーコード403とその他キャプチャの内容で設定 → 「カスタムエラーレスポンスを作成」をクリック。

画像


エラーコード404とその他キャプチャの内容で設定 → 「カスタムエラーレスポンスを作成」をクリック。

画像


設定を確認。

画像


これでルーティングのページも表示されます。

画像



Amazon CloudFrontを利用することで、Amazon S3と組み合わせた公開や、CloudFront Functionsと連携したIP制限やBasic認証が可能です。

次回は、AWS WAFと組み合わせた方法も紹介できたらと思います。



Amazon CloudFrontとAmazon S3について、他にも記事を書いています。よろしければぜひ。
tags - Amazon CloudFront
tags - Amazon S3



book

Q&A