Serve React Website Using Caddy and Docker

Build a simple react website, then serve the static files from caddy webserver running in a docker container.

Create a react project using create-react-app, then inside the project folder create Dockerfile and Caddyfile

Dockerfile to build a docker image
Caddyfile for the caddy configuration

In Caddyfile we are configuring it to work as static file server, from /srv directory at port 80

:80

root * /srv
file_server

Then in Dockerfile we are going to build the static files using node image then serving those files from caddy image

#using node image as build stage
FROM node:latest AS build

WORKDIR /src
COPY package.json .

RUN npm install

COPY . .

# building static files
RUN npm run build

# using caddy image
FROM caddy:latest

COPY Caddyfile /etc/caddy/Caddyfile

# copying build static file from build stage
COPY --from=build /src/build /srv

EXPOSE 80

After that we can create a docker image using docker build command

docker build -t react-website .

Then use the react-website image to run a docker container.

docker run -d -p 4000:80 -v caddy_data:/data react-website

Now we can see our website in http://localhost:4000.

Things to consider

Create a .dockerignore file replicating your .gitignore file.
In caddy docker hub page they’ve recommended to mount a persistent volume to /data, so I’ve mounted a named volume caddy_data to the container.