convert dockerfile to three stage to shrink image size, and add serve static content via nginx

Author: iancdavis

Dockerfile

@@ -1,31 +1,48 @@
-FROM node:19-alpine
+# Stage 1: Build
+FROM node:19-alpine as build
 
-#python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
+# python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
 RUN apk add --no-cache --virtual .gyp \
          python3 \
          make \
-         g++ 
+         g++
 
 WORKDIR /app
 
 COPY package*.json ./
 
-COPY app/dist /app
+RUN npm install --no-install-recommends
 
-COPY .env .env
+COPY . .
 
-COPY server ./server
+# Stage 2: Node Server
+FROM node:19-alpine as node_server
 
-COPY config.js ./config.js
+WORKDIR /app
 
-RUN npm install --no-install-recommends
+COPY --from=build /app/package*.json ./
+
+RUN npm install --no-install-recommends --only=production
+
+COPY --from=build /app/.env .env
+COPY --from=build /app/config.js ./config.js
+COPY --from=build /app/server ./server
 
 EXPOSE 5656
 
 ENV IS_DOCKER true
 
 CMD [ "npm", "start" ]
 
-# create docker image: "docker build -t reactype-container ." Note: if you want reactype-container with a different name (must be all lowercase)
-# run docker container: "docker run -d -p 5656:5656 reactype-container" docker run -d -p 5656:5656 reactype-v15
-# comment out window.api.formatCode(), but will break it for electron app.
+# Stage 3: Nginx Server
+FROM nginx:alpine as nginx_server
+
+# Copy the build output to the Nginx html directory
+COPY --from=build /app/app/dist /usr/share/nginx/html
+
+# Copy the Nginx configuration file
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile-1stage

@@ -0,0 +1,31 @@
+FROM node:19-alpine
+
+#python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
+RUN apk add --no-cache --virtual .gyp \
+         python3 \
+         make \
+         g++ 
+
+WORKDIR /app
+
+COPY package*.json ./
+
+COPY app/dist /app
+
+COPY .env .env
+
+COPY server ./server
+
+COPY config.js ./config.js
+
+RUN npm install --no-install-recommends
+
+EXPOSE 5656
+
+ENV IS_DOCKER true
+
+CMD [ "npm", "start" ]
+
+# create docker image: "docker build -t reactype-container ." Note: if you want reactype-container with a different name (must be all lowercase)
+# run docker container: "docker run -d -p 5656:5656 reactype-container" docker run -d -p 5656:5656 reactype-v15
+# comment out window.api.formatCode(), but will break it for electron app.

Dockerfile-2stage

@@ -0,0 +1,36 @@
+# Stage 1: Build
+FROM node:19-alpine as build
+
+# python: required dependency for node alpine, shrinks image size from 2.17GB to 1.67GB
+RUN apk add --no-cache --virtual .gyp \
+         python3 \
+         make \
+         g++
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install --no-install-recommends
+
+COPY . .
+
+# Stage 2: Runtime
+FROM node:19-alpine as runtime
+
+WORKDIR /app
+
+COPY --from=build /app/package*.json ./
+
+RUN npm install --no-install-recommends --only=production
+
+COPY --from=build /app/.env .env
+COPY --from=build /app/config.js ./config.js
+COPY --from=build /app/server ./server
+COPY --from=build /app/app/dist /app
+
+EXPOSE 5656
+
+ENV IS_DOCKER true
+
+CMD [ "npm", "start" ]

app/src/components/top/NavBarButtons.js

@@ -132,7 +132,7 @@ function navbarDropDown () {
         dispatch(toggleDarkMode());
         // Add your logic to update the style and theme based on darkMode
         isDarkMode ? dispatch(setStyle(null)) : dispatch(setStyle({ backgroundColor: '#21262c' }));
-        props.setTheme(isDarkMode);
+        // props.setTheme(isDarkMode);
       };
 
       const handleClose = () => {

docker-compose.yml

@@ -0,0 +1,15 @@
+version: '3'
+
+services:
+  web:
+    build:
+      context: .
+      target: nginx_server
+    ports:
+      - '80:80'
+  api:
+    build:
+      context: .
+      target: node_server
+    ports:
+      - '5656:5656'

nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index-prod.html index.htm;
+        try_files $uri $uri/ /index-prod.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}