feat(web): distinguish between MQTTX Web online and Docker versions

.github/workflows/deploy_web.yaml

@@ -11,11 +11,11 @@ on:
   workflow_dispatch:
 
 jobs:
-  build:
+  deploy_website:
     runs-on: ubuntu-20.04
     steps:
       - name: Check out Git repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
@@ -32,68 +32,84 @@ jobs:
           pnpm install
 
       - name: Write secret key to .env file
-        run: echo "VITE_WEB_DB_SECRET_KEY=${{ secrets.VITE_WEB_DB_SECRET_KEY }}" >> ./apps/web/.env
+        run: echo "\nVITE_WEB_DB_SECRET_KEY=${{ secrets.VITE_WEB_DB_SECRET_KEY }}" >> ./apps/web/.env
 
       - name: Build
         run: |
-          pnpm run build:web
-
-  #     - name: upload dist
-  #       if: github.event_name == 'release' && !github.event.release.prerelease
-  #       run: |
-  #         cd web
-  #         wget https://gosspublic.alicdn.com/ossutil/1.7.8/ossutil64
-  #         chmod 755 ./ossutil64
-  #         ./ossutil64 config -e https://oss-accelerate.aliyuncs.com -i ${{ secrets.ALI_OSS_ACCESSKEY_ID }} -k ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }} -L CH
-  #         ./ossutil64 cp -r dist/ oss://emqx-io-docs/ -u
-
-  # publish_docker:
-  #   if: github.event_name != 'pull_request'
-  #   runs-on: ubuntu-20.04
-  #   steps:
-  #     - name: use node.js
-  #       uses: actions/setup-node@v1
-  #       with:
-  #         node-version: 16.14
-
-  #     - uses: actions/checkout@v3
-  #     - name: set env
-  #       run: |
-  #         cd web
-  #         echo "VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now" > .env.local
-  #         echo "VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser." >> .env.local
-
-  #     - name: build
-  #       run: |
-  #         cd web
-  #         yarn && yarn build:docker
-
-  #     - name: docker meta
-  #       id: meta
-  #       uses: docker/metadata-action@v4
-  #       with:
-  #         images: emqx/mqttx-web
-  #         flavor: |
-  #           latest=${{ !github.event.release.prerelease }}
-  #         tags: |
-  #           type=ref,event=tag
-
-  #     - name: set up qemu
-  #       uses: docker/setup-qemu-action@v2
-
-  #     - name: set up docker buildx
-  #       uses: docker/setup-buildx-action@v2
-
-  #     - name: login to docker hub
-  #       uses: docker/login-action@v2
-  #       with:
-  #         username: ${{ secrets.DOCKER_HUB_USER }}
-  #         password: ${{ secrets.DOCKER_HUB_TOKEN }}
-
-  #     - name: build and push
-  #       uses: docker/build-push-action@v3
-  #       with:
-  #         context: ./web
-  #         push: true
-  #         platforms: linux/amd64,linux/arm64
-  #         tags: ${{ steps.meta.outputs.tags }}
+          pnpm run build:web:online
+
+      - name: upload dist
+        if: github.event_name == 'release' && !github.event.release.prerelease
+        run: |
+          cd apps/web
+          wget https://gosspublic.alicdn.com/ossutil/1.7.8/ossutil64
+          chmod 755 ./ossutil64
+          ./ossutil64 config -e https://oss-accelerate.aliyuncs.com -i ${{ secrets.ALI_OSS_ACCESSKEY_ID }} -k ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }} -L CH
+          ./ossutil64 cp -r dist/ oss://mqttx-web-client/ -u
+
+      - name: refresh cdn cache
+        if: github.event_name == 'release' && !github.event.release.prerelease
+        run: |
+          pip3 install tccli
+          tccli configure set secretId ${{ secrets.TENCENT_COS_ID }}
+          tccli configure set secretKey ${{ secrets.TENCENT_COS_KEY }}
+          tccli configure set region ap-hongkong
+          tccli cdn PurgePathCache --Paths '["https://mqttx.app/"]' --FlushType delete
+
+  publish_docker:
+    if: github.event_name != 'pull_request'
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+
+      - name: Use pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: |
+          pnpm install
+
+      - name: Write secret key to .env file
+        run: echo "\nVITE_WEB_DB_SECRET_KEY=${{ secrets.VITE_WEB_DB_SECRET_KEY }}" >> ./apps/web/.env
+
+      - name: Build
+        run: |
+          pnpm run build:web:docker
+
+      - name: docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: emqx/mqttx-web
+          flavor: |
+            latest=${{ !github.event.release.prerelease }}
+          tags: |
+            type=ref,event=tag
+
+      - name: set up qemu
+        uses: docker/setup-qemu-action@v2
+
+      - name: set up docker buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: login to docker hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_HUB_USER }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: build and push
+        uses: docker/build-push-action@v3
+        with:
+          context: ./apps/web
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}

apps/web/.env

@@ -0,0 +1,7 @@
+VITE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now
+VITE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser.
+
+VITE_APP_DEFAULT_HOST=broker.emqx.io
+
+BASE_URL=/
+VITE_APP_OUTPUT_DIR=dist

apps/web/.env.online

@@ -0,0 +1,4 @@
+VITE_APP_IS_ONLINE_ENV=true
+
+BASE_URL=/web-client/
+VITE_APP_OUTPUT_DIR=dist/web-client

apps/web/.gitignore

@@ -0,0 +1 @@
+!.env

apps/web/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:22-alpine
+
+RUN npm i -g http-server
+
+WORKDIR /app
+COPY dist ./
+
+EXPOSE 80
+
+CMD [ "http-server", "-p", "80" ]

apps/web/env.d.ts

@@ -4,6 +4,8 @@
 interface ImportMetaEnv {
   readonly VITE_WEB_DB_SECRET_KEY: string
   readonly __APP_VERSION__: string
+  readonly VITE_APP_DEFAULT_HOST: string
+  readonly VITE_APP_IS_ONLINE_ENV?: 'true' | 'false'
 }
 
 interface ImportMeta {

apps/web/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MQTTX</title>
+    <title>%VITE_APP_PAGE_TITLE%</title>
+    <meta name="description" content="%VITE_APP_PAGE_DESCRIPTION%" />
     <style>
       body {
         margin: 0;

apps/web/package.json

@@ -10,13 +10,18 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:online": "vite --mode online",
+    "dev:docker": "vite --mode docker",
     "build": "run-p type-check \"build-only {@}\" --",
+    "build:online": "run-p type-check \"build-only {@}\" -- --mode online",
+    "build:docker": "run-p type-check \"build-only {@}\" -- --mode docker",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@gtm-support/vue-gtm": "^3.1.0",
     "@mqttx/ui": "workspace:*",
     "element-plus": "^2.8.7",
     "log4js": "^6.9.1",

apps/web/src/main.ts

@@ -1,10 +1,11 @@
 import type { PlatformType } from 'mqttx'
 import { initTables, useSettingsService } from '@/database/services'
-import { monacoEnvironment } from '@mqttx/ui'
+import { createGtm } from '@gtm-support/vue-gtm'
 
+import { monacoEnvironment } from '@mqttx/ui'
 import { i18n } from '@mqttx/ui/i18n'
-import App from './App.vue'
 
+import App from './App.vue'
 import { createDatabase } from './database'
 import { router } from './router'
 import '@mqttx/ui/styles.scss'
@@ -22,6 +23,12 @@ app.provide<PlatformType>('platformType', 'web')
 
 app.use(router).use(pinia)
 
+app.use(createGtm({
+  id: 'GTM-KHSFXHT',
+  enabled: import.meta.env.VITE_APP_IS_ONLINE_ENV === 'true',
+  debug: false,
+}))
+
 database.then(async (db) => {
   await initTables()
   const { settings } = useSettingsService()