fix: Dockerized Frontend for LIVE Environment

hotosm · Jun 28, 2024 · 526b287 · 526b287
1 parent ed04db9
commit 526b287
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 50 deletions.
diff --git a/.env.sample b/.env.sample
@@ -17,8 +17,9 @@ EXTRA_CORS_ORIGINS=["http://localhost:3040"]
 
 # For Frontend
 SITE_NAME="DTM-Drone Tasking Manager"
-BASE_URL=http://localhost:${BACKEND_WEB_APP_PORT:-8000}
+BASE_URL=http://localhost:${BACKEND_WEB_APP_PORT:-8000}/api
 API_URL_V1=http://localhost:${BACKEND_WEB_APP_PORT:-8000}/api
+STATIC_BASE_URL=${MINIO_HOST_URL:-http://localhost:9000}/${FRONTEND_BUCKET_NAME:-frontendstatic}/
 
 # use development for frontend as dev else live
 DOCKER_TARGET=development
diff --git a/.gitignore b/.gitignore
@@ -80,4 +80,4 @@ chart/charts
 DockerData/
 
 #Backend Template
-src/backend/templates/
+src/backend/templates/*
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,14 +1,14 @@
 version: "3"
 
-volumes:
-  dtm_db_data:
-
 services:
   backend:
     build:
       context: .
       dockerfile: src/backend/Dockerfile
     restart: always
+    depends_on:
+      - db
+      - minio
     ports:
       - ${BACKEND_WEB_APP_PORT:-8000}:8000
     volumes:
@@ -22,8 +22,12 @@ services:
       context: .
       dockerfile: src/frontend/Dockerfile
       target: ${DOCKER_TARGET:-development}
+      args:
+        - STATIC_BASE_URL=${STATIC_BASE_URL:-http://localhost:9000/frontendstatic/}
     ports:
       - ${FRONTEND_WEB_APP_PORT:-3040}:3040
+    depends_on:
+      - minio
     env_file: .env
     networks:
       - dtm-network

diff --git a/src/frontend/.env.example b/src/frontend/.env.example
@@ -1,3 +1,3 @@
 SITE_NAME="DTM-Drone Tasking Manager"
 BASE_URL=https://dronetm-api.naxa.com.np
-API_URL_V1=https://dronetm-api.naxa.com.np
+API_URL_V1=https://dronetm-api.naxa.com.np/api
diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
@@ -1,5 +1,6 @@
 # ARG for the base image
 ARG NODE_BASE=18.16.0-bullseye-slim
+ARG STATIC_BASE_URL http://localhost:9000/frontendstatic/
 
 # Base image with frontend code
 FROM node:${NODE_BASE} as base
@@ -15,6 +16,8 @@ ENTRYPOINT ["/bin/sh", "-c" , "yarn && yarn start --host 0.0.0.0"]
 
 # Generate frontend build files
 FROM base as build
+ARG STATIC_BASE_URL
+ENV STATIC_BASE_URL ${STATIC_BASE_URL}
 RUN yarn
 RUN yarn build
 

diff --git a/src/frontend/docker-entrypoint.sh b/src/frontend/docker-entrypoint.sh
@@ -11,56 +11,21 @@ if [[ -z "${S3_SECRET_KEY}" ]]; then
 fi
 
 MINIO_HOST_URL=${MINIO_HOST_URL:-http://localhost:9000}
-FRONTEND_BUCKET_NAME=${FRONTEND_BUCKET_NAME:-frontend-static}
+FRONTEND_BUCKET_NAME=${FRONTEND_BUCKET_NAME:-frontendstatic}
 
-mcli config host add minio http://minio:9000 $S3_ACCESS_KEY $S3_SECRET_KEY
-
-mcli mb minio/${FRONTEND_BUCKET_NAME} || echo "Failed to create bucket in MinIO"
-mcli anonymous set download minio/${FRONTEND_BUCKET_NAME}/staticfiles || echo "Failed setting staticfiles dir as public in MinIO"
-
-mcli cp --recursive /tmp/dist/* minio/${FRONTEND_BUCKET_NAME}/staticfiles
+if [[ "${MINIO_HOST_URL}" == 'http://localhost:9000' ]]; then
+  CONFIG_MINIO=http://minio:9000
+fi
 
-export MAIN_CSS=$(basename $(ls /tmp/dist/assets/index-*.css))
-export MAIN_JS=$(basename $(ls /tmp/dist/assets/index-*.js))
+mcli config host add minio ${CONFIG_MINIO:-MINIO_HOST_URL} $S3_ACCESS_KEY $S3_SECRET_KEY
 
-cat <<EOF | envsubst >/tmp/index.html
-{% with s3_link="${MINIO_HOST_URL}/${FRONTEND_BUCKET_NAME}/staticfiles" %}
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="{{ s3_link }}/favicon.ico" />
-    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Symbols+Outlined"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Symbols+Outlined"
-      rel="stylesheet"
-    />
-    <title>Drone Tasking Manager</title>
-    <script type="module" crossorigin src="{{ s3_link }}/assets/$MAIN_JS"></script>
-    <link rel="stylesheet" href="{{ s3_link }}/assets/$MAIN_CSS">
-  </head>
+mcli mb minio/${FRONTEND_BUCKET_NAME} || echo "Failed to create bucket in MinIO"
+mcli anonymous set download minio/${FRONTEND_BUCKET_NAME} || echo "Failed setting staticfiles dir as public in MinIO"
 
-  <body>
-    <div id="backdrop-root"></div>
-    <div id="overlay-root"></div>
-    <div id="root"></div>
-    
-  </body>
-</html>
-{% endwith %}
-EOF
+mcli cp --recursive /tmp/dist/* minio/${FRONTEND_BUCKET_NAME}
 
-# Copy index.html to all backend containers
 for container in $(docker ps -a -q --filter "label=com.docker.compose.service=backend"); do
-  docker cp /tmp/index.html $container:/project/src/backend/templates/index.html
+  docker cp /tmp/dist/index.html $container:/project/src/backend/templates/index.html
 done
 
 echo "======================================================"

diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
@@ -5,6 +5,7 @@ import { defineConfig } from 'vite';
 
 dotenv.config();
 export default defineConfig({
+  base: process.env.NODE_ENV === 'development' ? "./" : process.env.STATIC_BASE_URL,
   plugins: [
     react(),
     process.env.NODE_ENV !== 'production'
@@ -43,6 +44,7 @@ export default defineConfig({
       BASE_URL: process.env.BASE_URL,
       API_URL_V1: process.env.API_URL_V1,
       SITE_NAME: process.env.SITE_NAME,
+      STATIC_BASE_URL: process.env.STATIC_BASE_URL
     },
   },
   server: {