Docker 部署Vue前端服务

柒色q

已于 2022-06-06 23:28:21 修改

阅读量345

点赞数

文章标签： vue.js 前端 docker

于 2022-06-06 23:25:09 首次发布

本文链接：https://blog.csdn.net/suqa1/article/details/125156377

版权

1、首先配置代码编译时候使用gzip压缩，减少服务器压力

以vue3 为例子 vite.config.ts 文件

// @ts-ignore
import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import vueJsx from '@vitejs/plugin-vue-jsx';
// gizp
// @ts-ignore
import viteCompression from 'vite-plugin-compression';

function _resolve(dir: string) {
  return path.resolve(__dirname, dir);
}

// https://vitejs.dev/config/
export default ()=>defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`,
      },
    },
  },
  plugins: [
    viteCompression(),
    vue(),
    vueJsx(),
    eslintPlugin({

    }),
  ],
  resolve: {
    alias: {
      '@': _resolve('./src/'),
    },
  },
});

2.编写Dockerfile

FROM suteqa/go-web
COPY ./dist/ /html/

## 以下代码是traefik 配置, 不使用可以删除
LABEL traefik.enable=true
LABEL traefik.http.routers.im-web.entrypoints=websecure
LABEL traefik.http.routers.im-web.rule=Host(`im-web.idb.com.cn`)
LABEL traefik.http.services.im-web.loadbalancer.server.port=9090

3.构建项目

#!/bin/bash -il

#1 安装依赖

cnpm i

#2 构建

cnpm run build

#3 创建临时目录(可以避免打包时候扫描 node_modules)，以及拷贝需要包的文件

mkdir _temp

mv dist _temp/
cp Dockerfile _temp/
cd _temp

##4 构建镜像
docker build -t im-mobile-web .

##5. 运行镜像 - 镜像内部服务为9090端口-映射出外网的80端口
docker run -d --name im-mobile-web \
--net proxy \

-p 80:9090 \
--restart=always \
im-mobile-web

##6. 删除临时目录
cd ../
rm -rf _temp