Serving Single-Page React App with Docker

If you build a single-page application using React while your app only gets backend data through API access, it will be convenient to utilize the Create-React-App toolchain. For serving your app to the public, you actually just need to serve the generated static files. Serving static files can be easier when you utilize a container for shipping a web server.

Initiate react project then build the app.

npx create-react-app my-app
cd my-app
npm run build

Create Nginx server configuration for your app site.conf.

server {
  listen 80;
  server_name my-app.localhost;
  index index.html;
  root /app;
  error_log  /var/log/nginx/error.log;
  access_log /var/log/nginx/access.log;
  try_files $uri $uri/ index.html =404;
}

Create a Dockerfile for building containerized web server.

# syntax=docker/dockerfile:1
FROM nginx:latest
WORKDIR /app
COPY ./build .
COPY ["./site.conf", "/etc/nginx/conf.d/"]

Build the image and run the container.

docker build -t my-service .
docker run -d -p 80:80 my-service

If you are on a development host and need to bind-mount the application files, you can use this command for running the container.

docker run -d -p 80:80 -v "$(pwd)/build:/app" -v "$(pwd)/site.conf:/etc/nginx/conf.d/site.conf" my-service