安装docker

1.下载nginx镜像， 不指定版本默认拉取最新版本
　　docker pull nginx
2、创建nginx挂载目录， 目录可以自己随便建
　　mkdir -p /usr/yuxuefei/soft/nginx/{conf,log,html}
3、启动nginx容器，如果非80端口则使用自己实际端口
　　docker run --name nginx -p 80:80 -d nginx
4、将nginx容器下文件，copy到步骤2的挂载目录下
　　docker cp nginx:/etc/nginx/conf.d /usr/yuxuefei/soft/nginx/conf/conf.d
　　docker cp nginx:/etc/nginx/nginx.conf /usr/yuxuefei/soft/nginx/conf/nginx.conf
　　docker cp nginx:/usr/share/nginx/html/index.html /usr/yuxuefei/soft//html/index.html
5、修改conf.d下的default.conf，换成自己的配置。nginx.conf在结尾会包含conf.d下的default.conf内容
6、删除容器
　　docker rm -f nginx

打包vue的dist

根据package.json的脚本命令执行具体的打包命令，如npm run build、npm run build:dev、npm run build:prod。
将打包好的dist文件放到/usr/yuxuefei/soft/nginx目录下

配置default.conf

server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }


    location /dev-api/ { # 假设这是你的后端API的前缀
        proxy_pass http://172.19.101.2:8080/; # 这个ip是我的docker后端服务器的宿主机内部ip
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 重写URL，移除/dev-api前缀
        # 我这里的/dev-api/是vue的路由前缀，后端api接口并没有这个前缀，所以代理时需要去掉
        rewrite ^/dev-api/(.*)$ /$1 break;
    }


    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }


}

启动命令

docker run \
    -p 80:80 \
    -p 81:81 \
    -p 443:443 \
    --name nginx \
    --restart=always \
    -v /usr/yuxuefei/soft/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
    -v /usr/yuxuefei/soft/nginx/conf/conf.d:/etc/nginx/conf.d \
    -v /usr/yuxuefei/soft/nginx/log:/var/log/nginx \
    -v /usr/yuxuefei/soft/nginx/dist:/usr/share/nginx/html \
    -d nginx

其中，-v /usr/yuxuefei/soft/nginx/dist:/usr/share/nginx/html 是将dist文件挂载到nginx容器的html下。