Static website in a Docker container, built with Nodejs tools

Dockerfile

# This Dockerfile uses multi-stage builds: https://docs.docker.com/engine/userguide/eng-image/multistage-build/
# The builder image has all the dependencies necessary to assemble the website.
FROM node:8-alpine as builder

# The COPY operation looks to see if any of the source files changed since the last time the container was built.
# If not changed, it uses the cached copy of this operation. If it is changed, it performs the copy and all
# following steps for the builder, and for the COPY operation in the nginx image below.
COPY ./package.json ./package-lock.json /code/frontend/
WORKDIR /code/frontend
RUN npm install
# Now copy the rest of the codebase. This split of the steps ensures that the npm install stage will only be
# repeated if the package.json or package-lock.json files have changes, and not just because a custom file changes.
# If we do have custom code changes as a result of this second COPY operation, the build process will re-run.
COPY . /code/frontend
RUN npm run build

# The nginx image only has "builder" data or dependencies that are explcitly copied in.
FROM nginx:1.13-alpine
COPY --from=builder /code/frontend /usr/share/nginx/html

# Example docker-compose service configuration:
#  frontend:
#    build: frontend
#    container_name: outrigger_dashboard_frontend
#    labels:
#      com.dnsdock.name: static-dash
#      com.dnsdock.image: outrigger
#    network_mode: bridge
#    working_dir: /usr/share/nginx/html

Using this in Production: There may be a few things I'd add to the nginx container, such as a HEALTHCHECK and so on so orchestration/LB systems know what to do with it.

If you need to host a webserver to be the canonical source of truth for a static site, this certainly works, however in practice I might configure a CloudFlare + S3 hosting and have the build process push the built artifact along.

The downside of trying to use this container for local development is that it does not provide you with the builder environment as a place where you can run operations or extract downloaded or derived files. If you remove the nginx definition, you end up with a "pure" node container with all the code ready to go, at that point you could volume mount over it as needed.