Docker is a containerization system that allows us to create containers that are isolated from the environment and destroy them whenever needed. With Docker, it is easy to spin up containers in milliseconds of time and also to delete them. Thus, Docker is one of the most popular tools for the DevOps Team.

In this article, we will see one such use case of Docker, where we can build a ReactJS application and deploy it. We will see 2 ways to achieve this.

Pre-requisite

1. Install Docker and Docker Compose

Let’s get started

1. Build and Deploy ReactJS project using Docker and Docker-Compose

In this approach, we will create ReactJS build using Docker-compose and deploy separately using NGINX or AWS S3 Bucket

Let’s create ReactJS Build first. Follow these steps

1. Pull "node" docker image, choose a version that your project is meant for  
2. Take Git clone or copy source code in /var/$projectname directory 
   Here, Replace $projectname with the actual project name
3. Add given "buildgenerator.sh" file in your project folder 

#!/bin/bash

cd /var/project_code && npm install && npm run build
rm -R /var/project_build/* || date 
cp -a /var/project_code/build/. /var/project_build

In this file,
1. It will go to the project code directory and build code using npm run build command
2. After that, it will remove the old build if exists
3. Now, it will copy new generated build to the same build folder.

In the next step, Add docker-compose.yaml file to run this

• add below content in docker-compose.yaml file

version: '3'
services:
    REACT_BUILD_GENERATOR:
        image: node:10
        volumes:
            - /usr/share/nginx/html/builded_project_directory_name:/var/project_build
            - /var/project_code:/var/project_code
        working_dir: /var/project_code
        entrypoint: /var/project_code/buildgenerator.sh
        container_name: REACT_BUILD_GENERATOR

In this file,

1. Service name is REACT_BUILD_GENERATOR
2. We have used Docker image node:10 you can choose the NodeJS version as per your requirement
3. We have mounted 2 directories here,
   1. 1st directory maps to the generated build of ReactJs project, which will be copied to /usr/share/nginx/html/builded_project_directory_name where builded_project_directory_name can be the name of your choice
      
      Later, In the same article, I’ll explain why we have chosen this directory
   2. 2nd directory maps to the actual source code of the ReactJS project, which needs to be built
4. After that, we have set the current working directory as the source code directory, because we want to build that code
5. The entrypoint of the container is buildgenerator.sh file, which is going to create a build for ReactJs project
6. Container name is REACT_BUILD_GENERATOR

Now, to generate build using this docker-compose file, run mentioned command

docker-compose up

REACT_BUILD_GENERATOR docker container’s work is to only build ReactJS code, so after build generation is complete, Docker container will be auto destroyed

At the end of this docker-compose command, we will be able to see our build files in /usr/share/nginx/html/builded_project_directory_name which is the default project directory for NGINX Web Server

You can also download build files from that folder

Our Build Generation phase is complete here, now comes the deployment part
– ReactJS build generated static files, which can be hosted with any web server such as Apache or NGINX and it can be also deployed to AWS S3 which supports static website hosting

To deploy it to same server using NGINX Web Server, follow mentioned steps

1. Create docker-compose.yaml file

version: '3'
services:
   web:
       image: nginx:latest
       container_name: nginx
       ports:
           - "80:80"
           - "443:443"
       volumes:
           - /usr/share/nginx/html:/usr/share/nginx/html
       restart: always

It will create docker container for NGINX Web server with 80 and 443 ports exposed, which is for HTTP and HTTPS traffic respectively

restart: always will restart your NGINX container if your system or docker engine restarts

You can also mount /etc/nginx directory which saves NGINX configuration files, by that way, even if you make some changes in NGINX configuration it will persist

To do that, first, copy the current NGINX configuration to the local directory and then add mount command to docker-compose file

docker cp nginx:/etc/nginx/ /etc/nginx/

Revised docker-compose.yaml file

version: '3'
services:
   web:
       image: nginx:latest
       container_name: nginx
       ports:
           - "80:80"
           - "443:443"
       volumes:
           - /usr/share/nginx/html:/usr/share/nginx/html

           - /etc/nginx:/etc/nginx
       restart: always

docker-compose restart

To deploy it on AWS S3 bucket with static website hosting, follow this video

In this 1st approach, we have build and deploy separately, in this way if you want to deploy it using S3 or to any other deployment server, you can download and upload it to AWS S3 it easily

Let’s look at 2nd approach now, here we will have just 1 Dockerfile which will build ReactJS code and deploy it using NGINX Web server

2. Build and Deploy ReactJS project using Dockerfile

1. Copy below-mentioned Dockerfile in your project directory, here we have used Multi stage Docker image

FROM node:10 as build
WORKDIR /var/project_code
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=build /var/project_code/build /usr/share/nginx/html/builded_project_directory_name
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]

Build this Dockerfile using this command

docker build -t $projectname_web .

where $projectname_web is your docker image name

After building this image, run it using the same docker-compose file as above or directly run the docker command as below

docker run --name nginx_web --restart=always -p 80:80 -p 443:443 -d $projectname_web:$tag

Here, you have already added all required build files in Docker image itself, so you won’t need to mount this directory

If you want to share this Docker image with your teammates or colleagues, simply upload it to Docker hub or AWS ECR and share it, you won’t require to share all source code, only with this Docker image, they will be able to run it.

To know how to upload it to AWS ECR and Docker hub, follow provided links

Share your views about this article in comment section below.

Do share it if you find it useful

Drafted On,
March 9th, 2021
DevOps @ identicalCloud.com

[1] Docker
[2] Install Docker and Docker Compose
[3] Launch your static website using AWS S3
[4] How to push and pull private docker images on Docker Hub
[5] How to push and pull private docker images on AWS ECR
[6] What is MultiStage Dockerfile