Multistage Dockerfile

A dev és a prod is tud működni docker imagekből, de erre kellett két dockerfile

.dockerignore

@@ -2,4 +2,6 @@ node_modules
 npm-debug.log
 Dockerfile
 docker-compose.yml
-.env
+.env
+dist
+.git

.gitignore

@@ -2,7 +2,9 @@
 # gitignore template for Vue.js projects
 #
 # Recommended template: Node.gitignore
+.git 
 
+dist
 # TODO: where does this rule come from?
 docs/_book
 

Dockerfile

@@ -1,4 +1,7 @@
-FROM node:20-alpine
+# ================
+# 1. BUILD STAGE
+# ================
+FROM node:20-alpine AS build
 
 WORKDIR /usr/src/app
 
@@ -6,6 +9,26 @@ COPY package*.json ./
 
 RUN npm install
 
-EXPOSE 5173
+COPY . .
 
-# A futtatási parancsot a compose adja
+ARG VITE_BACKEND_API_HOST=http://telefonkonyv-api
+ARG VITE_BACKEND_API_PORT=3000
+ENV VITE_BACKEND_API_HOST=${VITE_BACKEND_API_HOST}
+ENV VITE_BACKEND_API_PORT=${VITE_BACKEND_API_PORT}
+
+RUN npm run build
+
+# =================
+# 2. RUNTIME STAGE
+# =================
+FROM nginx:1.27-alpine
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY --from=build /usr/src/app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

Dockerfile.dev

@@ -0,0 +1,16 @@
+FROM node:20-alpine
+
+WORKDIR /usr/src/app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+# A futtatási parancsot a compose adja, de kell az alap is a k8s-hez
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173"]
+
+

docker-compose.yml

@@ -1,13 +1,15 @@
 services:
   frontend:
-    build: .
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
     container_name: telefonkonyv-frontend
     restart: always
     env_file: .env
     environment:
       - CHOKIDAR_USEPOLLING=true
-      - BACKEND_API_HOST=${BACKEND_API_HOST}
-      - BACKEND_API_PORT=${BACKEND_API_PORT}
+      - BACKEND_API_HOST=${VITE_BACKEND_API_HOST}
+      - BACKEND_API_PORT=${VITE_BACKEND_API_PORT}
     ports:
       - "${FRONTEND_PORT:-5173}:5173"
     volumes:

nginx.conf

@@ -0,0 +1,13 @@
+server {
+    listen 80;
+    server_name _;
+
+    root   /usr/share/nginx/html;
+    index  index.html;
+
+    # Statikus fájlok
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+}