refactoring the dockerfile for multistage build and deployment using nginx. added a compose.yml as a working example

Author: philion

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -1,14 +1,31 @@
-FROM node:16
+# Multi-stage
+# 1) Node image for building frontend assets
+# 2) nginx stage to serve frontend assets
+# based on https://typeofnan.dev/how-to-serve-a-react-app-with-nginx-in-docker/
 
-# Create app directory
-WORKDIR /usr/src/app
+FROM node:18 AS builder
+WORKDIR /app
 
-# Install app dependencies
-COPY package*.json ./
+# Copy just package info for install
+COPY package*.json .
 
+# install node modules
 RUN npm install
-# Bundle app source
+
+# copy files for full build
 COPY . .
 
-EXPOSE 3000
-CMD [ "npm", "start" ]
+# build the static content
+RUN npm run build
+
+
+# nginx state for serving content
+FROM nginx:alpine
+
+WORKDIR /usr/share/nginx/html
+
+# Copy static assets from builder stage
+COPY --from=builder /app/build .
+
+# Containers run nginx with global directives and daemon off
+#ENTRYPOINT ["nginx", "-g", "daemon off;"]

compose.yml

@@ -0,0 +1,6 @@
+services:
+  ccn-coverage-vis:
+    build:
+      context: .
+    ports:
+      - "8080:80"