From 1a3b396230c08d85dc6e5d5535da9ef1b096b845 Mon Sep 17 00:00:00 2001 From: Lebaud Antoine Date: Thu, 25 Jan 2024 19:38:40 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20introduce=20frontend=20Do?= =?UTF-8?q?cker=20Image?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit To facilitate deployment on Kubernetes, we've introduced a Docker image for the frontend. The Next.js 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 decided to containerize the frontend as a quick workaround for deploying staging environments. Please note this Docker Image is WIP. One of the main issue still not resolved concerns environment variables, which are only available when building the Docker Image. Thus, having different environment variables values between environment (dev, pre-prod, prod) will require us to build several frontend images, and tag them with the appropriate target environment. The `.env.production` values are not the final ones. For now, they were set to dev values. It allows us to test the frontend image with the development setup. Important: The frontend image is built-on top of an unprivileged Nginx image, which exposes by default port 8080 instead of 80 for classic Nginx image. You can find more info https://github.com/nginxinc/docker-nginx-unprivileged. The Docker Compose Nginx service is used to proxy OIDC requests to keycloak, in order to share the same host when initiating an OIDC flow, from outside and inside docker virtual network. All Nginx configurations related to serve frontend static build were moved to a newly created conf file under src/frontend/apps/desk. When starting the frontend image, we desire to start the minimum Nignx config required to serve frontend statics. --- Dockerfile | 47 ++++++++++++++++++++++ docker-compose.yml | 4 -- docker/files/etc/nginx/conf.d/default.conf | 35 ---------------- src/backend/people/settings.py | 2 - src/frontend/apps/desk/.env.production | 1 + src/frontend/apps/desk/conf/default.conf | 15 +++++++ 6 files changed, 63 insertions(+), 41 deletions(-) create mode 100644 src/frontend/apps/desk/.env.production create mode 100644 src/frontend/apps/desk/conf/default.conf diff --git a/Dockerfile b/Dockerfile index b7c9bbe..386833e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -11,6 +11,53 @@ RUN apt-get update && \ apt-get -y upgrade && \ rm -rf /var/lib/apt/lists/* +### ---- Front-end dependencies image ---- +FROM node:20 as frontend-deps + +WORKDIR /deps + +COPY ./src/frontend/package.json ./package.json +COPY ./src/frontend/yarn.lock ./yarn.lock +COPY ./src/frontend/apps/desk/package.json ./apps/desk/package.json +COPY ./src/frontend/packages/i18n/package.json ./packages/i18n/package.json +COPY ./src/frontend/packages/eslint-config-people/package.json ./packages/eslint-config-people/package.json + +RUN yarn --frozen-lockfile + +### ---- Front-end builder image ---- +FROM node:20 as frontend-builder + +WORKDIR /builder + +COPY --from=frontend-deps /deps/node_modules ./node_modules +COPY ./src/frontend . + +WORKDIR ./apps/desk + +RUN 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=frontend-builder \ + /builder/apps/desk/out \ + /usr/share/nginx/html + +COPY ./src/frontend/apps/desk/conf/default.conf /etc/nginx/conf.d + +# 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 diff --git a/docker-compose.yml b/docker-compose.yml index 4bd41d7..3e6329c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -91,13 +91,9 @@ services: nginx: image: nginx:1.25 ports: - - "8082:8082" - "8083:8083" - - "8088:8088" 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 diff --git a/docker/files/etc/nginx/conf.d/default.conf b/docker/files/etc/nginx/conf.d/default.conf index 3081a3a..f4886b8 100644 --- a/docker/files/etc/nginx/conf.d/default.conf +++ b/docker/files/etc/nginx/conf.d/default.conf @@ -1,37 +1,3 @@ -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; - - location / { - try_files $uri index.html $uri/ =404; - } - - error_page 404 /404.html; - location = /404.html { - internal; - } -} - server { listen 8083; @@ -45,4 +11,3 @@ server { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } - diff --git a/src/backend/people/settings.py b/src/backend/people/settings.py index 1580c26..1e29601 100755 --- a/src/backend/people/settings.py +++ b/src/backend/people/settings.py @@ -578,8 +578,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", diff --git a/src/frontend/apps/desk/.env.production b/src/frontend/apps/desk/.env.production new file mode 100644 index 0000000..96383c2 --- /dev/null +++ b/src/frontend/apps/desk/.env.production @@ -0,0 +1 @@ +NEXT_PUBLIC_API_URL=http://localhost:8071/api/v1.0/ diff --git a/src/frontend/apps/desk/conf/default.conf b/src/frontend/apps/desk/conf/default.conf new file mode 100644 index 0000000..fe8f1cb --- /dev/null +++ b/src/frontend/apps/desk/conf/default.conf @@ -0,0 +1,15 @@ +server { + listen 8080; + server_name localhost; + + root /usr/share/nginx/html; + + location / { + try_files $uri index.html $uri/ =404; + } + + error_page 404 /404.html; + location = /404.html { + internal; + } +}