Automated Deployment of React Application on AWS Elastic Beanstalk with GitHub Actions: A CI/CD Pipeline Setup

5 min readJan 13, 2024

This project is carried out in the Ubuntu 22.04 version machine, so the commands used may vary for your operating system.

Step 1: Clone the project:

Clone the GitHub repository in your local system.

git clone https://github.com/sitchatt/AWS_Elastic_BeanStalk_On_EC2.git
cd AWS_Elastic_BeanStalk_On_EC2/

Step 2: Install the Docker and Docker-compose:

Run the following commands to install the docker and docker-compose.

#Update the system
sudo apt-get update

#Install Docker
sudo apt install docker.io
#adding the current user in docker group
sudo usermod -aG docker $USER
#verify the installation
docker --version
#Install Docker compose
sudo apt install docker-compose
#verify the installation
docker-compose --version

Step 3: Create a multi-stage DockerFile:

A multi-stage Dockerfile allows you to create a more efficient and smaller final Docker image by using multiple build stages. This feature is particularly useful when you have complex build requirements or dependencies during the development process but want to produce a minimalistic production image.

DockerFile for our application:

FROM node:14-alpine as builder
WORKDIR /app 
COPY package.json . 
RUN npm install 
COPY . . 
RUN npm run build
FROM nginx 
EXPOSE 80 
COPY --from=builder /app/build /usr/share/nginx/html

Explanation:

Build Stage (node:14-alpine):

FROM node:14-alpine as builder: Sets the base image for the build stage.
WORKDIR /app: Sets the working directory inside the container to /app.
COPY package.json .: Copies the package.json file to the working directory.
RUN npm install: Installs dependencies based on the package.json.
COPY . .: Copies the rest of the application code into the container.
RUN npm run build: Builds the application.

2. Final Stage (nginx):

FROM nginx: Sets the base image for the final stage.
EXPOSE 80: Exposes port 80 (standard HTTP port).
COPY --from=builder /app/build /usr/share/nginx/html: Copies the built artifacts from the build stage into the Nginx image.
The final stage doesn’t need additional steps since Nginx will serve the static content from /usr/share/nginx/html.

To build the Docker image run the below command:

docker build . -t <tag_your_image>

Step 4: Configure the AWS Elastic Beanstalk:

Amazon Elastic Beanstalk is an easy-to-use service for deploying and scaling web applications and services developed with Java, .NET, PHP, Node.js, Python, Ruby, Go, and Docker on familiar servers such as Apache, Nginx, Passenger, and IIS.

Go to AWS Elastic Beanstalk

Click on Create application.

Step 1

Choose the Web Environment and Application name.

Choose the Docker as the platform to run your application.

Select the sample application.

Choose Single instance, free tier for Presents.

Step 2

Configure the service access. Create a new service role, new service role name, and EC2 pair key.

Make sure that your IAM role has the following permissions:

Step 3:

Choose the default vpc i.e. 172.31.0.0/16.

Instance setting:

Activate your public ip address and check all the instance subnets.

Step 4:

Select the default security group.

Step 5:

Click on next or modify the configuration according to you.

Step 6

Click on review and submit. It will take 5–15 minutes to create.

After your application has been created it will provide your application domain link from where you can access your application, which would look like:

Step 5: Configure CI/CD pipeline with GitHub Actions

Create a new repository in GitHub and upload your web application code:

To create CI/CD pipeline in GitHub, click on Actions -> set up a workflow yourself.

Your Main.yml:

name: CI/CD for day87
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v1
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Deploy Static Site to S3 Bucket
        run: aws s3 sync . s3://elasticbeanstalk-us-east-1-543991822877 --delete