Containerzing the ReactApp with Docker Buildx

Steps:

Create an Ec2 instance as follows

Connect the EC2 instance using the ssh with pem key

NodeJs Installation

Download and import the Nodesource GPG key

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

Create deb repository

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

Run Update and Install

sudo apt-get update
sudo apt-get install nodejs -y

verify the node and npm versions

node --version
npm --version

Create react app

First, create your application. Install the application with the following command:

npx create-react-app my-react-app

Now change the directory to the created application:

cd my-react-app

I will go ahead and edit a single file here. Navigate to the /src/App.js file and add the following line:

<p>Sample React App by Aliens</p>

Start the Server

npm start

Open the port 3000 in the ec2 instance security group.

Access the application with public Ip address and port 3000.

Docker Installation

Install the docker

sudo apt-get update
sudo apt-get install docker.io -y

Check the status of the docker

systemctl status docker

Add the ec2 user to the docker group and update the docker group.

sudo usermod -aG docker $USER
newgrp docker

Dockerize the application

Simply saying, AWS EC2 is a cloud service. To access your image, you must also host it on the internet. DockerHub is the right place to do that.

Let’s build the image and store its artefacts in DockerHub:

Log in to Docker Hub:

Login to the dockerhub

docker login

Now, you must ensure you have a Dockerfile to build an image for your specific application.

Create a Dockerfile in the my-react-app folder

FROM node:alpine
WORKDIR /app
COPY package.json ./
RUN npm install
COPY ./ ./
CMD ["npm", "start"]

create .dockerignore file in the my-react-app folder

node_modules
package-lock.json

Install the docker buildx tool kit.

# Download the buildx binary
mkdir -p ~/.docker/cli-plugins
wget -O ~/.docker/cli-plugins/docker-buildx https://github.com/docker/buildx/releases/download/v0.6.3/buildx-v0.6.3.linux-amd64

# Make the binary executable
chmod a+x ~/.docker/cli-plugins/docker-buildx

Check the docker buildx version

docker buildx version

The docker buildx create --use command is used to create and activate a new builder instance with Docker Buildx. Using docker buildx create --use is not mandatory, but it is a common practice when working with Docker Buildx

docker buildx create --use

Build the docker image with buildx tool and push it to the dockerhub as follows

docker buildx build \
  --platform linux/amd64,linux/arm64 \
  --tag princeram/my-react-app:latest \
  --push \
  .

Run the react image as follows

To view the list of images as follows

docker images

To view the list of running containers as follows

Access the react application as follows

Thanks for reading! I hope you found this introduction to Go helpful and informative.

I’m always happy to connect with fellow tech enthusiasts and answer any questions you may have. Don’t forget to follow me for more updates on tech, programming, and more.😄😄