Deploying ReactJS With Docker

How to package ReactJS with Docker and deploy it to Digital Ocean

Clone Create React App

npx create-react-app reactdocker;
cd reactdocker;
npm start;
React Working On Port 3000

Creating The Environment

docker run -it -p 3000:3000 -p 80:80 -v $PWD:/var/www/localhost/htdocs --name reactdocker alpine /bin/sh
cd /var/www/localhost/htdocs;
# may take a few seconds
rm -rf node_modules;
apk add nodejs;
apk add npm;
npm install;
npm start;# [Expected Output]# Compiled successfully!# You can now view reactdocker in the browser.# Local:            http://localhost:3000/
# On Your Network: http://172.17.0.2:3000/
# Note that the development build is not optimized.
# To create a production build, use npm run build.
Same React Output But From Docker
# press ctrl + c
npm run build;
cd build;
ls -al;
apk add nginx;
# add nano to edit the file
apk add nano;
# modify the nginx default.conf file
nano /etc/nginx/conf.d/default.conf;
# This is a default site configuration which will simply return 404, preventing
# chance access to any other virtualhost.
server {
listen 80 default_server;
listen [::]:80 default_server;
# Everything is a 404
location / {
return 404;
}
# You may need this to prevent return 404 recursion.
location = /404.html {
internal;
}
}
server {
listen 80 default_server;
listen [::]:80 default_server;
location / {
root /var/www/localhost/htdocs/build;
# this will make so all routes will lead to
# index.html so that react handles the routes
try_files $uri $uri/ /index.html;
}
# You may need this to prevent return 404 recursion.
location = /404.html {
internal;
}
}
mkdir /run/nginx;
nginx -t;# [Expected Output]
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful
nginx;
Nginx Serving React Build Folder
Nginx Routing All Routes To React index.html

Create Dockerfile

# create a new config directory
mkdir config;
# copy default.conf to config/default.conf
docker cp reactdocker:/etc/nginx/conf.d/default.conf config/default.conf;
# now we can destroy the container
docker rm -f reactdocker;
FROM alpineEXPOSE 80ADD config/default.conf /etc/nginx/conf.d/default.confCOPY . /var/www/localhost/htdocsRUN apk add nginx && \
mkdir /run/nginx && \
apk add nodejs && \
apk add npm && \
cd /var/www/localhost/htdocs && \
rm -rf node_modules && \
npm install && \
npm run build;
CMD ["/bin/sh", "-c", "exec nginx -g 'daemon off;';"]WORKDIR /var/www/localhost/htdocs
docker build . -t reactdocker
docker run -it -d -p 80:80 --name rdocker reactdocker;
React running from Docker container image

Optimize Docker Image

node_modules
FROM alpineEXPOSE 80ADD config/default.conf /etc/nginx/conf.d/default.confCOPY . /var/www/localhost/htdocsRUN apk add nginx && \
mkdir /run/nginx && \
apk add nodejs && \
apk add npm && \
cd /var/www/localhost/htdocs && \
npm install && \
npm run build && \
apk del nodejs && \
apk del npm && \
mv /var/www/localhost/htdocs/build /var/www/localhost && \
cd /var/www/localhost/htdocs && \
rm -rf * && \
mv /var/www/localhost/build /var/www/localhost/htdocs;
CMD ["/bin/sh", "-c", "exec nginx -g 'daemon off;';"]WORKDIR /var/www/localhost/htdocs
docker images | grep "reactdocker";# [Expected Output]
# reactdocker latest 3c160b1a5941 16 minutes ago 489MB
docker build . -t reactdocker;# and see the size difference
docker images | grep "reactdocker";
# [Expected Output]
# reactdocker latest 669c991b23b6 20 seconds ago 36.6MB
docker run -it -d -p 80:80 --name rdocker reactdocker
Optimized React Docker Container
docker tag reactdocker {docker-hub-username}/reactdocker;
docker push {docker-hub-username}/reactdocker;

Create Docker Digital Ocean Droplet

Digital Ocean Create Droplet
Select pre-configured Docker One-Click app
Choose a small size because this is just a demo
Choose a region that is close to your for speed
Make sure you’re ssh is set up correctly and create the droplet
Copy Droplet IP address once complete

Deploy Container

# replace this droplet IP address with yours
ssh root@142.39.140.136;
docker run -it -d -p 80:80 --name rdocker {docker-hub-username}/reactdocker;
React running on Digital Ocean with Docker

What Else We Could Do

Other Articles I’ve Written

Web Application / Full Stack JavaScript Developer & Aspiring DevOps