部署Vue前端项目

首先需要将原始nginx配置拷贝出来

# 拉取镜像
docker pull nginx
# 启动一个默认容器 --rm 即停止容器中自动删除容器
docker run --rm --name nginx1 -p 80:80 -d nginx
# 拷贝default.conf 到宿主机目录 方便日后修改conf 
# 在镜像中 /etc/nginx/nginx.conf  中 include了 default 所以我们直接拷贝default.conf即可
docker cp nginx1:/etc/nginx/conf.d/ /data/nginx/conf/

打包vue项目

在vue3.0项目根目录创建一个vue.config.js文件，进行配置打包配置，下面是最基础的配置

module.exports = {
	// 这是测试开发时用的 打包未使用
    devServer: {
        proxy: {
            '/api': {
                target: "http://localhost:9001",
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                },
                // onProxyRes: function (proxyRes, req, res) {
                //     const location = proxyRes.headers['location']
                //     const locationRE = /http(?:s)?:\/\/[0-9.:]+?(\/.*?[a-zA-Z]+)$/
                //     if (location) {  // 后端重定向的话返回headers中会有location
                //         const matched = location.match(locationRE)
                //         const matchGroup = matched && matched[1]
                //         proxyRes.headers['location'] = matchGroup ? `http://localhost:8080${matchGroup}` : location
                //     }
                // }
            }
        }
    },
    configureWebpack: {
        plugins: [
            require('unplugin-vue-components/webpack')({ /* options */ }),
        ],
    },
	// 打包配置
    //基本路径 配置 ./ 防止打包无法访问资源
    publicPath: './',
    //输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir: 'static',
}

打包

npm run build

将打包后的文件放到服务器上

由于目前未配置后端项目，所以先略，直接run nginx查看效果

docker run -idt -p 80:80 --name nginx1 \
-v /data/nginx/dist/:/usr/share/nginx/html \
-v /data/nginx/conf/:/etc/nginx/conf.d/ \
-v /data/nginx/logs/:/var/log/nginx nginx \

查看效果