Complete CI/CD with GitHub Actions for React application | Deploy React app to AWS Elastic Beanstalk

Project Description:

In this project, we will set up a Continuous Integration and Continuous Deployment (CI/CD) pipeline for deploying a React application to AWS Elastic Beanstalk using GitHub Actions. The CI/CD pipeline will automate the build, test, and deployment processes, allowing for efficient and reliable deployment of our application.

Hello Learners,

Hope you are all safe and doing well. Let's start the Project.

Note: For this project, we will use the "Ubuntu" machine. Commands may be different if you are using a different OS.

Step 1: Clone the Source Code

If you're using Ubuntu, Git is likely pre-installed. Clone the repository with the following commands:

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

Step 2: Install Docker

After cloning the code, run the provided shell script to install and enable Docker:

bashCopy codechmod +x docker_install.sh
sh docker_install.sh

(Use sudo if you encounter any errors)

Step 3: Create a Multi-Stage Dockerfile

Create a Dockerfile with multi-stage build for the application:

DockerfileCopy codeFROM 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

Step 4: Build Docker Image

Build the Docker image:

bashCopy codesudo docker build -t <provide_image_name> .

Step 5: Run Docker Container

Run the Docker container:

bashCopy codesudo docker run -d -p 80:80 <image_name>

Step 6: Configure Elastic BeanStalk

Navigate to AWS Elastic BeanStalk and create an application with the specified details.

Step 7: Configure CI/CD Pipeline with GitHub Actions

Move the deploy-react.yaml file to .github/workflows directory and update the parameters.

Adding Secrets to GitHub Actions (Optional)

Add AWS access key and secret access key as repository secrets in GitHub settings.

Step 8: Trigger GitHub Action CI/CD

Push the code to the main branch to trigger the GitHub Actions workflow.

Step 9: Checking our Achievement

Check the Elastic Beanstalk link to confirm the deployment.

Conclusion

Congratulations on successfully deploying your React application to AWS Elastic Beanstalk using GitHub Actions! You've streamlined your deployment process and demonstrated your proficiency in DevOps practices. Cheers to your accomplishments and readiness for future challenges!