Browse Source

fix: Vite throwing errors when used in docker

frontend/node_modules on host system and a frontend container reset required.
Owen Diffey 1 year ago
parent
commit
134a386fb5
5 changed files with 15 additions and 7 deletions
  1. 2 1
      docker-compose.yml
  2. 0 3
      frontend/Dockerfile
  3. 1 1
      frontend/config/template.json
  4. 8 1
      frontend/entrypoint.sh
  5. 4 1
      frontend/vite.config.js

+ 2 - 1
docker-compose.yml

@@ -23,14 +23,15 @@ services:
       args:
         FRONTEND_MODE: "${FRONTEND_MODE:-prod}"
     restart: ${RESTART_POLICY:-unless-stopped}
+    user: root
     ports:
       - "${FRONTEND_HOST:-0.0.0.0}:${FRONTEND_PORT:-80}:80"
     volumes:
       - ./.git:/opt/app/.parent_git:ro
-      - /opt/app/node_modules
       - ./frontend/dist/config:/opt/app/dist/config
     environment:
       - FRONTEND_MODE=${FRONTEND_MODE:-prod}
+      - CONTAINER_MODE=${CONTAINER_MODE:-prod}
     links:
       - backend
 

+ 0 - 3
frontend/Dockerfile

@@ -7,8 +7,6 @@ ENV SUPPRESS_NO_CONFIG_WARNING=1
 RUN apt-get update
 RUN apt-get install nginx -y
 
-RUN npm install -g webpack@5.73.0 webpack-cli@4.9.2
-
 RUN mkdir -p /opt/app
 WORKDIR /opt/app
 
@@ -28,4 +26,3 @@ RUN chmod u+x entrypoint.sh
 ENTRYPOINT bash /opt/app/entrypoint.sh
 
 EXPOSE 80/tcp
-EXPOSE 80/udp

+ 1 - 1
frontend/config/template.json

@@ -9,7 +9,7 @@
 	},
 	"devServer": {
 		"port": "81",
-		"webSocketURL": "ws://localhost/ws"
+		"clientPort": "80"
 	},
 	"frontendDomain": "http://localhost",
 	"mode": "development",

+ 8 - 1
frontend/entrypoint.sh

@@ -1,6 +1,13 @@
 #!/bin/bash
 
-if [[ "${FRONTEND_MODE}" = "prod" ]]; then
+if [[ "${CONTAINER_MODE}" == "dev" ]]; then
+    npm install
+fi
+
+if [[ "${FRONTEND_MODE}" == "prod" ]]; then
+    if [[ "${CONTAINER_MODE}" == "dev" ]]; then
+        npm run prod
+    fi
     nginx -c /opt/app/prod.nginx.conf -g "daemon off;"
 elif [ "${FRONTEND_MODE}" == "dev" ]; then
     nginx -c /opt/app/dev.nginx.conf

+ 4 - 1
frontend/vite.config.js

@@ -155,7 +155,10 @@ export default {
 	server: {
 		host: "0.0.0.0",
 		port: config.get("devServer.port"),
-		strictPort: true
+		strictPort: true,
+		hmr: {
+			clientPort: config.get("devServer.clientPort")
+		}
 	},
 	build: {
 		outDir: "../build"