✨(frontend) introduce frontend Docker Image

To facilitate deployment on Kubernetes, we've introduced a Docker image for the
frontend. The Next project is built, and its static output is served using an
Nginx reverse proxy.

Since DevOps lacks a certified cold storage solution (e.g., S3) for serving
static files, we've opted to containerize the frontend as a quick workaround for
deploying staging environments.

Dockerfile

@@ -11,6 +11,40 @@ RUN apt-get update && \
   apt-get -y upgrade && \
   rm -rf /var/lib/apt/lists/*
 
+
+### ---- Front-end builder image ----
+FROM node:20 as front-builder
+
+# Copy frontend app sources
+COPY ./src/frontend /builder
+
+WORKDIR /builder/apps/desk
+
+RUN yarn install --frozen-lockfile && \
+    yarn build
+
+
+# ---- Front-end image ----
+FROM nginxinc/nginx-unprivileged:1.25 as frontend
+
+# Un-privileged user running the application
+ARG DOCKER_USER
+USER ${DOCKER_USER}
+
+COPY --from=front-builder \
+    /builder/apps/desk/out \
+    /usr/share/nginx/html
+
+COPY ./docker/files/etc/nginx/conf.d /etc/nginx/conf.d:ro
+
+# Copy entrypoint
+COPY ./docker/files/usr/local/bin/entrypoint /usr/local/bin/entrypoint
+
+ENTRYPOINT [ "/usr/local/bin/entrypoint" ]
+
+CMD ["nginx", "-g", "daemon off;"]
+
+
 # ---- Back-end builder image ----
 FROM base as back-builder
 

Makefile

@@ -92,8 +92,10 @@ bootstrap: \
 .PHONY: bootstrap
 
 # -- Docker/compose
-build: ## build the app-dev container
+build: ## build the dev and demo containers
 	@$(COMPOSE) build app-dev
+	@$(COMPOSE) build nginx
+	@$(COMPOSE) build app
 .PHONY: build
 
 down: ## stop and remove containers, networks, images, and volumes

docker-compose.yml

@@ -67,9 +67,12 @@ services:
     image: people:production
     environment:
       - DJANGO_CONFIGURATION=Demo
+      - DJANGO_CORS_ALLOWED_ORIGINS=http://localhost:8088
     env_file:
       - env.d/development/common
       - env.d/development/postgresql
+    ports:
+      - "8082:8000"
     volumes:
       - ./data/media:/data/media
     depends_on:
@@ -89,15 +92,15 @@ services:
       - app
 
   nginx:
-    image: nginx:1.25
+    build:
+      context: .
+      target: frontend
+    image: people:frontend
     ports:
-      - "8082:8082"
       - "8088:8088"
       - "8083:8083"
     volumes:
       - ./docker/files/etc/nginx/conf.d:/etc/nginx/conf.d:ro
-      - ./src/frontend/apps/desk/out:/home/desk
-      - ./data/media:/data/media:ro
     depends_on:
       - app
       - keycloak

docker/files/etc/nginx/conf.d/default.conf

@@ -1,27 +1,9 @@
-server {
-
-    listen 8082;
-    server_name localhost;
-    charset utf-8;
-
-    location /media {
-        alias /data/media;
-    }
-
-    location / {
-         proxy_pass http://app:8000;
-         proxy_set_header Host $host;
-         proxy_set_header X-Real-IP $remote_addr;
-         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-    }
-}
-
 server {
   listen 8088;
   server_name localhost;
  
-  root /home/desk;
- 
+  root /usr/share/nginx/html;
+
   location / {
       try_files $uri index.html $uri/ =404;
   }

src/backend/people/settings.py

@@ -260,7 +260,7 @@ class Base(Configuration):
     # CORS
     CORS_ALLOW_CREDENTIALS = True
     CORS_ALLOW_ALL_ORIGINS = values.BooleanValue(False)
-    CORS_ALLOWED_ORIGINS = values.ListValue([])
+    CORS_ALLOWED_ORIGINS = values.ListValue([], environ_name="CORS_ALLOWED_ORIGINS")
     CORS_ALLOWED_ORIGIN_REGEXES = values.ListValue([])
 
     # Sentry
@@ -557,8 +557,6 @@ class Demo(Production):
     nota bene: it should inherit from the Production environment.
     """
 
-    CSRF_TRUSTED_ORIGINS = ["http://localhost:8082"]
-
     STORAGES = {
         "default": {
             "BACKEND": "django.core.files.storage.FileSystemStorage",

src/frontend/apps/desk/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://kubernetes-service-name-wip:8071/api/v1.0/