React js web app deployment in Docker

React js web app deployment in Docker

Date: 22-02-2021

Step 1: Create a Dockerfile in the directory root with below content based on your deployment procedure.

=====
FROM node:12.2.0-alpine as react_build

#also say

WORKDIR /home/ubuntu/workspace/

#copy the react app to the container

COPY . /home/ubuntu/workspace/

# #prepare the container for building react

RUN npm install –silent

RUN npm install react-scripts@3.0.1 -g –silent

RUN npm run build

# Setup static server

FROM nginx:stable-alpine

COPY –from=react_build /home/ubuntu/workspace /build /usr/share/nginx/html

COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD [“nginx”, “-g”, “daemon off;”]
=====

Step 2: Create nginx.conf file in nginx directory with below content.
=====
server {

  listen 80;

  server_name website name;

location / {

    root   /usr/share/nginx/html;

    index  index.html index.htm;

    try_files $uri $uri/ /index.html;

  }

}

=====

Step 3: Run the below command for docker container creation.
    # sudo docker build –rm -t container name .

Step 4: Run the below command to run the container.
    # sudo docker run -d -p 3000:80 -t container name

Step 5: You can check the website status on the browser.
              http://website name:3000