画像






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