Dockerize React application with a Docker multi-staged build
In the current post, I am not going to compare NGINX vs. Caddy. I will show how to build a React application and package it into a Docker container with both of them. Examples code is located in cypress-testing-framework GitHub repository.
NGINX
NGINX is open-source software for web serving, reverse proxying, caching, load balancing, media streaming, and more. It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.Caddy
Caddy is an open-source, HTTP/2-enabled web server written in Go. It uses the Go standard library for its HTTP functionality. One of Caddy's most notable features is enabling HTTPS by default.Building
Docker multi-staged building is going to be used in the current post. I have slightly touched the topic in the Optimize the size of Docker images post. The main idea is to optimize the Docker images, so they become smaller. In the current post, I will show two flavors of builds. One is with the standard NPM package manager and is described in Build and run with NGINX section.The other is with Yarn package manager and is described in Build and run with Caddy section. Current examples are configured to use Yarn. I personally prefer Yarn as for local development it has very effective caching and also it has a reliable dependency locking mechanism.
Build and run with NGINX
Following Dockerfile is describing the building of the React application with NPM package manager and packaging it into NGINX image.# ========= BUILD =========
FROM node:8.16.0-alpine as builder
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install --production
COPY . .
RUN npm run build
# ========= RUN =========
FROM nginx:1.17
COPY conf/nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /app/build /usr/share/nginx/html
The keyword as builder is used to put the name to the image. Both package.json and package-lock.json are copied to the already configured work directory /app. Installation of the packages is done with npm install —production, where the —production switch is used to skip the devDependencies. In the current example, Cypress takes a lot of time to install, and it is not needed for a production build. Afterward, all project files are copied to the image. The files configured in .dockerignore are skipped. All source code files are intentionally copied to the image only after the NPM packages installation. Packages installation takes time, and they need to be installed only if the package.json file has been changed. In case of code changes only, Docker cache is used for the packages layer, this speeds up the build. The build is initiated with npm run build and takes quite a time. Now there the build artifacts are ready. Next stage is to copy the artifacts to nginx:1.17 image into /usr/share/nginx/html folder from builder image’s /app/build folder. Also, NGINX configuration file is copied.
worker_processes auto;
worker_rlimit_nofile 8192;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
sendfile on;
tcp_nopush on;
gzip on;
gzip_static on;
gzip_types
text/plain
text/css
text/javascript
application/json
application/x-javascript
application/xml+rss;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
server {
listen 3000;
server_name localhost;
root /usr/share/nginx/html;
auth_basic off;
location / {
try_files $uri $uri/ /index.html;
}
# 404 if a file is requested (so the main app isn't served)
location ~ ^.+\..+$ {
try_files $uri =404;
}
}
}
I will not go into NGINX configuration details, the configuration can be checked in details in NGINX documentation. Important in the configuration above is that gzip compression is enabled and NGINX listens to port 3000. Then with try_files unknown routes are redirected to index.html, so React can bootstrap the routes.
Build and run with Caddy
Following Dockerfile is describing the building of the React application with Yarn package manager and packaging it into Caddy image.# ========= BUILD =========
FROM node:8.16.0-alpine as builder
WORKDIR /app
RUN npm install yarn -g
COPY package.json .
COPY yarn.lock .
RUN yarn install --production=true
COPY . .
RUN yarn build
# ========= RUN =========
FROM abiosoft/caddy:1.0.3
COPY conf/Caddyfile /etc/Caddyfile
COPY --from=builder /app/build /usr/share/caddy/html
Absolutely the same logic applies here as above. Yarn is installed as an additional Linux package, then package.json and yarn.lock files are copied. It is very important to copy the yarn.lock, otherwise every run lates dependencies will be fetched, and there might be inconsistent behavior. Only production dependencies are installed with yarn install —production=true. After the application is built with yarn build it is being copied to abiosoft/caddy:1.0.3 image in /usr/share/caddy/html folder from builder image. Caddyfile is copied as well to configure Caddy.
0.0.0.0:3000 {
gzip
log / stdout "{method} {path} {status}"
root /usr/share/caddy/html
rewrite {
regexp .*
to {path} /
}
}
Caddy is configured to listen to port 3000, gzip compression is enabled and there is rewrite rule which redirects unknown paths to the main path, so React can bootstrap the router.