iTranslated by AI
Building a Static Website with AWS Route 53 + ACM + CloudFront + S3
Purpose of This Article
I often forget how to use AWS services, so I'm writing this memo to help me remember later.
Building a Static Website with AWS Route53+ACM+CloudFront+S3
The following AWS Hands-on video was very helpful.
Video Structure
It consists of the following sections:
01 Introduction to the Architecture to be Built + Introduction to S3 and Cloud9
This section explains the overall flow and goals of the hands-on and introduces the final architecture to be built. It then introduces Amazon S3 and AWS Cloud9, which will be used in the first half of the hands-on. Also, please download the files used in the hands-on from here. For instructions on how to use each file, please check the README.txt file.
Hands-on files: https://pages.awscloud.com/rs/112-TZM-766/images/Hands-on_Files_AWS_Hands-onf-for_Beginners-Static_Web_Hosting_on_S3.zip
02 Trying out S3 Static Website Hosting
We will proceed with a hands-on exercise to publish a simple HTML file using S3's static website hosting feature. (For the HTML file used in the video, please use the folder downloaded in 1) > #2 > index.html. For the JSON template for the S3 bucket policy, please use the folder downloaded in 1) > #2 > sample-bucket-policy.json.txt.)
03 Launching a Cloud9 Environment and Developing Static Content + Uploading Files to S3 via AWS CLI
We will proceed with development using Cloud9, a cloud-based integrated development environment service. For the HTML file to be uploaded to Cloud9 at the beginning, please use the same index.html file used in 2).
04 Continued: Developing Static Content + Batch Uploading Multiple Files to S3 via AWS CLI
We will continue development on Cloud9. We will perform image insertion, favicon configuration, and decoration with stylesheets. For the images used in the video, please use the folder downloaded in 1) > #4 > lambda.png, and for the favicon, please use the folder downloaded in 1) > #4 > favicon.ico.
05 Next Hands-on Flow + Introduction to CloudFront, Route 53, and ACM
This section introduces Amazon CloudFront, Amazon Route 53, and AWS Certificate Manager, which will be used in the second half of the hands-on.
06 Using CloudFront to Cache Images
We will configure CloudFront so that image files are retrieved from the CloudFront cache instead of the origin.
07 [Option / Demo] Acquiring a Custom Domain with Route 53 and Accessing S3 via HTTP
We will acquire a custom domain using Route 53's registrar feature. Then, we will add an A record to the record set so that the site can be accessed via the domain. (Since acquiring a custom domain incurs an annual fee, this and the following hands-on section are marked as optional. If you wish to acquire a domain, please follow the steps; otherwise, please watch it as a demonstration.)
08 [Option / Demo] Enabling HTTPS Access via Route 53 - CloudFront - S3 Using ACM
We will create an SSL/TLS certificate with AWS Certificate Manager and place it on CloudFront. Then, by changing the destination of the A record registered in Route 53 to the CloudFront side, we will achieve HTTPS access using the custom domain. Finally, we will add a configuration to prohibit direct access to S3 without going through CloudFront.
09 Resource Cleanup, Series Summary, and Next Steps
This section introduces the steps to delete the resources created in this hands-on. It then summarizes this hands-on series and recommends next steps.
Overview of AWS Services
Route53 ⁶⁷⁸⁹[^10^]
- Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service⁸.
- It connects user requests to internet applications running on AWS or on-premises⁶.
- It manages network traffic globally and configures routing policies to determine and automate responses for application recovery⁶.
ACM (AWS Certificate Manager) ¹²³
- AWS Certificate Manager (ACM) is a service for creating, storing, and renewing certificates for websites and applications¹.
- With ACM, you can choose to issue certificates for integrated AWS services directly, or import third-party certificates into the ACM management system¹.
CloudFront ¹⁴¹⁵¹⁶
- Amazon CloudFront is a web service that speeds up the distribution of web content to users by delivering it through edge locations¹⁴.
- To accelerate content delivery, it provides features such as minimizing latency at edge locations, identifying the latest version of content, and retrieving the latest version of content¹⁴.
S3 (Simple Storage Service) ¹¹¹²¹³
- Amazon Simple Storage Service (Amazon S3) is highly durable cloud storage capable of storing and retrieving any amount of data from anywhere—such as websites, mobile applications, corporate applications, big data, and data from IoT sensors and devices¹¹.
For detailed information and usage instructions, please refer to the official AWS documentation.⁶¹¹⁴¹¹
(1) Amazon Route 53 (Scalable Domain Name System (DNS) .... https://aws.amazon.com/jp/route53/.
(2) [aws] What is Route 53? Explaining usage and features #AWS - Qiita. https://qiita.com/gk12/items/485b382fcc0c03937ca4.
(3) [AWS] What exactly is Route 53? - Teku Teku Tech. https://tektektech.com/aws-route53/.
(4) [What is Route 53] Explaining AWS in simple terms. https://www.kzyrepository.com/2019/11/route53とはawsをわかりやすく/.
(5) About AWS Route53 DNS #AWS - Qiita. https://qiita.com/avicii2314/items/7a59bf0abc8576d3f4c6.
(6) What is AWS Certificate Manager? - AWS Certificate Manager. https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-overview.html.
(7) What is AWS Certificate Manager (ACM)? #AWS - Qiita. https://qiita.com/Baisel/items/118b66c7f4170002c258.
(8) What is ACM (AWS Certificate Manager)? #AWS - Qiita. https://qiita.com/kimuni-i/items/3e5cac1ca89830edcce5.
(9) What is Amazon CloudFront? - Amazon CloudFront. https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html.
(10) Amazon CloudFront (Global Content Delivery Network .... https://aws.amazon.com/jp/cloudfront/.
(11) [AWS] What is CloudFront #AWS - Qiita. https://qiita.com/Ryo9597/items/6d96ab9fdc1f1dca8838.
(12) Amazon S3 (Scalable and durable cloud storage .... https://aws.amazon.com/jp/s3/.
(13) [AWS] A thorough summary of Amazon S3! #Python - Qiita. https://qiita.com/c60evaporator/items/da47620d69f84a9be7dc.
(14) What is Amazon S3 - Amazon Simple Storage Service. https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/Welcome.html.
(15) A brief summary of AWS Certificate Manager (ACM) .... https://zenn.dev/sasumasa/articles/e6a2c97dbf1203.
(16) [For AWS Beginners] AWS Certificate Manager (ACM) Certificates .... https://qiita.com/s-jo/items/19893b2e8f8517489472.
(17) undefined. https://example.com/sunsetphoto.png.
(18) undefined. https://d111111abcdef8.cloudfront.net/logo.jpg.
Discussion