VueJS/ReactJS/JavaScript Single Page Application (SPA) NGINX Dockerfile

.dockerignore

################################################################################
# Docker
################################################################################

.dockerignore
docker-compose*
Dockerfile*

################################################################################
# Git
################################################################################

.git
.gitattributes
.gitignore
.keep

################################################################################
# EditorConfig
################################################################################

.editorconfig

################################################################################
# Node
################################################################################

node_modules

################################################################################
# Compiled Directories & Files
################################################################################

dist

################################################################################
# Continuous Integration & Deployment (CD & CD)
################################################################################

################################################################################
# Miscellaneous
################################################################################

LICENCE
README.md

docker-compose.production.yml

version: "3.7"

services:

  nginx:
    container_name: nginx
    build:
      context: .
      dockerfile: ./Dockerfile

Dockerfile

################################################################################
# STAGE: Prerequisites
################################################################################

FROM node:lts-alpine as prerequisites

WORKDIR /workspace

COPY package*.json ./

RUN npm ci

COPY . .

################################################################################
# STAGE: Build
################################################################################

FROM node:lts-alpine as build

WORKDIR /workspace

COPY --from=prerequisites /workspace ./

RUN npm run build:production

################################################################################
# STAGE: Serve
################################################################################

FROM nginx:stable-alpine as serve

COPY .docker/nginx/nginx.production.conf /etc/nginx/conf.d/default.conf

WORKDIR /usr/share/nginx/html

COPY --from=build /workspace/dist .

EXPOSE 80

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

nginx.production.conf

server {
  listen       80;
  server_name  localhost;

  # Redirect all requests to `index.html` - Single Page Application (SPA)
  # mode.
  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri $uri/ /index.html?$args;
  }

  # Redirect server error pages to the static page `/50x.html`.
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}