docker部署wvp-antd-ui教程

简介

部署采用nginx镜像
项目地址：wvp-antd-ui
打包好的前端文件地址：点击下载dist压缩包

创建目录

#创建nginx文件挂载目录
mkdir -p /home/nginx
#创建docker-compose文件存放目录
mkdir /opt/docker/nginx

编写`docker-compose.yml`

推荐使用vscode编写配置文件！！！

version: '3'

services:
# 前端   
  wvp-antd-ui:
    container_name: wvp-antd-ui
    image: nginx:latest
    privileged: true
    restart: always
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8800:8800"
    volumes:
      #- /home/nginx/nginx.conf:/etc/nginx/nginx.conf
      #- /home/nginx/conf.d:/etc/nginx/conf.d
      - /home/nginx/logs:/var/log/nginx
      #- /home/nginx/dist/:/var/www/

volumes先注释掉部分配置，后面我们再打开。

上传`docker-compose.yml`文件

#现在进入到上面创建好的nginx目录
cd /opt/docker/nginx
#执行下面命令上传文件
rz
#执行下面命令查看是否上传成功
ls

启动`docker-compose`

docker-compose up -d

打开浏览器输入：192.168.182.131:8800如果出现 Welcome to nginx!则容器启动成功！注意这里IP地址请输你自己的地址！！！

从容器中拷贝文件到挂载目录

#拷贝conf文件
docker cp wvp-antd-ui:/etc/nginx/nginx.conf /home/nginx/nginx.conf
#拷贝conf.d目录
docker cp wvp-antd-ui:/etc/nginx/conf.d /home/nginx/conf.d

创建`nginx`配置文件

推荐使用vscode！！！！

新建一个wvp.conf，填入下面的内容

server {

    listen 8800;
    listen [::]:8800;
    server_name localhost;

    location ^~/api/ {

        charset utf-8;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        rewrite ^/api/(.*)$ /$1 break;
        # 此处请替换为你的IP地址
        proxy_pass http://192.168.10.205:18080;
    }

    location ^~/static/snap/ {

        charset	utf-8;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 此处请替换为你的IP地址
        proxy_pass http://192.168.10.205:18080;
    }

    location / {

        charset utf-8;
        # 开启gzip
        gzip on;
        #设置压缩所需要的缓冲区大小
        gzip_buffers 32 4k;
        gzip_min_length 1k;
        gzip_comp_level 6;
        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]\.";

        try_files $uri $uri/ /index.html;
        root /var/www;
        index index.html index.htm;

    }


    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

注意修改IP地址！！！

上传Nginx配置文件

#进入nginx的conf.d目录
cd /home/nginx/conf.d
#上传wvp.conf
rz
#查看
ls

上传dist前端UI文件

打包好的前端文件地址：点击下载dist压缩包

cd /home/nginx
#上传dist文件
rz
#解压dist文件
unzip dist

修改`docker-compose.yml`文件

volumes:
      - /home/nginx/nginx.conf:/etc/nginx/nginx.conf
      - /home/nginx/conf.d:/etc/nginx/conf.d
      - /home/nginx/logs:/var/log/nginx
      - /home/nginx/dist/:/var/www/