AWS Route53+ACM+CloudFront+S3 で静的Webサイト構築
この記事の目的
AWSのサービスの使い方をすぐ忘れてしまうので、後から思い出せるようにメモしておきます。
AWS Route53+ACM+CloudFront+S3で静的Webサイトの構築
AWS Hands-on の以下の動画がすごく参考になりました。
動画の構成
以下の構成になっています。
01 今回のハンズオンので構築する構成の紹介 + S3 と Cloud9 の紹介
ハンズオン全体の流れ、ゴールを説明し、今回のハンズオンで構築する最終的な構成について紹介します。続けて、前半のハンズオンで利用する Amazon S3 と AWS Cloud9 の紹介を行います。また、ハンズオンで利用するファイル群は こちら からダウンロードしてください。各ファイルの使用方法については README.txt ファイルをご確認ください。
ハンズオンで利用するファイル群: https://pages.awscloud.com/rs/112-TZM-766/images/Hands-on_Files_AWS_Hands-onf-for_Beginners-Static_Web_Hosting_on_S3.zip
02 S3 の静的ホスティング機能を使ってみる
S3 の静的ウェブサイトホスティング機能を用いて、簡単な HTML ファイルを公開するハンズオンを進めます。（動画の中で使用する HTML ファイルについては １）でダウンロードしたフォルダ > #2 > index.html を、S3 バケットポリシーに入力する JSON の雛形は １）でダウンロードしたフォルダ > #2 > sample-bucket-policy.json.txt をお使いください。）
03 Cloud9 環境を立ち上げて静的コンテンツを開発する + AWS CLI で S3 にファイルアップロードする
クラウドベースの統合開発環境サービスである Cloud9 を使って開発を進めていきます。冒頭で Cloud9 にアップロードする HTML ファイルは ２）で利用した index.html ファイルをそのままお使いください。
04 続・静的コンテンツの開発 + AWS CLI で S3 に複数のファイルを一括アップロードする
引き続き、Cloud9 上で開発を進めていきます。画像の挿入、favicon の設定、スタイルシートでの装飾を行っていきます。動画内で利用している画像は １）でダウンロードしたフォルダ > #4 > lambda.png、favicon は １）でダウンロードしたフォルダ > #4 > favicon.ico をお使いください。
05 このあとのハンズオンの流れ + CloudFront, Route 53, ACM の紹介
後半のハンズオンで利用する Amazon CloudFront、Amazon Route 53、AWS Certificate Manager の紹介を行います。
06 CloudFront を使って、画像をキャッシュさせる
CloudFront の設定を進め、画像ファイルをオリジンからではなく、CloudFront のキャッシュから取得する設定を進めていきます。
07 [Option / Demo] Route 53 で独自ドメインを取得し、S3 に HTTP アクセスする
Route 53 のレジストラ機能で独自ドメインを取得していきます。その後、レコードセットに A レコードを追加し、ドメインでアクセスできるように設定します。（独自ドメインを取得する年間費用が発生するため、このハンズオンと次のハンズオンについては Option としています。実際にドメインを取得したい方は手順に従いハンズオンを進めていただき、そうでない方はデモとしてご覧ください。）
08 [Option / Demo] ACM を使い、Route 53 - CloudFront - S3 で HTTPS アクセスする
AWS Certificate Manager で SSL/TLS 証明書を作成し、CloudFront に配置します。その後、Route 53 に登録している A レコードの向き先を CloudFront 側に変更することで独自ドメインによる HTTPS アクセスを実現します。最後に、CloudFront を経由しない S3 への直アクセスを禁止する設定を追加します。
09 削除手順の紹介、本シリーズのまとめ、Next Step のご案内
本ハンズオンで作成したリソースを削除する手順を紹介します。その後、本ハンズオンシリーズのまとめ、および次のステップにオススメなハンズオンを紹介します。
AWSサービスの概要
Route53 ⁶⁷⁸⁹[^10^]
- Amazon Route 53は、高可用性と拡張性に優れたドメインネームシステム（DNS）ウェブサービスです⁸。
- ユーザーリクエストをAWSまたはオンプレミスで実行されているインターネットアプリケーションに接続します⁶。
- ネットワークトラフィックをグローバルに管理し、ルーティングポリシーを設定して、アプリケーションリカバリのためのレスポンスを事前に決定して自動化します⁶。
ACM (AWS Certificate Manager) ¹²³
- AWS Certificate Manager (ACM)は、ウェブサイトやアプリケーションの証明書を作成、保存、更新するためのサービスです¹。
- ACMは、統合AWSサービスの証明書を直接発行するか、サードパーティーの証明書をインポートするか、ACM管理システムにインポートするかで選択できます¹。
CloudFront ¹⁴¹⁵¹⁶
- Amazon CloudFrontは、ユーザーへのウェブコンテンツをエッジロケーションに配信するウェブサービスで、高速化します¹⁴。
- コンテンツの配信を高速化するために、エッジロケーションのレイテンシーを最小に、コンテンツの最終バージョンを識別する、コンテンツの最終バージョンを取得するなどの機能を提供します¹⁴。
S3 (Simple Storage Service) ¹¹¹²¹³
- Amazon Simple Storage Service（Amazon S3）は、ウェブサイトやモバイルアプリケーション、社内アプリケーション、ビッグデータ、IoTセンサーやデバイスからのデータなど、どこからの、どのような量のデータでも保存と取得が可能な耐久性の高いクラウドストレージです¹¹。
詳細な情報や使用方法については、AWSの公式ドキュメンテーションをご覧ください。⁶¹¹⁴¹¹
(1) Amazon Route 53（スケーラブルなドメインネームシステム (DNS .... https://aws.amazon.com/jp/route53/.
(2) 【aws】route53とは何か？使い方や機能を解説 #AWS - Qiita. https://qiita.com/gk12/items/485b382fcc0c03937ca4.
(3) 【AWS】Route53って結局何なの・・・？ - てくてくテック. https://tektektech.com/aws-route53/.
(4) 【route53とは】awsをわかりやすく. https://www.kzyrepository.com/2019/11/route53とはawsをわかりやすく/.
(5) AWS Route53 DNSについて #AWS - Qiita. https://qiita.com/avicii2314/items/7a59bf0abc8576d3f4c6.
(6) AWS Certificate Manager とは? - AWS Certificate Manager. https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-overview.html.
(7) AWS Certificate Managery(ACM)ってなに？ #AWS - Qiita. https://qiita.com/Baisel/items/118b66c7f4170002c258.
(8) ACM（AWS Certificate Manager)とは何か？ #AWS - Qiita. https://qiita.com/kimuni-i/items/3e5cac1ca89830edcce5.
(9) Amazon CloudFront とは何ですか? - Amazon CloudFront. https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html.
(10) Amazon CloudFront（グローバルなコンテンツ配信ネットワーク .... https://aws.amazon.com/jp/cloudfront/.
(11) 【AWS】CloudFrontとは #AWS - Qiita. https://qiita.com/Ryo9597/items/6d96ab9fdc1f1dca8838.
(12) Amazon S3（拡張性と耐久性を兼ね揃えたクラウドストレージ .... https://aws.amazon.com/jp/s3/.
(13) 【AWS】Amazon S3 を徹底的にまとめてみた！ #Python - Qiita. https://qiita.com/c60evaporator/items/da47620d69f84a9be7dc.
(14) Amazon S3 とは - Amazon Simple Storage Service. https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/Welcome.html.
(15) AWS Certificate Manager (ACM) について簡単にまとめる .... https://zenn.dev/sasumasa/articles/e6a2c97dbf1203.
(16) 【AWS初心者向け】AWS Certificate Manager (ACM) 証明書 .... https://qiita.com/s-jo/items/19893b2e8f8517489472.
(17) undefined. https://example.com/sunsetphoto.png.
(18) undefined. https://d111111abcdef8.cloudfront.net/logo.jpg.
Discussion