Simple, Optimized and Secure Dockerizing of a React App

Dockerizing of a React App

Have you ever wondered whats the best way to Dockerize your React App?
You might find 1000s of articles that guide you on how to dockerize your app but how simple, optimized and secure are those? How much size does your final Docker image occupy?

Well, after going through a lot of articles and documentations I finally found the secret formula for Dockerizing react apps.

This article will be useful to you :
1) If you want to Dockerize yours react app.

2) If you want to reduce your current Docker image size.

3) If you want to optimize your Docker image build process.

4) If you want to secure your project source code present inside Docker Image.

If you are already aware of Docker, you can skip this section:

What is Docker?
Docker is a tool designed to make it easier to create, deploy, and run applications by using containers.

Who is Docker for?
Docker is a tool that is designed to benefit both developers and system administrators, making it a part of many DevOps (developers + operations) toolchains.

What is dockerfile?
A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image.

Getting started
Here are some resources that will help you get started using Docker in your workflow. Docker provides a web-based tutorial with a command-line simulator that you can try out basic Docker commands with and begin to understand how it works. There is also a beginners guide to Docker that introduces you to some basic commands and container terminology. Or watch the video below for a more in-depth look:

Source: https://opensource.com/resources/what-docker

Place the Dockerfile at the root of your project and write all the below commands to assemble your docker image.

Step 1:
 
# Get the base image, you can choose your node version according to your requirement
FROM node:10.6.0-alpine as build-stage

Here I am choosing the Alpine version of the node as the base image so that I have a straightaway advantage of Size reduction.
You can get some advantages of it in this article. https://nickjanetakis.com/blog/the-3-biggest-wins-when-using-alpine-as-a-base-docker-image

Step 2:
# Set working directory
WORKDIR /usr/src/app
# Add `/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

Here I am Setting up the working directory and setting up the Env which will help us during installing the npm packages.

Step 3:
# Copy project files to /usr/src/app/
COPY . /usr/src/app/

I am copying the entire project to go inside the docker images /usr/src/app/ location

Step 4:
# Add git and node command line tools to help the packages install and then install the packages
RUN apk add --no-cache git && apk add python make g++ && npm i --silent

These are 3 different commands combined together. For every command, Docker creates a separate layer of images so to avoid multiple layers I have combined them.

1. apk add — no-cache git => Git is required for few npm packages to install. Since the Alpine version does not come up with bloatware we need to install packages we require manually.
2. apk add python make g++ => Installing the command line tools which are also required for few npm packages.
3. npm i — silent => Since we are using nodes alpine version no need to install node again we can directly do npm install. –silent will reduce the warnings thrown.

Step 5:
# Get the production files ready
RUN npm run build --silent

This will give us the files which are ready to be deployed.

Step 6:
# Get the base image
FROM node:10.6.0-alpine
# Get the production files to the location  /usr/src/app/build
COPY --from=build-stage /usr/src/app/build/ /usr/src/app/build

Here I am copying the production files which were ready before and discarding the rest of the project files. It will be copied to a new Image that is freshly created from the base image. This ensures our project files are not copied into the image. Only production files are copied.

Step 7:
 
# Server for the application
RUN npm install -g serve
# Start app
CMD serve -s /usr/src/app/build -l 8004

Serve is the server we are using because of the many advantages it provides out of the box. So we are installing the serve npm package and running it in the 8004 port.

If you have made it up to this point than congrats, now you can have a Simple, Optimized and Secure Dockerizing of a React App.

Your final Dockerfile would be looking like below:

# Get the base image
FROM node:10.6.0-alpine as build-stage
# Maintainer of the file
LABEL author="Gudihindala, Anil <anilgudihindala@gmail.com>"
# Set working directory
WORKDIR /usr/src/app
# Add `/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# Copy project files to /usr/src/app/
COPY . /usr/src/app/
# Add git and node command line tools to help the packages install and then install the packagesRUN apk add --no-cache git && apk add python make g++ && npm i --silent
# Get the production files ready
RUN npm run build --silent
# Get the base image
FROM node:10.6.0-alpine
# Get the production files to the location  /usr/src/app/build
COPY --from=build-stage /usr/src/app/build/ /usr/src/app/build
# Server for the application
RUN npm install -g serve
# Start app
CMD serve -s /usr/src/app/build -l 8004

If you feel the post was great, please clap for the post. Click the clap button on the post page. You can clap up to 50 times per post.