feat(ws): containerize_frontend_component/#392

Signed-off-by: Noa <[email protected]>

Author: noalimoy

workspaces/frontend/.dockerignore

@@ -0,0 +1,70 @@
+# ---------- Builder stage ----------
+FROM node:20-slim AS builder
+
+# Set working directory
+WORKDIR /usr/src/app
+
+# Copy package files to the container
+COPY package*.json ./
+
+# Install the dependencies and build
+RUN npm cache clean --force \
+  && npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build:prod
+
+
+# ---------- Production stage ----------
+FROM nginx:alpine
+
+USER root
+
+# Install envsubst (gettext package)
+RUN apk add --no-cache gettext
+
+# Copy built assets from builder stage
+COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
+
+# Copy nginx template
+COPY nginx.conf.template /etc/nginx/nginx.conf.template
+
+# Create directories and set permissions for non-root user
+RUN mkdir -p /var/cache/nginx/client_temp \
+             /var/cache/nginx/proxy_temp \
+             /var/cache/nginx/fastcgi_temp \
+             /var/cache/nginx/uwsgi_temp \
+             /var/cache/nginx/scgi_temp \
+             /var/run/nginx \
+             /tmp/nginx && \
+    # Change ownership of nginx directories to nginx user (UID 101)
+    chown -R 101:101 /var/cache/nginx \
+                     /var/run/nginx \
+                     /usr/share/nginx/html \
+                     /tmp/nginx \
+                     /etc/nginx
+
+# Create startup script that works with non-root user
+RUN echo '#!/bin/sh' > /docker-entrypoint.sh && \
+    echo 'envsubst "\${BACKEND_SERVICE}" < /etc/nginx/nginx.conf.template > /tmp/nginx/nginx.conf' >> /docker-entrypoint.sh && \
+    echo 'exec nginx -c /tmp/nginx/nginx.conf -g "daemon off;"' >> /docker-entrypoint.sh && \
+    chmod +x /docker-entrypoint.sh && \
+    chown 101:101 /docker-entrypoint.sh
+
+# Switch to nginx user (UID 101)
+USER 101:101
+
+# Expose port
+EXPOSE 8080
+
+# Set environment variables
+ENV PORT=8080
+
+# Set default backend service
+ENV BACKEND_SERVICE=localhost:4000
+
+# Start the production server
+CMD ["/docker-entrypoint.sh"]

workspaces/frontend/Dockerfile

@@ -0,0 +1,87 @@
+worker_processes  auto;
+
+error_log  /dev/stderr warn;
+pid        /tmp/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    log_format  main  '$remote_addr - $remote_user [$time_local] - $http_x_api_version - "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /dev/stdout  main;
+
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Temporary file paths for non-root user
+    client_body_temp_path /var/cache/nginx/client_temp;
+    proxy_temp_path /var/cache/nginx/proxy_temp;
+    fastcgi_temp_path /var/cache/nginx/fastcgi_temp;
+    uwsgi_temp_path /var/cache/nginx/uwsgi_temp;
+    scgi_temp_path /var/cache/nginx/scgi_temp;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header Referrer-Policy "no-referrer-when-downgrade" always;
+    add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
+
+    # Gzip Compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+    gzip_comp_level 5;
+    gzip_min_length 1000;
+    gzip_proxied any;
+    gzip_vary on;
+    gzip_disable "msie6";
+
+    # Upstream backend configuration
+    upstream backend {
+        server ${BACKEND_SERVICE};
+    }
+
+    server {
+        listen       8080;
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 'healthy\n';
+        }
+
+        location / {
+            root   /usr/share/nginx/html;
+            index  index.html;
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Static assets (cache enabled)
+        location ~* \.(css|js|gif|jpeg|jpg|png|ico|woff|woff2|ttf|otf|svg|eot)$ {
+            root   /usr/share/nginx/html;
+            expires 30d;
+            add_header Cache-Control "public, no-transform";
+            try_files $uri =404;
+        }
+
+        # Backend API
+        location /api/ {
+            proxy_pass http://backend/api/;
+            proxy_http_version 1.1;
+            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;
+
+            # Timeouts
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 60s;
+            proxy_read_timeout 60s;
+
+        }
+    }
+}