Creating a CICD pipeline using GITHUB Actions for REACT application & deploying the REACT application on AWS Elastic BeanStalk
Creating a CICD pipeline using GITHUB Actions for REACT application & deploying the REACT application on AWS Elastic BeanStalk
CONTENTS:
Cloning the Source Code
Installing Docker Machine
Creation of a multi-stage Docker File
Building Docker Images
Running Docker Container
Configuring ElasticBeanStalk
Configure CICD Pipeline
Triggering GitHub Actions
P.S.: Before diving into our application, kindly note that we will be using a UBUNTU OS for this project.
Cloning the Source Code
In order to get started the first step we have to clone the repository using git clone command. This will be the same directory to use till the end of our application deployment.
git clone https://github.com/adip47/AWS_Elastic_BeanStalk_On_EC2.git cd AWS_Elastic_BeanStalk_On_EC2
Installing Docker File
Once the cloning of the repository is done in the next step you have to install the docker file written in shell script called as docker.sh. This file will install Docker and enable the container for you.
chmod +x docker_install.sh sh docker_install.sh
Creating a multi-stage Docker File
Now, this is a bit complicated step. In order to get your application running, we need the REACT application and node needs to be installed in the background. In the next step we also need nginx to serve the requests through which users can access the application.
So the Docker file will be created as
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
Now what does this code snippet tell us?
The Docker file can be split into 2 stages. In the first stage the official nodejs 14 alpine image is used to build the application using npm. In the second stage the NGINX image is used to serve the application on port 80.
Building Docker Image
Use the following command to build docker image from the above docker file.
sudo docker build -t <provide_image_name>
Running the Docker Container
You can use the following command to run the docker container
sudo docker run -d -p 80:80 <image_name>
Now in order to check the status of docker container use the following command
docker ps
Configure ElasticBeanStalk
Now go to AWS console and in that go to BeanStalk and create any application in any configuration as you want.
Configuring CICD Pipeline
Make sure to add the comments
sudo mkdir -p .github/workflows cd .github/workflows sudo cp <file_path>/deploy-react.yaml
Trigger Github Actions
Create a repository in GitHub and Push all the codes under the "AWS_Elastic_BeanStalk_On_EC2" folder to the "main" branch.
As we have configured our GitHub Actions to automatically triggers as soon someone did a "push" to any commit "on" the "main" branch, so this will automatically trigger it.
And now finally you can check for your ElasticBeanStalk , you will see the application been created.