Docker dynamic publish support. (#2903)

* feat: Docker support, including dynamic publish

* fix:  run container command

.dockerignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.vscode/

.env.docker

@@ -0,0 +1,22 @@
+# Whether to open mock
+VITE_USE_MOCK = false
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# timeout(seconds)
+VITE_TIMEOUT = 15
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+VITE_GLOB_API_URL="__vg_base_url"
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=/files/upload
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=

Dockerfile

@@ -0,0 +1,26 @@
+# node 构建
+FROM node:16-alpine as build-stage
+# 署名
+MAINTAINER Adoin 'adoin@qq.com'
+WORKDIR /app
+COPY . ./
+# 设置 node 阿里镜像
+RUN npm config set registry https://registry.npm.taobao.org
+# 设置--max-old-space-size
+ENV NODE_OPTIONS=--max-old-space-size=16384
+# 设置阿里镜像、pnpm、依赖、编译
+RUN npm install pnpm -g && \
+    pnpm install --frozen-lockfile && \
+    pnpm build:docker
+# node部分结束
+RUN echo "🎉 编 🎉 译 🎉 成 🎉 功 🎉"
+# nginx 部署
+FROM nginx:1.23.3-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html/dist
+COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
+EXPOSE 80
+## 将/usr/share/nginx/html/dist/assets/index.js 和/usr/share/nginx/html/dist/_app.config.js中的"$vg_base_url"替换为环境变量中的VG_BASE_URL,$vg_sub_domain 替换成VG_SUB_DOMAIN，$vg_default_user替换成VG_DEFAULT_USER，$vg_default_password替换成VG_DEFAULT_PASSWORD 而后启动nginx
+CMD sed -i "s|__vg_base_url|$VG_BASE_URL|g" /usr/share/nginx/html/dist/assets/index.js && \
+    sed -i "s|__vg_base_url|$VG_BASE_URL|g" /usr/share/nginx/html/dist/_app.config.js && \
+    nginx -g 'daemon off;'
+RUN echo "🎉 架 🎉 设 🎉 成 🎉 功 🎉"

README.md

@@ -86,6 +86,24 @@ pnpm serve
 pnpm build
 ```
 
+- docker
+
+### The dockerFile is located in the project root directory and supports differential deployment
+
+#### build image
+
+```bash
+docker build -t vue-vben-admin .
+```
+
+#### Environment variables are dynamically used to achieve differentiated container deployment. Different VG_BASE_URL environment variables point to different back-end service addresses. In the following example, http://localhost:3333 is used as the back-end service address and the container is mapped to port 6666
+
+```bash
+docker run --name vue-vben-admin -d -p 6666:80  -e VG_BASE_URL=http://localhost:3333 vue-vben-admin
+```
+
+Then you can navigate http://localhost:6666
+
 ## Change Log
 
 [CHANGELOG](./CHANGELOG.zh_CN.md)

README.zh-CN.md

@@ -86,6 +86,24 @@ pnpm serve
 pnpm build
 ```
 
+- docker
+
+### dockerFile 位于项目根目录下 并且支持差异化部署
+
+#### 构建镜像
+
+```bash
+docker build -t vue-vben-admin .
+```
+
+#### 动态使用环境变量实现容器差异化部署,通过不同的 VG_BASE_URL 环境变量，指向不同的后端服务地址，下面例子使用 http://localhost:3333 作为后端服务地址，并且将容器映射到 6666 端口
+
+```bash
+docker run --name vue-vben-admin -d -p 6666:80  -e VG_BASE_URL=http://localhost:3333 vue-vben-admin
+```
+
+而后可以打开 http://localhost:6666 访问
+
 ## 更新日志
 
 [CHANGELOG](./CHANGELOG.zh_CN.md)

internal/vite-config/src/config/application.ts

@@ -69,6 +69,8 @@ function defineApplicationConfig(defineOptions: DefineOptions = {}) {
         cssTarget: 'chrome80',
         rollupOptions: {
           output: {
+            // 入口文件名
+            entryFileNames: 'assets/[name].js',
             manualChunks: {
               vue: ['vue', 'pinia', 'vue-router'],
               antd: ['ant-design-vue', '@ant-design/icons-vue'],

internal/vite-config/src/plugins/index.ts

@@ -4,6 +4,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import DefineOptions from 'unplugin-vue-define-options/vite';
 import { type PluginOption } from 'vite';
 import purgeIcons from 'vite-plugin-purge-icons';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 
 import { createAppConfigPlugin } from './appConfig';
 import { configCompressPlugin } from './compress';
@@ -11,7 +12,7 @@ import { configHtmlPlugin } from './html';
 import { configMockPlugin } from './mock';
 import { configSvgIconsPlugin } from './svgSprite';
 import { configVisualizerConfig } from './visualizer';
-import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+
 interface Options {
   isBuild: boolean;
   root: string;

nginx.conf

@@ -0,0 +1,37 @@
+#user  nobody;
+worker_processes  1;
+
+#error_log  logs/error.log;
+#error_log  logs/error.log  notice;
+#error_log  logs/error.log  info;
+
+#pid        logs/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    server {
+    listen 80;
+	    location / {
+ 			  root /usr/share/nginx/html/dist;
+        try_files $uri $uri/ /index.html;
+        index  index.html;
+        # Enable CORS
+        add_header 'Access-Control-Allow-Origin' '*';
+        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+        if ($request_method = 'OPTIONS') {
+            add_header 'Access-Control-Max-Age' 1728000;
+            add_header 'Content-Type' 'text/plain charset=UTF-8';
+            add_header 'Content-Length' 0;
+            return 204;
+        }
+	    }
+}
+}

package.json

@@ -19,6 +19,7 @@
     "bootstrap": "pnpm install",
     "build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build",
     "build:analyze": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --mode analyze",
+    "build:docker": "vite build --mode docker",
     "build:no-cache": "pnpm clean:cache && npm run build",
     "build:test": "cross-env NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --mode test",
     "commit": "czg",
@@ -103,7 +104,7 @@
     "vue-router": "^4.1.6",
     "vue-types": "^5.0.2",
     "vuedraggable": "^4.1.0",
-    "vxe-table": "^4.3.11",
+    "vxe-table": "^4.4.5",
     "vxe-table-plugin-export-xlsx": "^3.0.4",
     "xe-utils": "^3.5.7",
     "xlsx": "^0.18.5"

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -97,9 +101,6 @@ importers:
       vditor:
         specifier: ^3.9.1
         version: 3.9.1
-      vite-plugin-vue-setup-extend:
-        specifier: ^0.4.0
-        version: 0.4.0(vite@4.3.0-beta.2)
       vue:
         specifier: ^3.2.47
         version: 3.2.47
@@ -119,11 +120,11 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.2.47)
       vxe-table:
-        specifier: ^4.3.11
+        specifier: ^4.4.5
-        version: 4.3.11(vue@3.2.47)(xe-utils@3.5.7)
+        version: 4.4.5(vue@3.2.47)(xe-utils@3.5.7)
       vxe-table-plugin-export-xlsx:
         specifier: ^3.0.4
-        version: 3.0.4(vxe-table@4.3.11)
+        version: 3.0.4(vxe-table@4.4.5)
       xe-utils:
         specifier: ^3.5.7
         version: 3.5.7
@@ -236,6 +237,9 @@ importers:
       vite-plugin-mock:
         specifier: ^2.9.6
         version: 2.9.6(mockjs@1.1.0)(rollup@2.79.1)(vite@4.3.0-beta.2)
+      vite-plugin-vue-setup-extend:
+        specifier: ^0.4.0
+        version: 0.4.0(vite@4.3.0-beta.2)
       vue-tsc:
         specifier: ^1.2.0
         version: 1.2.0(typescript@5.0.3)
@@ -2436,7 +2440,7 @@ packages:
     dependencies:
       '@volar/language-core': 1.3.0-alpha.0
       '@volar/source-map': 1.3.0-alpha.0
-      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-dom': 3.3.4
       '@vue/compiler-sfc': 3.2.47
       '@vue/reactivity': 3.2.47
       '@vue/shared': 3.2.47
@@ -2622,7 +2626,7 @@ packages:
       js-beautify: 1.14.6
       vue: 3.2.47
     optionalDependencies:
-      '@vue/compiler-dom': 3.2.47
+      '@vue/compiler-dom': 3.3.4
       '@vue/server-renderer': 3.2.47(vue@3.2.47)
     dev: true
 
@@ -9673,7 +9677,7 @@ packages:
       '@vue/compiler-sfc': 3.2.47
       magic-string: 0.25.9
       vite: 4.3.0-beta.2(@types/node@18.15.11)(less@4.1.3)(sass@1.60.0)
-    dev: false
+    dev: true
 
   /vite@4.3.0-beta.2(@types/node@18.15.11)(less@4.1.3)(sass@1.60.0):
     resolution: {integrity: sha512-RRghM7RiRnwknCG3hS+NE8C+N3CNX4yKfVhFxO3NqrtYErN6htac//De9IwIHWqgV8DdKoNPeK8Yb/FOlZvjoQ==}
@@ -9851,16 +9855,16 @@ packages:
       vue: 3.2.47
     dev: false
 
-  /vxe-table-plugin-export-xlsx@3.0.4(vxe-table@4.3.11):
+  /vxe-table-plugin-export-xlsx@3.0.4(vxe-table@4.4.5):
     resolution: {integrity: sha512-Og/NbXRIb+BS6sJ48oDNVrZnlkcpaCd/zS8JBAZjHLgioWr1Xoob6FEpaeXBebGPPgTumZNUrrBO57JhhYAerA==}
     peerDependencies:
       vxe-table: ^4.0.27
     dependencies:
-      vxe-table: 4.3.11(vue@3.2.47)(xe-utils@3.5.7)
+      vxe-table: 4.4.5(vue@3.2.47)(xe-utils@3.5.7)
     dev: false
 
-  /vxe-table@4.3.11(vue@3.2.47)(xe-utils@3.5.7):
+  /vxe-table@4.4.5(vue@3.2.47)(xe-utils@3.5.7):
-    resolution: {integrity: sha512-n2OXuUaKurVxxhRz0b1DojLdvtYwKkidRAqI9oGDw2IQ0y2IPs2Oq+lX2V6ar3glFdjjkS3BqnDBAk0elt6e0Q==}
+    resolution: {integrity: sha512-5huB/p0pVgFZjH/abLkWBFnBFe/9mozdQmbXehiGZJHQ6KfzLEsqpKbPsKAnMYEhezPmH4igdhYkXxb7ohWbTA==}
     peerDependencies:
       vue: ^3.2.28
       xe-utils: ^3.5.0