Deploying a React app using EC2 and Terraform

Build this hands-on demo step by step with my detailed tutorial on Julien Muke YouTube. Feel free to subscribe 🔔!

This repository contains the steps corresponding to an in-depth tutorial available on my YouTube channel, Julien Muke.

If you prefer visual learning, this is the perfect resource for you. Follow my tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

In this tutorial, you'll learn how to build a fully automated CI/CD pipeline using AWS CodePipeline, CodeBuild, and Amazon S3 to deploy a React.js application hosted on GitHub. Say goodbye to manual deployments, every time you push to your repo, your app will automatically build and deploy to a static website on S3!

1. Push code to the main branch on GitHub.
2. AWS CodePipeline detects the change.
3. AWS CodeBuild installs dependencies and builds the React app.
4. The build output is deployed to the S3 bucket.
5. S3 serves the app as a public static website.

First, we’ll set up a React app by cloning the React app from my GitHub repository. You can use your own or follow along with mine. Make sure the app is committed to GitHub.

git clone https://github.com/julien-muke/saas-landing-page.git

For the deploy provider we are going to use Amazon S3, we will create an S3 bucket.

1. Head over to the S3 service.
2. Click Create bucket.
3. Name it something unique like my-react-cicd-demo

Once the s3 bucket is created, leave it for now, as we will come for it to finish the setup later.

Now the fun part—building the pipeline.

1. Go to AWS CodePipeline, click Create pipeline.
2. Name your pipeline: reactapp-cicd-demo
3. Choose a new service role or an existing one.

1. Add source stage:
   - Source provider: GitHub (connect your GitHub account).
   - Select your repository and branch.

⚠️Note: Make sure you select the repository that we cloned in Step 1

- Once you are connected to your Github and select your repository, then choose "Next"

1. Add build stage:
   - Provider: AWS CodeBuild.
   - Choose "Create project"

Let's proceed to next step and create the CodeBuild Project.

Now let’s set up CodeBuild, which will handle building the React app.

1. Go to CodeBuild, click Create Build Project.
2. Name it something like react-cicd-pipeline-demo

1. Choose a managed image: aws/codebuild/standard:6.0 (or latest).
2. Under build specifications, choose "Use a buildspec file"

1. Inside your GitHub repo, create a file named buildspec.yml in the root:

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 18
    commands:
      - echo Installing dependencies...
      - npm ci --legacy-peer-deps

  build:
    commands:
      - echo Building the React app...
      - npm run build

artifacts:
  files:
    - '**/*'
  base-directory: dist
  discard-paths: no

⚠️Note: This file tells CodeBuild to install dependencies, build the app, and copy the contents of the build/ folder as artifacts.

1. Back to the CodeBuild Project, keep the rest as default and choose "Continue to CodePipeline"
2. Then the CodeBuild project will be create and added to the build stage as shown below, then choose "Next"

1. Add deploy stage:
   - Provider: Amazon S3.
   - Bucket: Select the one you created earlier my-react-cicd-demo
   - Extract file option: YES, choose "Next"

- Lastly, review all the configuration and click "Create pipeline"

Once the pipeline is successfully created, you’ll see it run through the source build and deploy stages.

1. Go to Amazon S3 console
2. Select our existing S3 bucket my-react-cicd-demo
3. You should see the S3 bucket with objects inside, extracted from our CodePipeline.
4. Now let's make this S3 Bucket public:
   - On the top bar, choose "Properties"

- Scroll down to "Static Website Hosting" and click "Edit"

- Under "Static Website Hosting", choose "Enable"
- And specify index.html as the index document, then click "Save"

- Next, edit some permissions, still on the tob bar choose "Permissions"
- Uncheck "Block all public access" to allow public access, then click "Save changes"

- Next, we will add a bucket policy to allow public read access inside our s3 bucket. Here's the sample policy you can use:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

⚠️ Replace: your-bucket-name with your actual bucket name, then click "Save"

- Go back to the S3 Bucket console, on the top bar, choose Objects, then click on index.html
- To visit your React.js App, click on the Object URL.

- You should see your React.js App running on Amazon S3

Let’s test the whole pipeline. I’ll make a small change to the homepage text and push it to GitHub.

As soon as the code is pushed, CodePipeline is triggered. You’ll see it run through the source, build, and deploy stages.

When you’re done, clean up your AWS resources to avoid charges.