Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Amazon CloudFrontの公開 設定を色々とためしてみた © MIERUNE © MapTiler © OpenStreetMap contributors Yasunori Kirimoto 2022.01.27 MIERUNE 社内勉強会 #026
Slide 2
Slide 2 text
Location-based Architect Yasunori Kirimoto Owner of Co-founder and CTO of Member of
Slide 3
Slide 3 text
Amazon CloudFront Amazon CloudFrontの公開設定を色々とためしてみた
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
Contents 1. Amazon S3と組み合わせた公開 2. 指定IPのみ公開 3. Basic認証公開 4. Vue.jsルーティング対応 (おまけ) 5. まとめ
Slide 6
Slide 6 text
Amazon S3と組み合わせた公開
Slide 7
Slide 7 text
事前準備 事前にAmazon S3に公開したいファイル一 式をアップロード 設定は非公開のままでOK
Slide 8
Slide 8 text
AWSコンソール → CloudFrontをクリック 「CloudFrontディストリビューションを作成」を クリック
Slide 9
Slide 9 text
対象のS3のドメインを指定 S3のバケットアクセスを指定しポリシーは自 動更新に設定
Slide 10
Slide 10 text
httpsにリダイレクトする設定 ルートオブジェクトにS3のindex.htmlを設定 その他は今回はデフォルトのまま設定
Slide 11
Slide 11 text
作成後、S3のバケットを確認するとポリシー が自動で設定されているのを確認
Slide 12
Slide 12 text
作成されたCloudFrontのS3用のディストリ ビューションのURLにアクセスしてみる
Slide 13
Slide 13 text
CloudFront経由でS3にアクセスしWebSite が表示される
Slide 14
Slide 14 text
指定IPのみ公開
Slide 15
Slide 15 text
関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック
Slide 16
Slide 16 text
CloudFront FunctionsでIP制限をする関数 を設定します
Slide 17
Slide 17 text
発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック
Slide 18
Slide 18 text
対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認 設定したIPからURLにアクセスすると WebSiteが表示されます 指定IP以外はWebSiteが表示されません
Slide 19
Slide 19 text
Basic認証公開
Slide 20
Slide 20 text
関数 → 「関数を作成」をクリック 関数名と説明を設定 → 「関数を作成」をク リック
Slide 21
Slide 21 text
CloudFront FunctionsでBasic認証をする関 数を設定します
Slide 22
Slide 22 text
発行 → 「関数を発行」をクリック 関数作成後関連付けのメニューが表示され るので「関連付けを追加」をクリック
Slide 23
Slide 23 text
対象のディストリビューション・イベントタイプ・ キャッシュビヘイビアを設定 → 「関連付けを 追加」をクリック 関連付けされたかを確認
Slide 24
Slide 24 text
URLにアクセスするとユーザーとパスワード の入力画面が表示されます 設定したユーザーとパスワードを入力すると WebSiteが表示されます
Slide 25
Slide 25 text
Vue.jsルーティング対応 (おまけ)
Slide 26
Slide 26 text
エラーページ → 「カスタムエラーレスポンス を作成」をクリック エラーコード403とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック
Slide 27
Slide 27 text
エラーコード404とその他キャプチャの内容 で設定 → 「カスタムエラーレスポンスを作 成」をクリック 設定を確認
Slide 28
Slide 28 text
これでルーティングのページも表示されます
Slide 29
Slide 29 text
まとめ
Slide 30
Slide 30 text
● Amazon CloudFrontのコンソールすごく使いやすくなってた ● Amazon CloudFrontとAmazon S3で公開設定可能 ● CloudFront Functionsを利用でIP制限とかBasic認証可能 ● AWS WAFとAmazon Route 53も組み合わせた設定 (次回予定)
Slide 31
Slide 31 text
会社紹介資料 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE → カジュアル面談はこちら ←