DEV Community

loading...

Deploy React Site Using GitHub Actions & AWS CDK

jviloria96744 profile image Jay Viloria ・1 min read

My Workflow

This is a React template that uses a GitHub Actions Workflow to deploy static files to AWS in multiple development environments with a custom domain and HTTPS. The GH Actions Workflow leverages AWS CDK to create resources/provision services necessary for deployment.

The workflow assumes a Release Flow-like branching strategy that allows for the following development workflow:

  • automated testing for "feature/*" branch pushes
  • automated testing/dev deployments on pushes and pull requests into master
  • automated testing/stg deployments/artifact storage upon tag pushes
  • manual workflow for prod deployments where tagged version is specified and deployed from artifact storage

Submission Category:

DIY Deployments

Yaml File or Link to Code

GitHub logo jviloria96744 / react-aws-cdk-template

React JS template using AWS Cloud Development Kit (CDK) to deploy static site to AWS with a custom domain name.

React/AWS CDK Template

This project is a template used to deploy a static React site to an Amazon S3 Bucket.

The GitHub Actions Workflow is responsible for the CI/CD portion of this project and leverages the AWS Cloud Development Kit to create the S3 Bucket, CloudFront Distribution, SSL Certificate and associated permissions/access policies and will deploy to multiple sub-domains given a custom domain that the user owns.

Get Started

Clone/Fork Project

Within your own GitHub account, create a repo using a cloned local repository or by forking this repository. Clone the repository using the following command,

git clone https://github.com/jviloria96744/react-aws-cdk-template.git

GitHub Secrets/AWS Prerequisites

The GitHub Actions Workflow requires four secrets that are all associated with prerequisite activities that need to be completed in AWS (AWS Account Set Up Tutorial):

  • AWS_ACCESS_KEY_ID / AWS_SECRET_ACCESS_KEY
  • AWS_DOMAIN_NAME
  • AWS_REGION

The Access Key ID and Secret Access Key are the credentials of an AWS 'User' that…

Discussion (0)

pic
Editor guide