1. Introduction
Deploying a React website using Docker can simplify your development workflow, ensuring consistency across different environments. In this guide, we will go through the process of containerizing a React application with Docker, setting up a Dockerfile, and managing the container lifecycle. Whether you are new to Docker or looking to enhance your deployment strategy, this tutorial will provide you with the essential steps to get your React app running in a Docker container efficiently and reliably. Let's get started!
2. Installing Docker
Installing Docker is straightforward, and you can easily search for instructions on Google or visit the official Docker website.
For quicker and more convenient installation, you can refer to the following articles based on your environment:
After successful installation, check if Docker is running by using the command docker -v
If the Terminal outputs a line similar to the one below, Docker has been installed successfully.
Docker version 24.0.6, build ed223bc
3. Installing Docker Compose Plugin
First, check if any version of Docker Compose is already installed using the command docker-compose -v
If the Terminal outputs a line similar to the one below, Docker Compose has been installed successfully.
Docker Compose version v2.23.0-desktop.1
If Docker Compose is not installed, you can refer to the following sources to install the Docker Compose plugin:
4. Creating Configuration Files
4.1 Configuring NGINX
First, create a file named nginx.conf
in the root directory of your project with the following content:
# nginx.conf server { listen 80; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }
The purpose of this file is to configure Nginx
, which we will install in the dockerfile
. When a request comes to port:80
, this configuration will point to the index.html
file.
4.2 Creating the Dockerfile
Create a file named dockerfile
with the following content:
# dockerfile FROM node:18-alpine as build WORKDIR /app COPY . . RUN yarn RUN yarn build FROM nginx:1.22-alpine as production COPY nginx.conf /etc/nginx/conf.d/default.conf COPY /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
In this configuration, pay attention to the following two main commands:
COPY nginx.conf /etc/nginx/conf.d/default.conf
This line copies the nginx.conf
file we created earlier into the container.
COPY /app/build /usr/share/nginx/html
This command copies the project's build from build stage into nginx build folder.
Note:
Typically, when building a website with React
, after running the build command, the source generates a folder named build. You can change the folder name according to your current project.
4.3 Creating the Docker Compose File
Create a file named docker-compose.yml
with the following content:
# docker-compose.yml version: "3.8" services: nginx: image: project_name restart: always build: . ports: - "8080:80"
Note that the port mapped to the outside is port:80
, which is the port of Nginx that we configured earlier. When a request comes to port:8080
of the container, it corresponds to port:80
inside the container and will then be directed to the index.html
file of the build directory that we copied earlier.
4.4 Creating the Docker Ignore File
Create a file named .dockerignore
with the following content:
node_modules build
5. Running the Container
After setting up everything, you need to run the following command:
docker-compose up -d --build
Note:
You need to run the corresponding build command in your project beforehand.
Then you can access localhost:8080
to see the result.
To optimize further, you can write a script to save time.
#!/bin/sh git pull origin docker-compose up -d --build # deploy.sh
Each time you want to deploy, just run the command bash deploy.sh
. This script simply pulls the latest code, installs new npm packages if any, then builds the source and rebuilds the container.
6. Conclusion
After this tutorial, I hope you have learned a new way to deploy a client-side website. Apart from React
as demonstrated, other frameworks like Vue
, Angular
, etc., can be deployed similarly since they are also client-side frameworks.
I hope you successfully implement this. In the next article, I will guide you on deploying a server-side website, such as: NextJS
, NuxtJS
,...