React deploy to S3 with Cloudfront CDN create resources using Cloudformation

Cloudfront S3 Actions React »

Report Issue · Pull Request

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • How To
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments

About The Project

Auto deploy react SPA to AWS S3 using github actions, and a Cloudformation template to auto initialize S3, Cloudfront resources in aws.

(back to top)

Built With

• AWS CloudFormation | S3 | CloudFront
• Github Actions | actions/checkout@v3
• Github Actions | aws-actions/configure-aws-credentials@v1

(back to top)

Getting Started

Prerequisites

• 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

How To

1. Clone the repo

git clone https://github.com/yuzukicat/cloudfront-s3-actions-react

2. Floder Premission.

cd ..
sudo chmod -R 777 cloudfront-s3-actions-react
cd cloudfront-s3-actions-react

3. 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:
• 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.

4. Set up ENV for CD. See Github Actions | Actions secrets

5. 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).

6. Git Remote remove origin and Add to you own origin, git push. The public folder will be auto deploy to s3.

7. 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

8. 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

(back to top)

Roadmap

• 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).

(back to top)

Contributing

If you are familar with github actions, CI/CD or AWS, you are welcome to join and development automated deployment tools

1. Clone the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Emails:

(back to top)

Contact

Yuzuki.Cat - yuzuki.cat@kamisu66.com

Project Link: https://github.com/yuzukicat/cloudfront-s3-actions-react

(back to top)

Acknowledgments

Please share useful links here for reference.

• Code OSS Plugin | aws-cloudformation-yaml

(back to top)