1.vue使用npm run build：prod/stage进行打包，打包生成dist包
    dist包内部如图：
    image.png
    编写Dockerfile文件
    敏于春的dockerfile使用的是客户的dockerfile，如图

    1. FROM nginx:1.16-alpine
    3. ENV LANG C.UTF-8
    5. RUN echo "http://mirrors.aliyun.com/alpine/latest-stable/main/" > /etc/apk/repositories && \
    6.     echo "http://mirrors.aliyun.com/alpine/latest-stable/community/" >> /etc/apk/repositories && \
    7.     apk update && \
    8.     apk add --no-cache ca-certificates && \
    9.     apk add --no-cache curl bash tree tzdata && \
    10.     cp -rf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
    12. COPY dist/  /usr/share/nginx/html/
    13. ADD default.conf /etc/nginx/conf.d/
    15. ENTRYPOINT ["nginx","-g","daemon off;"]

    DockerFile的ADD和COPY的区别
    COPY指令和ADD指令的唯一区别在于：是否支持从远程URL获取资源。
    COPY指令只能从执行docker build所在的主机上读取资源并复制到镜像中。而ADD指令还支持通过URL从远程服务器读取资源并复制到镜像中。
    相同需求时，推荐使用COPY指令。ADD指令更擅长读取本地tar文件并解压缩。
    ADD和COPY指令
    COPY同ADD的语法一致，复制拷贝文件。
    ADD
    复制新文件、目录或远程文件 URL ，并将它们添加到中。
    可以指定多个资源，但如果它们是文件或目录，则它们的路径被解释为相对于构建上下文的源，也就是WORKDIR。

    从dockerfile中可以看到需要一个default.conf文件，于是到原本部署的vue容器中找到defalut.conf文件，复制里面的内容，和dockerfile、打包的dist、Dockerfile放在一个文件夹内
    image.png
    使用

    docker build -t +镜像名字+ . 进行镜像的构建

    构建完后使用docker images查看镜像id
    先停止原本的容器，避免端口冲突，命令：docker +stop+ 镜像名字

    如果出现一下错误表示前端容器无法和后端容器进行通信，需要配置自定义网络

    image.png
    设置自定义网络的方法
    image.png
    docker network ls命令列出所有的自定义网络
    以上图为例，最后的mynet为自定义网络名字，这里的bridge就是默认的docker0
    使用docker network ls查看已经有的NETWORK ID
    查看自定义网络包含哪些容器的命令：
    docker +network +inspect+自定义网络名称
    image.png
    容器加入到自定义网络命令：
    docker run -d —name 容器名 -p 宿主机端口号：容器端口号 —net network的名字 镜像名
    其中-d的作用是保证容器在后台运行，—name为给容器命名，-P是Docker 会随机映射一个 49000~49900 的端口到内部容器开放的网络端口，-p（小写）则可以指定要映射的IP和端口，但是在一个指定端口上只可以绑定一个容器 ，-p冒号前面的前面为宿主机端口，冒号后面的为容器端口
    docker ps检查容器已经启动即可打开浏览器输入ip地址+宿主机端口号进行访问。

    删除容器命令：docker rm +docker容器的id/docker容器的名字
    删除镜像命令：docker rmi +docker镜像的id/docker镜像的名字

    ip addr 显示网卡状态
    image.png