feat(web): add local preview script & support docker deploy

.github/workflows/deploy_web.yaml

@@ -10,28 +10,81 @@ on:
   workflow_dispatch:
 
 jobs:
-  deploy:
+  deploy_website:
     runs-on: ubuntu-20.04
     steps:
-    - name: use node.js
-      uses: actions/setup-node@v1
-      with:
-        node-version: 16.14
-    - uses: actions/checkout@v2
-    - 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
-    - name: upload dist
-      if: github.event_name != 'pull_request'
-      run: |
-        cd web
-        wget http://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
+      - name: use node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16.14
+
+      - uses: actions/checkout@v2
+      - 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
+
+      - name: upload dist
+        if: github.event_name != 'pull_request'
+        run: |
+          cd web
+          wget http://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
+
+      - name: docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: emqx/mqttx-web
+          flavor: |
+            latest=true
+          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
+          tags: ${{ steps.meta.outputs.tags }}

web/Dockerfile

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

web/package.json

@@ -5,21 +5,21 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "start": "http-server dist -o /online-mqtt-client",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "axios": "^0.21.2",
-    "core-js": "^2.6.11",
+    "core-js": "~2.6.11",
     "element-ui": "^2.13.0",
     "fs-extra": "^8.1.0",
-    "jump.js": "^1.0.2",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
     "moment": "^2.29.4",
     "monaco-editor": "^0.25.2",
-    "mqtt": "^4.2.1",
-    "vue": "^2.6.10",
+    "mqtt": "4.2.1",
+    "vue": "~2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-click-outside": "^1.1.0",
     "vue-clipboard2": "^0.3.1",
@@ -36,7 +36,6 @@
     "@fullhuman/vue-cli-plugin-purgecss": "~2.2.0",
     "@types/chai": "^4.1.0",
     "@types/fs-extra": "^8.0.0",
-    "@types/jump.js": "^1.0.3",
     "@types/lodash": "^4.14.142",
     "@types/lowdb": "^1.0.9",
     "@types/mocha": "^5.2.7",
@@ -55,11 +54,12 @@
     "eslint": "6.5.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "http-server": "^14.1.1",
     "monaco-editor-webpack-plugin": "^4.0.0",
     "prettier": "^2.0.5",
     "sass": "1.32.13",
     "sass-loader": "^10.1.1",
     "typescript": "^3.7.4",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "~2.6.10"
   }
 }

web/src/router/index.ts

@@ -9,7 +9,7 @@ const router: Router = new Router({
   mode: 'hash',
   base: process.env.BASE_URL,
   scrollBehavior(to, from, savedPosition) {
-    if (to.meta.keepAlive && savedPosition) {
+    if (to.meta?.keepAlive && savedPosition) {
       return savedPosition
     }
     return { x: 0, y: 0 }

web/src/types/shims-vue.d.ts

@@ -1,5 +1,4 @@
 declare module 'lodash-id'
-declare module 'jump.js'
 declare module 'uuid'
 declare module 'vue-click-outside'
 declare module 'vue-virtual-scroller'