Docker部署前端dist

1、打包Vue工程并同时编写default.conf文件和Dockerfile文件

2、default.conf文件和Dockerfile文件详细

default.conf配置

server {
        listen 80;
        server_name vlab.heidongtech.com;
        root html;
        index index.html index.htm;
        proxy_set_header REGION cn;

        location /lab {
            root /opt/workspace/vlab;
            index index.html index.htm;
            try_files $uri $uri/ /lab/index.html;
        }
        location /vlab {
            client_max_body_size 50M;
            proxy_pass http://localhost:8078;
        }
    }

Dockerfile配置

FROM nginx
ENV TimeZone=Asia/Shanghai
# 将前端dist文件中的内容复制到nginx目录
COPY  lab/  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY default.conf  /etc/nginx/nginx.conf
EXPOSE 8088
~

3、构建镜像

docker build -t lab .

4、查看当前镜像

docker images

5、发现前端的镜像没有标签，给前端的镜像设置标签名称

docker tag  6ba6db0eca40 name（想要给与的名称）

6、创建一个新的容器并运行

docker run -d -p 8088:80 --name httvue vue 


docker run -d -p 8088:8088 --name lab -v /opt/html:/usr/share/nginx/html -v /opt/docker2/nginx.conf:/etc/nginx/nginx.conf lab


#将8088端口映射到80端口，端口记得放开
#httvue为自定义容器名字
#vue是镜像名字

7、查看正在运行的容器

docker ps