build(mapper): update compose and CI to deploy mapper frontend on push (

#1855)

* build: use same dockerfiles for all frontends debug/prod

* build: update build and nginx config for mapper/manager frontends

* ci: update frontend build stage context

* build: upgrade pdm version in backend dockerfile

* build: add temp 'packaging' dep and relock

.github/workflows/build_and_deploy.yml

@@ -58,8 +58,8 @@ jobs:
     uses: hotosm/gh-workflows/.github/workflows/[email protected]
     needs: [frontend-unit-test, frontend-e2e-test]
     with:
-      context: src/frontend
-      dockerfile: prod.dockerfile
+      context: src
+      dockerfile: Dockerfile.ui.prod
       build_target: prod
       image_name: ghcr.io/${{ github.repository }}/frontend
 

docker-compose.development.yml

@@ -20,6 +20,8 @@ name: fmtm-dev
 volumes:
   fmtm_frontend:
     name: fmtm-frontend-${GIT_BRANCH}
+  fmtm_mapper_frontend:
+    name: fmtm-mapper-frontend-${GIT_BRANCH}
   fmtm_db_data:
     name: fmtm-db-data-${GIT_BRANCH}
   fmtm_data:
@@ -60,7 +62,8 @@ services:
       ui:
         condition: service_completed_successfully
     volumes:
-      - fmtm_frontend:/usr/share/nginx/html/fmtm/
+      - fmtm_frontend:/usr/share/nginx/html/fmtm-manager/
+      - fmtm_frontend:/usr/share/nginx/html/fmtm-mapper/
       - central_frontend:/usr/share/nginx/html/central/
       - certs:/etc/letsencrypt
       - certbot_data:/var/www/certbot
@@ -114,14 +117,15 @@ services:
     # accessible to the proxy, then shuts down
     image: "ghcr.io/hotosm/fmtm/frontend:${GIT_BRANCH:-development}"
     build:
-      context: src/frontend
-      dockerfile: prod.dockerfile
+      context: src
+      dockerfile: Dockerfile.ui.prod
       args:
         APP_VERSION: ${GIT_BRANCH}
         VITE_API_URL: https://${FMTM_API_DOMAIN:-api.${FMTM_DOMAIN}}
         NODE_ENV: development
     volumes:
-      - fmtm_frontend:/frontend
+      - fmtm_frontend:/frontend/fmtm-manager
+      - fmtm_mapper_frontend:/frontend/fmtm-mapper
     network_mode: none
     restart: "on-failure:2"
 

docker-compose.main.yml

@@ -20,6 +20,8 @@ name: fmtm-main
 volumes:
   fmtm_frontend:
     name: fmtm-frontend-main
+  fmtm_mapper_frontend:
+    name: fmtm-mapper-frontend-main
   fmtm_db_data:
     name: fmtm-db-data-main
   fmtm_data:
@@ -52,7 +54,8 @@ services:
       ui:
         condition: service_completed_successfully
     volumes:
-      - fmtm_frontend:/usr/share/nginx/html/fmtm/
+      - fmtm_frontend:/usr/share/nginx/html/fmtm-manager/
+      - fmtm_frontend:/usr/share/nginx/html/fmtm-mapper/
       - certs:/etc/letsencrypt
       - certbot_data:/var/www/certbot
     environment:
@@ -104,14 +107,15 @@ services:
     # accessible to the proxy, then shuts down
     image: "ghcr.io/hotosm/fmtm/frontend:main"
     build:
-      context: src/frontend
-      dockerfile: prod.dockerfile
+      context: src
+      dockerfile: Dockerfile.ui.prod
       args:
         APP_VERSION: main
         VITE_API_URL: https://${FMTM_API_DOMAIN:-api.${FMTM_DOMAIN}}
         NODE_ENV: production
     volumes:
-      - fmtm_frontend:/frontend
+      - fmtm_frontend:/frontend/fmtm-manager
+      - fmtm_mapper_frontend:/frontend/fmtm-mapper
     network_mode: none
     restart: "on-failure:2"
 

docker-compose.yml

@@ -118,8 +118,10 @@ services:
   ui:
     image: "ghcr.io/hotosm/fmtm/frontend:debug"
     build:
-      context: src/frontend
-      dockerfile: debug.dockerfile
+      context: src
+      additional_contexts:
+        - code=src/frontend
+      dockerfile: Dockerfile.ui.debug
     depends_on:
       api:
         condition: service_started
@@ -137,8 +139,10 @@ services:
   ui-mapper:
     image: "ghcr.io/hotosm/fmtm/frontend:mapper"
     build:
-      context: src/mapper
-      dockerfile: debug.dockerfile
+      context: src
+      additional_contexts:
+        - code=src/frontend
+      dockerfile: Dockerfile.ui.debug
     depends_on:
       api:
         condition: service_started

nginx/templates/fmtm.conf.template

@@ -39,9 +39,15 @@ server {
     # For opentelemetry
     add_header 'Access-Control-Allow-Headers' 'traceparent,tracestate';
 
+    location /mapnow {
+        # Serve FMTM mapper frontend under /usr/share/nginx/html
+        root /usr/share/nginx/html/fmtm-mapper;
+        try_files $uri $uri/ /index.html;
+    }
+
     location / {
-        # Serve FMTM frontend under /usr/share/nginx/html
-        root /usr/share/nginx/html/fmtm;
+        # Serve FMTM management frontend under /usr/share/nginx/html
+        root /usr/share/nginx/html/fmtm-manager;
         try_files $uri $uri/ /index.html;
     }
 

src/frontend/debug.dockerfile → src/Dockerfile.ui.debug

@@ -6,7 +6,7 @@ RUN set -ex \
           "openssl" \
     && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
-COPY ./package.json ./pnpm-lock.yaml ./
+COPY --from=code ./package.json ./pnpm-lock.yaml ./
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable && corepack use [email protected]

src/frontend/prod.dockerfile → src/Dockerfile.ui.prod

@@ -1,21 +1,27 @@
-FROM docker.io/node:20 as builder
-
+FROM docker.io/node:20 as base
+ARG NODE_ENV
 ARG VITE_API_URL
-ENV VITE_API_URL="${VITE_API_URL}"
-
-WORKDIR /app
-COPY ./package.json ./pnpm-lock.yaml ./
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
+ENV VITE_API_URL=${VITE_API_URL} \
+    NODE_ENV=${NODE_ENV} \
+    PNPM_HOME="/pnpm" \
+    PATH="$PNPM_HOME:$PATH"
 RUN corepack enable && corepack use [email protected]
-RUN pnpm install
+WORKDIR /app
 
-ARG NODE_ENV
-ENV NODE_ENV ${NODE_ENV}
-COPY . .
+
+FROM base as manager-frontend
+COPY frontend/package.json frontend/pnpm-lock.yaml ./
+RUN pnpm install
+COPY frontend/ .
 RUN pnpm run build --mode ${NODE_ENV}
 
 
+FROM base as mapper-frontend
+COPY mapper/package.json mapper/pnpm-lock.yaml ./
+RUN pnpm install
+COPY mapper/ .
+RUN pnpm run build --mode ${NODE_ENV}
+
 
 FROM docker.io/rclone/rclone:1 as prod
 ARG APP_VERSION
@@ -31,4 +37,5 @@ COPY container-entrypoint.sh /
 RUN chmod +x /container-entrypoint.sh
 ENTRYPOINT ["/container-entrypoint.sh"]
 WORKDIR /app
-COPY --from=builder /app/dist .
+COPY --from=manager-frontend /app/dist ./manager-frontend
+COPY --from=mapper-frontend /app/build ./mapper-frontend

src/backend/Dockerfile

@@ -49,7 +49,7 @@ FROM base AS extract-deps
 WORKDIR /opt/python
 COPY pyproject.toml pdm.lock /opt/python/
 RUN pip install --no-cache-dir --upgrade pip \
-    && pip install --no-cache-dir pdm==2.6.1
+    && pip install --no-cache-dir pdm==2.19.3
 RUN pdm export --prod > requirements.txt \
     # Export with default deps, as we install one or the other
     && pdm export -G monitoring \