CICD Static Website to S3 with Github Actions

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

1. Provision an S3 Bucket and IAM User with Cloudformation.
2. Add the AWS secrets from our IAM user to the Github repository.
3. 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 👋👨‍💻.