Setup local nginx for development.

The nginx handles the routing to api and frontend,
so that we can run both in development mode.

api/app/server.py

@@ -23,6 +23,7 @@
     version="1.0.0",
     docs_url="/api/docs",
     redoc_url="/api/redoc",
+    openapi_url="/api/openapi.json",
 )
 
 

app.code-workspace

@@ -8,6 +8,10 @@
       "name": "frontend",
       "path": "frontend"
     },
+    {
+      "name": "nginx",
+      "path": "nginx"
+    },
     {
       "name": "root",
       "path": "."
@@ -17,6 +21,7 @@
     "files.exclude": {
       "api": true,
       "frontend": true,
+      "nginx": true,
     }
   }
 }

docker-compose.yml

@@ -1,19 +1,42 @@
 services:
+  nginx:
+    image: nginx:1.27.1-alpine
+    ports:
+      - 8000:80
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/templates/default.conf.template:ro
+    environment:
+      API_HOST: api
+      FRONTEND_HOST: frontend
+    depends_on:
+      api:
+        condition: service_started
+      frontend:
+        condition: service_started
+
   api:
     build:
       context: api
       target: dev
     ports:
-      - 8000:8000
+      - 8001:8000
     volumes:
       - ./api/app/:/app/app/
+    depends_on:
+      es01:
+        condition: service_started
+      es02:
+        condition: service_started
 
-  # frontend:
-  #   build: ./frontend/Dockerfile
-
-  #import:
-  #  build: ./import/Dockerfile
-
+  frontend:
+    build:
+      context: frontend
+      target: dev
+    ports:
+      - 8002:3000
+    volumes:
+      - ./frontend/:/app/
+      - /app/node_modules
 
   es01:
     image: docker.elastic.co/elasticsearch/elasticsearch:8.15.1
@@ -37,7 +60,6 @@ services:
         soft: -1
         hard: -1
 
-
   es02:
     depends_on:
       - es01
@@ -59,8 +81,6 @@ services:
         soft: -1
         hard: -1
 
-
-
   kibana:
     image: docker.elastic.co/kibana/kibana:8.15.1
     volumes:

frontend/Dockerfile

@@ -1,15 +1,23 @@
-FROM node:22-alpine3.20
-
+FROM node:22-alpine3.20 AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-
 RUN corepack enable
-
-WORKDIR /app/player
-
+WORKDIR /app
 COPY pnpm-lock.yaml package.json ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
+FROM base AS dev
 EXPOSE 3000
-
 CMD [ "pnpm", "run", "dev", "--host", "0.0.0.0" ]
+
+
+FROM base AS builder
+RUN pnpm generate
+
+
+FROM nginx:1.27.1-alpine AS prod
+COPY ./docker/frontend.nginx.conf /etc/nginx/templates/default.conf.template
+COPY --from=builder /app/dist /usr/share/nginx/html
+ENV API_HOST=api
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/package.json

@@ -41,5 +41,6 @@
     "@vueuse/core": "^11.0.3",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.21"
-  }
+  },
+  "packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }

nginx/nginx.conf

@@ -0,0 +1,28 @@
+upstream api {
+    server ${API_HOST}:8000;
+}
+
+upstream frontend {
+    server ${FRONTEND_HOST}:3000;
+}
+
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+    charset utf-8;
+
+    location ~* ^/(api)($|/) {
+        proxy_pass http://api;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $http_host;
+        proxy_redirect off;
+    }
+
+    location / {
+        proxy_pass http://frontend;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header Host $http_host;
+        proxy_redirect off;
+    }
+}