From 544c3c75d981068548387c97b3ba5dfc6e1d97aa Mon Sep 17 00:00:00 2001 From: CHIKAMATSU Naohiro Date: Fri, 23 Feb 2024 09:17:43 +0900 Subject: [PATCH] Feat: Static Web Application Distribution --- README.md | 1 + .../static-web-site-distribution/Makefile | 9 +- .../static-web-site-distribution/README.md | 32 +++- .../static-web-site-distribution/index.html | 12 ++ .../parameters.json | 2 +- .../static-web-site-distribution/spa.png | Bin 0 -> 6624 bytes .../static-web-site-distribution/template.yml | 176 +++++++++++------- 7 files changed, 158 insertions(+), 74 deletions(-) create mode 100644 cloudformation/static-web-site-distribution/index.html create mode 100644 cloudformation/static-web-site-distribution/spa.png diff --git a/README.md b/README.md index 230fe01..333f67b 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ The s3hub command provides following features: |[Lambda with API Gateway](./cloudformation/lambda-with-api-gw/README.md)|✅|100%| |[Daily Cost Notification](./cloudformation/daily-cost-notification/README.md)|✅|100%| |[CloudWatch Real User Monitoring (RUM)](./cloudformation/cloudwatch-rum/README.md)|✅|100%| +|[Static Web Application Distribution](./cloudformation/static-web-site-distribution/README.md)|✅|100%| ## LICENSE diff --git a/cloudformation/static-web-site-distribution/Makefile b/cloudformation/static-web-site-distribution/Makefile index e4aea4a..fcae5e2 100644 --- a/cloudformation/static-web-site-distribution/Makefile +++ b/cloudformation/static-web-site-distribution/Makefile @@ -7,10 +7,13 @@ help: ## Show this help message test-deploy: ## Deploy CloudFormation Template to localstack @echo "Deploying S3 and CloudFront Template" - aws cloudformation create-stack --endpoint-url "http://localhost:4566" --stack-name "static-web-site-distribution" \ + aws cloudformation create-stack --endpoint-url "http://localhost:4566" --stack-name "static-web-site-distribution" --region ap-northeast-1 \ --template-body "file://template.yml" --parameters "file://parameters.json" --capabilities CAPABILITY_NAMED_IAM deploy: ## Deploy CloudFormation Template @echo "Deploying S3 and CloudFront Template" - aws cloudformation create-stack --stack-name "static-web-site-distribution" \ - --template-body "file://template.yml" --parameters "file://parameters.json" --capabilities CAPABILITY_NAMED_IAM \ No newline at end of file + aws cloudformation create-stack --stack-name "static-web-site-distribution" --region ap-northeast-1 \ + --template-body "file://template.yml" --parameters "file://parameters.json" --capabilities CAPABILITY_NAMED_IAM + +upload: ## Upload index.html + aws s3 cp ./index.html s3://content-bucket-rainbow-spa \ No newline at end of file diff --git a/cloudformation/static-web-site-distribution/README.md b/cloudformation/static-web-site-distribution/README.md index ee79d28..0edf082 100644 --- a/cloudformation/static-web-site-distribution/README.md +++ b/cloudformation/static-web-site-distribution/README.md @@ -1,4 +1,4 @@ -## Static Web Site Distribution With CloudFront and S3 +## Static Web Application Distribution With CloudFront and S3 ### Overview The simplest way to deploy the static website is to store the content in Amazon S3 (Simple Storage Service) and distribute it using CloudFront (Content Delivery Network). @@ -37,4 +37,32 @@ OAC also enhances security measures by supporting shorter credential durations a 3. Compliance with Legal Requirements: Some industries or legal requirements may mandate the retention of access logs and their accessibility when needed to comply with regulations. #### CloudFront Cache -- [Understanding AWS CloudFront Caching: A Guide for Beginners](https://aws.plainenglish.io/understanding-aws-cloudfront-caching-a-guide-for-beginners-ce0169d3c724) \ No newline at end of file +- [Understanding AWS CloudFront Caching: A Guide for Beginners](https://aws.plainenglish.io/understanding-aws-cloudfront-caching-a-guide-for-beginners-ce0169d3c724) + +### How to deploy +> [!NOTE] +> Before running `make deploy`, ensure you have configured AWS credentials and set the correct region. Otherwise, you use single sign-on (SSO). + +```shell +$ make deploy +``` + +If you want to upload the content of the static website to S3, you can use the following command: + +```shell +aws s3 cp ./static-website s3:// --recursive +``` + +For example, if you upload the index.html file to the S3 bucket, you can use the following command: + +```shell +aws s3 cp ./index.html s3://content-bucket-rainbow-spa +``` + +After deployment, you can access the static website. The URL syntax for the CloudFront distribution is as follows: + +``` +https://.cloudfront.net +``` + +![spa](./spa.png) \ No newline at end of file diff --git a/cloudformation/static-web-site-distribution/index.html b/cloudformation/static-web-site-distribution/index.html new file mode 100644 index 0000000..7b5104a --- /dev/null +++ b/cloudformation/static-web-site-distribution/index.html @@ -0,0 +1,12 @@ + + + + + + Simple Page + + +

Hello, World!

+

This is a simple HTML page.

+ + \ No newline at end of file diff --git a/cloudformation/static-web-site-distribution/parameters.json b/cloudformation/static-web-site-distribution/parameters.json index a4bbbbe..a5a5504 100644 --- a/cloudformation/static-web-site-distribution/parameters.json +++ b/cloudformation/static-web-site-distribution/parameters.json @@ -1,6 +1,6 @@ [ { "ParameterKey" : "ContentBucketName", - "ParameterValue" : "ContentBucketNameRainbow" + "ParameterValue" : "content-bucket-rainbow-spa" } ] \ No newline at end of file diff --git a/cloudformation/static-web-site-distribution/spa.png b/cloudformation/static-web-site-distribution/spa.png new file mode 100644 index 0000000000000000000000000000000000000000..b9b88af3277ba973fc6dea7c46f552b5383762a9 GIT binary patch literal 6624 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 tSMS+weefMt}WD