Refactored DockerFile to improve efficiency

.eslintignore

@@ -1,5 +1,8 @@
 # Contains the PDF file of the Tag as JSON string, thus does not need to be linted
 src/components/CheckIn/tagTemplate.ts
 package.json
 package-lock.json
 tsconfig.json
+docker-compose.yml
+Dockerfile
+nginx.conf

Dockerfile

@@ -1,15 +1,22 @@
-FROM node:20.10.0 AS build
-
-WORKDIR /usr/src/app
+# Step 1: Build Stage
+FROM node:20.10.0-alpine AS builder
+WORKDIR /talawa-admin
 
 COPY package*.json ./
-
 RUN npm install
 
 COPY . .
 
+ENV NODE_ENV=production
+
 RUN npm run build
 
-EXPOSE 4321
+#Step 2: Production
+FROM nginx:1.27.3-alpine AS production
+
+ENV NODE_ENV=production
 
-CMD ["npm", "run", "serve"]
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /talawa-admin/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml

@@ -0,0 +1,18 @@
+services:
+  app:
+    build:
+      context: .
+    ports:
+      - '${PORT}:80'
+    environment:
+      - REACT_APP_TALAWA_URL=${REACT_APP_TALAWA_URL}
+      - REACT_APP_BACKEND_WEBSOCKET_URL=${REACT_APP_BACKEND_WEBSOCKET_URL}
+      - PORT=${PORT}
+      - REACT_APP_USE_RECAPTCHA=${REACT_APP_USE_RECAPTCHA}
+      - REACT_APP_RECAPTCHA_SITE_KEY=${REACT_APP_RECAPTCHA_SITE_KEY}
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:80']
+      interval: 30s
+      timeout: 10s
+      retries: 3
+    restart: unless-stopped

nginx.conf

@@ -0,0 +1,53 @@
+server {
+    listen 80;
+    server_name domain.com;
+
+    # Redirect HTTP to HTTPS
+    # return 301 https://$host$request_uri;
+
+    # listen 443 ssl;
+    # server_name domain.com;
+
+    # SSL Certificates
+    # ssl_certificate /etc/nginx/ssl/cert.pem;
+    # ssl_certificate_key /etc/nginx/ssl/key.pem;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Security Headers
+    add_header X-Frame-Options "DENY";
+    add_header X-Content-Type-Options "nosniff";
+    add_header X-XSS-Protection "1; mode=block";
+    add_header Referrer-Policy "strict-origin-when-cross-origin";
+    # add_header Content-Security-Policy "default-src 'self'; connect-src 'self' https://your-graphql-server.com;";
+
+    # Static Files and SPA Routing
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # Proxy GraphQL API
+    location /graphql/ {
+        proxy_pass http://127.0.0.1:4000/graphql/;
+        add_header Access-Control-Allow-Origin https://your-react-app-domain.com;
+        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
+        add_header Access-Control-Allow-Headers "Content-Type, Authorization";
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Gzip Compression for better loading of Static Files 
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+    gzip_min_length 256;
+    gzip_vary on;
+
+    error_page 404 /index.html;
+}