fix: Docker 打包逻辑改进，彻底解决缓存问题 (#3473)

胤玄

2023-12-27 dcbe5510d42c3dc5e93b68704a5fa24c88d4de69

fix: Docker 打包逻辑改进，彻底解决缓存问题 (#3473)

* feat: update nginx.conf 使用固定编译入口可能导致浏览器使用缓存js文件，而此配置可以解决

* feat: 更新docker打包逻辑： 原本固定的entry是为了方便替换环境变量，同时在nginx配置内让每次获取js等资源都不走缓存。这样的问题是首次打开会很慢。
因此本次使用的解决方案，回归vben原本的hash+timestamp的入口文件名，但是在环境变量替换的时候使用模糊匹配。
大家有类似需要可以参考环境变量的方式做 单镜像打包多环境的适配。

 Dockerfile

@@ -5,7 +5,7 @@
WORKDIR /app
COPY . ./
# 设置 node 阿里镜像
RUN npm config set registry https://registry.npm.taobao.org
RUN npm config set registry https://registry.npmmirror.com
# 设置--max-old-space-size
ENV NODE_OPTIONS=--max-old-space-size=16384
# 设置阿里镜像、pnpm、依赖、编译
@@ -20,7 +20,6 @@
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 && \
CMD sed -i "s|__vg_base_url|$VG_BASE_URL|g" /usr/share/nginx/html/dist/assets/entry/index-*.js /usr/share/nginx/html/dist/_app.config.js && \
    nginx -g 'daemon off;'
RUN echo "🎉 架 🎉 设 🎉 成 🎉 功 🎉"

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

@@ -36,7 +36,7 @@
    });

    const pathResolve = (pathname: string) => resolve(root, '.', pathname);

    const timestamp = new Date().getTime();
    const applicationConfig: UserConfig = {
      base: VITE_PUBLIC_PATH,
      resolve: {
@@ -64,7 +64,7 @@
        rollupOptions: {
          output: {
            // 入口文件名
            entryFileNames: 'assets/[name].js',
            entryFileNames: `assets/entry/[name]-[hash]-${timestamp}.js`,
            manualChunks: {
              vue: ['vue', 'pinia', 'vue-router'],
              antd: ['ant-design-vue', '@ant-design/icons-vue'],

 nginx.conf

@@ -30,9 +30,10 @@
                add_header 'Content-Length' 0;
                return 204;
            }
            if ($request_filename ~* ^.*?.(html|htm|js)$) {
              add_header Cache-Control no-cache;
            }
#           docker 改造之后不再需要
#           if ($request_filename ~* ^.*?.(html|htm|js)$) {
#             add_header Cache-Control no-cache;
#           }
        }
    }
}