Table of Contents
Auto deploy react SPA to AWS S3 using github actions, and a Cloudformation template to auto initialize S3, Cloudfront resources in aws.
- AWS CloudFormation | S3 | CloudFront
- Github Actions | actions/checkout@v3
- Github Actions | aws-actions/configure-aws-credentials@v1
- An active AWS account.
- Bucket restrictions and limitations not excess 100. Or you may need to remove unused S3 buckets. If you need additional buckets, submit a support ticket to increase your limit. However, there is a hard limit of 1000 S3 buckets per account. See AWS S3 | Bucket restrictions and limitations
- Clone the repo
git clone https://github.com/yuzukicat/cloudfront-s3-actions-react
- Floder Premission.
cd ..
sudo chmod -R 777 cloudfront-s3-actions-react
cd cloudfront-s3-actions-react
- To Create the infrastructure to host and expose a React Single Page Application:
Deploy the AWS CloudFormation template.
See AWS Rrescriptive Guidance | Websites & web apps
- Epics
- Deploy the SPA
- Deploy the AWS CloudFormation template: Change the option as follow:
- Deploy the SPA
- Stack failure options
- Preserve successfully provisioned resources Your may need to try rollback and redeploy stack for CFDistribution because it asyncs CDN resources across aws network and takes long time up to half an hour.
-
Set up ENV for CD. See Github Actions | Actions secrets
-
Edit react-build-deploy-s3.yml Spefic the branch to be trigged by push action.
See Github Actions | actions/checkout@v3
Spefic the aws region.
See Amazon Elastic Compute Cloud | Networking in Amazon EC2 | Regions and Zones
Spefic the the dist folder and s3 bucketname(not logic output name for cloudfromation). -
Git Remote remove origin and Add to you own origin, git push. The public folder will be auto deploy to s3.
-
If you get React router issue on AWS Cloudfront and S3 | React router CloudFront access denied | S3 not found, See
React router issue on AWS Cloudfront and S3 | React router CloudFront access denied | 2022 Fix | Newest
If you get The If-Match version is missing or not valid for the resource. error when updating custom error pages, try Incognito Window -
For nocache settings, See
AmazonCloudFront | Invalidating files
Also refer to the article to see Configure default cache behavior
Continuous Deployment Pipeline for React App on AWS S3 + CloudFront
- Fix You have attempted to create more buckets than allowed issue resulting in rollback and deployment failure during cloudformation stack deployment.(A tool to delete unused buckets)
See the open issues for a full list of proposed features (and known issues).
If you are familar with github actions, CI/CD or AWS, you are welcome to join and development automated deployment tools
- Clone the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Emails:
Yuzuki.Cat - [email protected]
Project Link: https://github.com/yuzukicat/cloudfront-s3-actions-react
Please share useful links here for reference.