Building a Deployment Pipeline for a React Application with AWS CodePipeline

Architecture Overview

The CI/CD pipeline will work as follows:

A developer pushes code changes to a GitHub repository.
The push triggers AWS CodePipeline to start a new execution.
The Source stage of the pipeline downloads the latest code from GitHub.
The Build stage uses AWS CodeBuild to run build commands (npm install, npm run build).
After a successful build, CodeBuild deploys the production-ready static files from the build directory to a pre-configured Amazon S3 bucket.
The S3 bucket is configured for static website hosting, making the React application publicly accessible.

Step 1: Create and Configure the S3 Bucket for Hosting

First, set up the S3 bucket that will host your React application.

Create the S3 Bucket:
- Navigate to the Amazon S3 console.
- Click Create bucket.
- Enter a unique Bucket name (e.g., my-react-app-hosting-bucket).
- Select the desired AWS Region.
- Under Block Public Access settings for this bucket, uncheck Block all public access. Acknowledge the warning. This is necessary for a public website.
- Click Create bucket.
Enable Static Website Hosting:
- Go to your newly created bucket and select the Properties tab.
- Scroll down to Static website hosting and click Edit.
- Select Enable.
- Set the Index document to index.html.
- Set the Error document to index.html as well (React Router handles 404s).
- Click Save changes. Note the Bucket website endpoint that is generated.

Apply a Bucket Policy:

Select the Permissions tab of your bucket.
Under Bucket policy, click Edit.
Paste the following JSON policy. Replace YOUR_BUCKET_NAME with your actual bucket name. This policy allows public read access to the objects in your bucket.


{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Sid": "PublicReadGetObject",

            "Effect": "Allow",

            "Principal": "*",

            "Action": "s3:GetObject",

            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"

        }

    ]

}

Click Save changes.

Step 2: Create a React App and Push to GitHub

Create a React Application:
- On your local machine, run the following command to create a new React app:
```
npx create-react-app my-react-deployment
```
Create a GitHub Repository:
- Go to GitHub and create a new repository (e.g., my-react-deployment).

Push Your App to GitHub:

In your local terminal, navigate into the app directory and link it to your GitHub repository.


cd my-react-deployment

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git

git push -u origin main

Step 3: Create the `buildspec.yml` file

This file tells AWS CodeBuild how to build and deploy your application. Create a file named buildspec.yml in the root directory of your React application.


version: 0.2



phases:

  install:

    runtime-versions:

      nodejs: 18

    commands:

      - echo "Installing dependencies..."

      - npm install

  build:

    commands:

      - echo "Building the React application..."

      - npm run build

  post_build:

    commands:

      - echo "Deploying the build to S3..."

      - aws s3 sync build/ s3://YOUR_BUCKET_NAME --delete

install phase: Installs Node.js version 18 and all project dependencies using npm install.
build phase: Runs the npm run build command, which creates a production-ready build folder.
post_build phase: Uses the AWS CLI to sync the contents of the local build/ directory to your S3 bucket. The --delete flag removes old files from the S3 bucket that are no longer in the build output.

Commit this file to your GitHub repository.


git add buildspec.yml

git commit -m "Add buildspec.yml for CodePipeline"

git push

Step 4: Create the AWS CodePipeline

Now, create the pipeline that automates the entire process.

Create Pipeline:
- Navigate to the AWS CodePipeline console and click Create pipeline.
- Enter a Pipeline name (e.g., React-App-Deployment-Pipeline).
- Let CodePipeline create a New service role.
- Click Next.
Add Source Stage:
- For Source provider, select GitHub (Version 2).
- Create a connection to your GitHub account if you haven't already. Grant it access to the repository you created.
- Select your Repository name and the Branch name (main).
- Ensure Start the pipeline on source code change is checked.
- Click Next.
Add Build Stage:
- For Build provider, select AWS CodeBuild.
- Click Create project. A new window will open to configure CodeBuild.
  - Project name: Give it a descriptive name (e.g., React-App-Build-Project).
  - Environment image: Select Managed image.
  - Operating system: Select Amazon Linux 2.
  - Runtime(s): Select Standard.
  - Image: Select the latest aws/codebuild/amazonlinux2-x86_64-standard image.
  - Service role: Let it create a New service role.
  - Buildspec: Ensure Use a buildspec file is selected. CodeBuild will automatically look for buildspec.yml in your source code.
- Click Continue to CodePipeline.
- Back in the CodePipeline setup, your new build project should be selected. Click Next.
Add Deploy Stage:
- Click Skip deploy stage, because our buildspec.yml already handles the deployment to S3. Confirm the skip.
Review and Create:
- Review all the configurations. Click Create pipeline.

Step 5: Grant S3 Permissions to CodeBuild

The pipeline will fail on its first run because the CodeBuild service role does not have permission to write to your S3 bucket.

Navigate to the IAM console.
Go to Roles and find the service role created for your CodeBuild project (it will be named something like codebuild-React-App-Build-Project-service-role).
Click Add permissions -> Create inline policy.

Select the JSON tab and paste the following policy. Replace YOUR_BUCKET_NAME with your bucket name.


{

    "Version": "2012-10-17",

    "Statement": [

        {

            "Effect": "Allow",

            "Action": [

                "s3:PutObject",

                "s3:GetObject",

                "s3:ListBucket",

                "s3:DeleteObject"

            ],

            "Resource": [

                "arn:aws:s3:::YOUR_BUCKET_NAME",

                "arn:aws:s3:::YOUR_BUCKET_NAME/*"

            ]

        }

    ]

}

Click Review policy, give it a name (e.g., CodeBuildS3DeployPolicy), and click Create policy.

Step 6: Test the Pipeline

Your pipeline is now fully configured.

Go back to the CodePipeline console and select your pipeline.
Click Release change to trigger a new run manually.
Watch the Source and Build stages execute. You can click on the Details link in the CodeBuild stage to see the build logs in real-time.
Once the pipeline succeeds, go to the S3 website endpoint you noted in Step 1. You should see your live React application.

From now on, any git push to your main branch on GitHub will automatically trigger the pipeline and deploy the changes.

Building a Deployment Pipeline for a React Application with AWS CodePipeline

📚 Recommended AWS Resources