Skip to content

Instantly share code, notes, and snippets.

@OleksandrKucherenko
Created August 30, 2022 10:31
Show Gist options
  • Save OleksandrKucherenko/e7e561f472860c1f98c100eca6ee86e2 to your computer and use it in GitHub Desktop.
Save OleksandrKucherenko/e7e561f472860c1f98c100eca6ee86e2 to your computer and use it in GitHub Desktop.
Dockerfile that compiles/build React App and deploy it to the NGINX server
## 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
# ```
#
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment