Refactoring to build to a busybox container

Author: philion

Dockerfile

@@ -1,7 +1,8 @@
 # Multi-stage
 # 1) Node image for building frontend assets
-# 2) nginx stage to serve frontend assets
+# 2) busybox stage to serve frontend assets
 # based on https://typeofnan.dev/how-to-serve-a-react-app-with-nginx-in-docker/
+# and https://lipanski.com/posts/smallest-docker-image-static-website
 
 FROM node:18 AS builder
 WORKDIR /app
@@ -19,13 +20,16 @@ COPY . .
 RUN npm run build
 
 
-# nginx state for serving content
-FROM nginx:alpine
+FROM busybox
 
-WORKDIR /usr/share/nginx/html
+# Create a non-root user to own the files and run our server
+RUN adduser -D static
+USER static
+WORKDIR /home/static
 
-# Copy static assets from builder stage
+# Copy the static website
+# Use the .dockerignore file to control what ends up inside the image!
 COPY --from=builder /app/build .
 
-# Containers run nginx with global directives and daemon off
-#ENTRYPOINT ["nginx", "-g", "daemon off;"]
+# Run BusyBox httpd
+CMD ["busybox", "httpd", "-f", "-v", "-p", "3000"]

compose.yml

@@ -2,5 +2,6 @@ services:
   ccn-coverage-vis:
     build:
       context: .
+    stop_grace_period: 1s
     ports:
-      - "8080:80"
+      - "8080:3000"