🐳 Set up Docker config for new-frontend (#564)

Author: alejsdev

src/.env

@@ -13,6 +13,7 @@ TRAEFIK_PUBLIC_TAG=traefik-public
 DOCKER_IMAGE_BACKEND=backend
 DOCKER_IMAGE_CELERYWORKER=celery
 DOCKER_IMAGE_FRONTEND=frontend
+DOCKER_IMAGE_NEW_FRONTEND=new-frontend
 
 # Backend
 BACKEND_CORS_ORIGINS="[\"http://localhost\", \"http://localhost:4200\", \"http://localhost:3000\", \"http://localhost:8080\", \"https://localhost\", \"https://localhost:4200\", \"https://localhost:3000\", \"https://localhost:8080\", \"http://local.dockertoolbox.tiangolo.com\", \"http://localhost.tiangolo.com\"]"

src/docker-compose.override.yml

@@ -80,9 +80,19 @@ services:
     labels:
       - traefik.enable=true
       - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
+      # - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=Host(`old-frontend.localhost.tiangolo.com`)
       - traefik.http.services.${STACK_NAME?Variable not set}-frontend.loadbalancer.server.port=80
 
+  new-frontend:
+    build:
+      context: ./new-frontend
+    labels:
+      - traefik.enable=true
+      - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
+      - traefik.http.routers.${STACK_NAME?Variable not set}-new-frontend-http.rule=PathPrefix(`/`)
+      - traefik.http.services.${STACK_NAME?Variable not set}-new-frontend.loadbalancer.server.port=80
+
 networks:
   traefik-public:
     # For local dev, don't expect an external Traefik network

src/docker-compose.yml

@@ -190,6 +190,18 @@ services:
         - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
         - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
         - traefik.http.services.${STACK_NAME?Variable not set}-frontend.loadbalancer.server.port=80
+  
+  new-frontend:
+    image: '${DOCKER_IMAGE_NEW_FRONTEND?Variable not set}:${TAG-latest}'
+    build:
+      context: ./new-frontend
+    deploy:
+      labels:
+        - traefik.enable=true
+        - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
+        - traefik.http.routers.${STACK_NAME?Variable not set}-new-frontend-http.rule=PathPrefix(`/`)
+        - traefik.http.services.${STACK_NAME?Variable not set}-new-frontend.loadbalancer.server.port=80
+
 
 volumes:
   app-db-data:

src/new-frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

src/new-frontend/Dockerfile

@@ -0,0 +1,21 @@
+# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
+FROM node:20 as build-stage 
+
+WORKDIR /app
+
+COPY package*.json /app/
+
+RUN npm install
+
+COPY ./ /app/
+
+RUN npm run build
+
+
+# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
+FROM nginx:1
+
+COPY --from=build-stage /app/dist/ /usr/share/nginx/html
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf

src/new-frontend/nginx-backend-not-found.conf

@@ -0,0 +1,9 @@
+location /api {
+    return 404;
+}
+location /docs {
+    return 404;
+}
+location /redoc {
+    return 404;
+}

src/new-frontend/nginx.conf

@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  
+  include /etc/nginx/extra-conf.d/*.conf;
+}