Deploy React application with Docker to DigitalOcean

So, a lot of developers face the problem when the project is ready, but they don’t know how to deploy project to production. In this article we will learn how to deploy React application with Docker and NGINX to DigitalOcean droplet.

Prepare NGINX config ⚙️

First of all, you will need to setup NGINX config for serving static files from React build.

1. Create nginx.conf file in the root directory of your project.

touch nginx.conf

Config file in Root dir

2. Write down this code into the file

Thats it! NGINX will serve our static files from Docker container.

Docker 🐳

Docker is one of the important nowadays technologies. It helps us with build, run, and share applications with containers.

1. Create Dockerfile

Dockerfile is needed to build docker images which we will use on our DigitalOcean droplet. Create it in root directory of project.

touch Dockerfile

Write down this code to file

Deploy 📦

1. Build Docker image

Make sure that you are in root directory of your project.

docker build . -t yournickname/yournameofcontainer:latest
docker push yournickname/yournameofcontainer

All the are images is pushed to https://hub.docker.com by default . So, your image will be public and anyone will able to pull it. If you want your images to be private you should create private repository on DockerHub or host your own registry.

2. Pull image from DockerHub

Connect via SSH to your DigitalOcean droplet. And then pull image:

docker pull yournickname/yournameofcontainer:latest

After that you have 2 options: Run container with Docker CLI or with Docker compose:

Docker CLI way:

docker run -p 80:80 -d yournickname/yournameofcontainer:latest

Note: Flag -p 80:80 means all requests from localhost:80 will redirect to container:80 port. So you can choose the first port, but the second one should be 80 because NGINX container runs on this port by default.

Docker Compose way:

Docker Compose is the tool that helps you to automate common Docker tasks and build microservices. It is much more useful for production than common Docker CLI. First of all, create docker-compose.yml anywhere at your droplet.

touch docker-compose.yml

Paste this code to file with Nano, Vim or cat command.

Run this commands:

docker-compose pull reactapp
docker-compose up -d reactapp

Thats all. Now you can go to 80 port of your Droplet and test your app.

Hope this article was useful for you 👨‍💻

Written by Kletskov Gleb, frontend software engineer in Mail.ru Group.