Optimize Docker configuration and Nginx setup for production

simplq/.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+npm-debug.log
+build
+dist
+.git
+.github
+.env
+.idea
+.vscode

simplq/Dockerfile

@@ -1,22 +1,40 @@
 FROM node:14.16-alpine AS build
 
+# Pass the backend URL through build arg
 ARG BASE_URL="https://devbackend.simplq.me/v1"
 
-RUN echo ${BASE_URL}
+# Setup working directory early
+WORKDIR /app
 
-RUN echo "BASE_URL=${BASE_URL}" > .env
+# Only copy dependency files first to utilize Docker layer caching
+COPY package.json package-lock.json ./
+RUN npm ci
 
-WORKDIR /build
+# Copy the rest of the application
 COPY . .
 
-RUN npm install
-RUN npm run build
+# Write the environment variable to .env
+RUN echo "BASE_URL=${BASE_URL}" > .env
+
+# Build the react application
+RUN npm run config && npm run build
 
+# Next stage: lightweight web server
 FROM nginx:1.19.6-alpine
 
+# Copy custom nginx configuration
 COPY nginx.conf /etc/nginx/nginx.conf
 
+# Set working directory to standard nginx html directory
+WORKDIR /usr/share/nginx/html
+
+# Clean the default html directory
+RUN rm -rf ./*
+
+# Copy the build artifacts from the previous stage
+COPY --from=build /app/build/ .
+
 EXPOSE 80
 
-WORKDIR /app
-COPY --from=build  /build/build/ .
+# Run nginx in foreground
+CMD ["nginx", "-g", "daemon off;"]

simplq/nginx.conf

@@ -1,20 +1,33 @@
+user  nginx;
+worker_processes  1;
+
 events {
-    worker_connections 1024;
+    worker_connections  1024;
 }
 
 http {
-    include  mime.types;
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
 
     server {
-        root /app;
+        listen       80;
+        server_name  localhost;
+
+        root /usr/share/nginx/html;
+        index index.html;
 
+        # Route all traffic to index.html for React Router SPA
         location / {
+            try_files $uri $uri/ /index.html;
         }
 
-        location /images/ {
-        }
-
-        location /static/ {
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires max;
+            log_not_found off;
         }
     }
 }