Dockerfile that compiles/build React App and deploy it to the NGINX server

Dockerfile

## build production version
# https://hub.docker.com/_/node
# FROM node:16 as build-dev
# FROM node:16-alpine as build-dev
FROM cypress/base:16 as build-dev

WORKDIR /app

# copy project source code into docker container folder
# .dockerignore configures what to skip during the execution
COPY ./ /app/

# expected: yarn 1.22.17 (for Zero-Install should be 3.2.1)
# print tree of files for confirming right .dockerignore filtering
# Try to load env files in such order: .env.production.local, .env.local, .env.production, .env
RUN cd /app \
  && set -x \
  && echo 'YARN VERSION IN BUILDER:' \
  && yarn --version \
  && echo "Files Tree:" \
  && (find . | sort | sed -e "s/[^-][^\/]*\// |/g" -e "s/|\([^ ]\)/|-\1/" >files-tree.log) \
  && echo "Exclude cypress tool:" \
# remove packages that prevent alpine usage
  && (sed -i.bak "s#\"cypress\": \"\^10.*\",##g" package.json) \
  && (sed -i.bak "s#\"weak-napi\": \"\^2.*\",##g" package.json) \
#  && cat package.json \
  && echo "Install dependencies:" \
  && yarn install \
  && echo "Inject CI variables into build:" \
  && cp -f .env.ci .env.production.local \
  && echo "Build release files:" \
  && yarn build

## real hosting

# https://hub.docker.com/_/nginx,
# nginx:alpine ~> 1.21.6-alpine
# nginx:latest ~> 1.21.6
FROM nginx:alpine

WORKDIR /usr/share/nginx/html

# Remove default nginx static assets
RUN rm -rf ./*

# copy results of build step into nginx hosting folder
COPY --from=build-dev /app/build/ /usr/share/nginx/html

# Copy the default.conf & nginx.conf provided by app
COPY --from=build-dev /app/config/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build-dev /app/config/nginx/nginx.conf /etc/nginx/nginx.conf

# Set up k8s health and liveness endpoints, static files.
# Create {www}/management/{health|liveness}
RUN mkdir -p /usr/share/nginx/html/management \
  && touch /usr/share/nginx/html/management/health \
  && touch /usr/share/nginx/html/management/liveness

EXPOSE 8080

ENTRYPOINT [ "nginx", "-g", "daemon off;" ]

#
# Refs:
# - https://tiangolo.medium.com/react-in-docker-with-nginx-built-with-multi-stage-docker-builds-including-testing-8cc49d6ec305
# - https://typeofnan.dev/how-to-serve-a-react-app-with-nginx-in-docker/
# - Reverse proxy : https://www.section.io/engineering-education/build-and-dockerize-a-full-stack-react-app-with-nodejs-and-nginx/
# - https://github.com/yarnpkg/berry/discussions/3201
#
# How to run:
# ```bash
# docker build -t {tag_name} .        # build you image and tag it with a custom name
# docker run -p 8080:8081 {tag_name}  # execute container, open http://localhost:8081 afer that
# docker ps                           # list executed/live containers
# docker logs {tag_name}              # see container logs
# # Other commands:
# docker stop {tag_name}              # stop container execution
# docker kill {tag_name}              # kill running instance
# docker container rm {tag_name}      # delete container
# ```
#