dockerize

broker/emqx.conf

@@ -35,6 +35,8 @@ dashboard {
 ## Authentication
 ##--------------------------------------------------------------------
 
+allow_anonymous = false
+
 ## Load users from file
 authn {
   enable = true
@@ -79,3 +81,8 @@ allow_anonymous = true
 listeners.tcp.default {
   bind = "0.0.0.0:1883"
 }
+
+listeners.ws.default {
+  bind = "0.0.0.0:8083"  # binds to all interfaces
+  max_connections = 102400
+}

console/Dockerfile

@@ -0,0 +1,29 @@
+# ---- Build stage ----
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# install deps first (better caching)
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# copy source and build
+COPY . .
+RUN npm run build
+
+
+# ---- Production stage ----
+FROM nginx:alpine
+
+# remove default nginx static files
+RUN rm -rf /usr/share/nginx/html/*
+
+# copy built app
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# optional: custom nginx config (for SPA routing)
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

console/nginx.conf

@@ -0,0 +1,9 @@
+server {
+    listen 80;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}

console/src/App.vue

@@ -20,7 +20,7 @@
 
   function handleLogin({ username, password }) {
     // Create the shared MQTT client
-    mqtt.value = new MQTTService('ws://127.0.0.1:8083/mqtt', username, password)
+    mqtt.value = new MQTTService('wss://dmc.jonotargett.com:443/mqtt', username, password)
     loggedIn.value = true
   }
 

docker-compose.yaml

@@ -28,3 +28,12 @@ services:
       - 8189:8189/udp
       - 9998:9998
 
+  console:
+    build:
+      context: ./console
+      dockerfile: Dockerfile
+    container_name: console
+    ports:
+      - "8080:80"
+    depends_on:
+      - emqx