Hi!!
A few days ago, I worked with a developer on a simple landing page with zero complications. He needed a simple way to visualize his changes, obviously in our current AWS infrastructure.
The best way to achieve this was with Github Actions + S3 Static websites, and I'll tell you how I did it.
Steps
- Provision an S3 Bucket and IAM User with Cloudformation.
- Add the AWS secrets from our IAM user to the Github repository.
- Deploy an app to an S3 Bucket through Github actions.
1. Resources provisioning 🏗️
First, we must deploy our resources by AWS Cloudformation. In the following cf template (main.yml), it's defined:
- S3 Bucket
- Bucket Policy
- IAM User
- IAM Policy inline
If you have already installed AWS CLI:
aws cloudformation create-stack --stack-name your-stack-name --capabilities CAPABILITY_IAM --template-body file://main.yml --parameters ParameterKey=BucketName,ParameterValue=your-unique-bucket-name
Otherwise:
For this need to login into the AWS Console -> Cloudformation -> Stack -> Create Sack -> Upload a template file.
It will ask you for confirmation that this cloudformation template will create IAM resources, in this case, a user.
2. Secrets 🤫
Now, we go for the IAM User: https://console.aws.amazon.com/iam/
IAM -> Users -> your-new-iam-user -> Security Credentials
Access Key -> Create access key
Download .csv file
We need to set AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY in the GitHub repository's secrets section required to upload files to our S3 bucket.
S3_BUCKET: The name of the destination bucket
S3_BUCKET_REGION: The destination bucket region
Settings -> Secrets -> New repository secret
3. Github Actions 🚀
I highly recommend using this continuous deployment only for stage environments. For that reason, we'll create a QA branch.
git checkout -b QA
Creating branch from Github UI
Next, we'll create our deploy.yml file in the path: .github/workflows
mkdir -p .github/workflows && touch .github/workflows/deploy.yml
If you want to run it on a specific branch, change branches
Github action: https://github.com/Reggionick/s3-deploy.
Our app is already deployed by Github Actions!
Done! 🙌
Check your S3 WebsiteURL from the last Cloudformation output:
http://your_bucket_name.s3-website-your_region.amazonaws.com/
For HTTPS: Configuring a static website using a custom domain registered with Route 53
Bonus 🎁
If you work with react, the following pipeline can help you:
react-router 404 errors: https://via.studio/journal/hosting-a-reactjs-app-with-routing-on-aws-s3
cors-cloudformation example: https://git.io/JtQZK
If you have any comments or improvements for this post, I would be glad to receive them.
Thank you for your time 👋👨💻.
Top comments (0)