Day 87 (Project-8): Deploying React App on AWS Elastic BeanStalk with GitHub Actions


2 min read

Day 87 (Project-8): Deploying React App on AWS Elastic BeanStalk with GitHub Actions

Project Description ๐Ÿ“

In this project, we embark on setting up a Continuous Integration and Continuous Deployment (CI/CD) pipeline to deploy a React application on AWS Elastic BeanStalk using GitHub Actions. Let's dive into the details and witness how GitHub Actions streamline our deployment process efficiently.


Hey there, fellow learners! Hope you're all safe and thriving. Let's dive straight into this exciting project where we'll unleash the power of CI/CD for deploying our React application seamlessly.

Step 1: Clone the Source Code ๐Ÿ› ๏ธ

Assuming you're on an Ubuntu machine, let's clone the repository containing our React application code:

bashCopy codegit clone
cd AWS_Elastic_BeanStalk_On_EC2

Step 2: Install Docker ๐Ÿณ

Next up, let's install and enable Docker by running the provided shell script:

bashCopy codechmod +x

Step 3: Create a Multi-Stage Dockerfile ๐Ÿ“ฆ

Craft a Dockerfile with multi-stage build to package our React application:

DockerfileCopy codeFROM node:14-alpine as builder
COPY package.json . 
RUN npm install 
COPY . . 
RUN npm run build

FROM nginx 
COPY --from=builder /app/build /usr/share/nginx/html

Step 4: Build Docker Image ๐Ÿ—๏ธ

Let's build the Docker image for our React application:

bashCopy codesudo docker build -t <provide_image_name> .

Step 5: Run Docker Container ๐Ÿšข

Time to launch our Docker container:

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

Step 6: Configure Elastic BeanStalk ๐ŸŒ

Head over 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 accordingly.

Adding Secrets to GitHub Actions (Optional) ๐Ÿ”’

For added security, you can 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 ๐ŸŽ‰

Verify the Elastic Beanstalk link to confirm the deployment of our React application.

Conclusion ๐ŸŽŠ

Congratulations on successfully deploying our React application to AWS Elastic BeanStalk using GitHub Actions! We have streamlined the deployment process and showcased our expertise in DevOps practices. Here's to our achievements and readiness for future challenges!

Let's keep innovating and learning together! #React #AWS #GitHubActions #ElasticBeanStalk #CI/CD #DevOps #Day86 ๐ŸŒŸ๐Ÿ’ป