Docker部署前端dist打包项目

1.创建上传前端项目压缩包存放路径

`

# 进入目录
cd /usr/local/src

#创建文件夹 (vue 是文件夹名称  即项目名 方便区分)
mkdir vue

2.上传项目压缩包到创建好目录 /usr/local/src/vue

3.解压压缩包

#解压  dist.zip 压缩包名称
unzip dist.zip

4.编辑文件 Dockerfile

vim Dockerfile

#内容

FROM nginx

WORKDIR /usr/share/nginx/html/
USER root

COPY ./nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

#前端项目端口
EXPOSE 8084

CMD ["nginx", "-g", "daemon off;"]

保存退出

5.编辑文件 nginx.conf

vim nginx.conf

#内容 

server {
    #监听的前端端口
    listen 8084;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript 		  application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;   
    location / {
        index index.html;
        # 尝试解析文件/文件夹，解析不到，跳到后端处理
        try_files $uri $uri/ @mq;
 
    }
    location @mq {
	rewrite ^/api(.*)$ $1 break;
	    # 钻发的后端 IP和端口
        proxy_pass http://192.168.236.128:8802;
    }
}

保存退出

6. 构建镜像

#vue  为项目名 
# docker build -t vue:0.1 .   (构建版本镜像)
docker build -t vue .

#查看镜像
docker images

7. 创建一个新的容器并运行

#docker run -d -p 8084:8084 --restart=always  --name  vue  vue:0.1  
docker run -d -p 8084:8084 --restart=always  --name  vue  vue 

8. 放行端口

firewall-cmd --zone=public --add-port=8084/tcp --permanent

# 刷新一下
firewall-cmd --reload

# 查看放行端口
firewall-cmd --zone=public --list-ports