FE: add nginx config + dockerize the front end build

Mgrdich · May 13, 2024 · 3b334d9 · 3b334d9
1 parent b1d9ade
commit 3b334d9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 12 deletions.
diff --git a/application-compose.yml → docker-compose.yml b/application-compose.yml → docker-compose.yml
@@ -32,11 +32,16 @@ services:
 #        - SPRING_JPA_HIBERNATE_DDL_AUTO=update
 
 
-    run-fe:
-      container_name: llm_service_ui
+    run-build-fe:
+      container_name: "llm_service_ui"
+      stdin_open: true
       build:
         context: ./frontend/
+        dockerfile: Dockerfile
+      volumes:
+        - '/app/node_modules'
+        - './frontend/:/app'
+      ports:
+        - "4040:80"  # Assuming you want to use port 8080 locally
       depends_on:
         - db
-      ports:
-        - "4040:4040"
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -1,16 +1,13 @@
 # Use the official Node.js 18 image as base
-FROM node:18
+FROM node:18 as builder
 
 WORKDIR /app
 
+COPY package.json .
+
 # Set environment variables
 ENV PNPM_VERSION 8.15.0
 
-# Optionally, you can copy your application code here
-COPY . /app
-
-RUN rm -rf node_modules
-
 # Install PNPM globally
 RUN npm install -g pnpm@${PNPM_VERSION}
 
@@ -19,6 +16,11 @@ RUN pnpm --version
 
 RUN pnpm install
 
-EXPOSE 4040
+COPY . .
+
+RUN pnpm build
 
-CMD ["pnpm", "dev"]
+FROM nginx
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /app/dist /usr/share/nginx/html
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <base href="/" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">

diff --git a/frontend/nginx.conf b/frontend/nginx.conf
@@ -0,0 +1,15 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}