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

Amazon CloudFrontの公開設定を色々とためしてみた © MIERUNE © MapTiler © OpenStreetMap contributors
Yasunori Kirimoto 2022.01.27 MIERUNE 社内勉強会 #026

Location-based Architect Yasunori Kirimoto Owner of Co-founder and CTO of
Member of

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

Contents 1. Amazon S3と組み合わせた公開 2. 指定IPのみ公開 3. Basic認証公開 4. Vue.jsルーティング対応
(おまけ) 5. まとめ

Amazon S3と組み合わせた公開

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

AWSコンソール → CloudFrontをクリック「CloudFrontディストリビューションを作成」をクリック

対象のS3のドメインを指定 S3のバケットアクセスを指定しポリシーは自動更新に設定

httpsにリダイレクトする設定ルートオブジェクトにS3のindex.htmlを設定その他は今回はデフォルトのまま設定

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

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

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

指定IPのみ公開

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

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

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

対象のディストリビューション・イベントタイプ・キャッシュビヘイビアを設定 → 「関連付けを追加」をクリック関連付けされたかを確認設定したIPからURLにアクセスすると WebSiteが表示されます指定IP以外はWebSiteが表示されません

Basic認証公開

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

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

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

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

URLにアクセスするとユーザーとパスワードの入力画面が表示されます設定したユーザーとパスワードを入力すると WebSiteが表示されます

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

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

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

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

まとめ

• Amazon CloudFrontのコンソールすごく使いやすくなってた • Amazon CloudFrontとAmazon S3で公開設定可能 • CloudFront Functionsを利用でIP制限とかBasic認証可能
• AWS WAFとAmazon Route 53も組み合わせた設定 (次回予定)

会社紹介資料  Last Update – 5th Feb.2021 We Are Hiring! MIERUNE
→ カジュアル面談はこちら ←

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

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

Yasunori Kirimoto

More Decks by Yasunori Kirimoto

Other Decks in Technology

Featured

Transcript