Introduction
Hemanth of Alliance Department here. In this blog, I made CI/CD pipeline for various stages of environment (dev/stg/prod) for React APP using Github Actions.
S3
Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.
CloudFront
AWS CloudFront is a content delivery network (CDN) service that aids in the speedy and dependable distribution of static and dynamic information with high performance, security, and developer friendliness. It distributes your content over a global network of edge sites, or data centers that are close to your users. Using serverless compute features, you can also alter the code that is executed at the AWS CDN edge.
Github Actions
Carrying out software development workflows right in your repository using GitHub Actions, a feature of GitHub. To do any activity, including CI/CD, you can find, create, and distribute actions. It is possible to create a completely unique workflow. Additionally, you may develop, test, and deploy your code with GitHub Actions in any language and on any platform. In addition to matrix builds and any language, GitHub Actions supports Linux, macOS, Windows, ARM, and containers.
Demo
Go to IAM and click on add users
Enter a username and click on next
Keep default settings click on next and then click on create user
Now creating policy for each environment, click on create policy
first creating policy for dev environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next
Give a policy name and click on create policy
Now creating for stg environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next
Give a policy name and click on the create policy
Now creating for prod environment, Click on JSON Now type down the following policy and change the resource to your respective S3 bucket arn and click next
Give a policy name and click on the create policy
Go back to the user you created and in permission click on add permissions
Click on attack policies and select all the above created policies
After selecting them click on add permissions
In security credentials, click on create access key
Select other and click on next
Click on the create access key
Now go to GitHub, settings click on actions in secrets and variables and then click on new respository secret
Enter the following in name and enter the access key id from the above download access keys
Same way for the secret access key
Now in each of your respective environments create .GitHub/workflow and inside that main.yml file and type down the following code. Note: Type the branch name your current environment is in and enter the respective S3 address
Follow for each environment
git add .
git commit -m "created a new create app"
git push
Now check the github actions and you can see the CI/CD in action
Conclusion
Hope with this you get an idea of how to make CI/CD pipeline for various stages of environment (dev/stg/prod) for React APP using Github Actions. Thank you for seeing the blog till the end.
5
