1.新建一个项目 比如vue init vue@latest完事之后运行打包到build目录下

2.在项目根目录下通过执行命令
touch Dockerfile

3.拉取nginx镜像
首先打开你的Docker，默认会启动。控制台拉取 Nginx 镜像：运行

docker pull nginx

4.在根目录创建Nginx配置文件

touch default.conf

写入：

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

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

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

5.配置镜像
打开Dockerfile文件，写入：

FROM nginx  
COPY dist/ /usr/share/nginx/html/  
COPY default.conf /etc/nginx/conf.d/default.conf  

解释一些对应代码的大概意思：

1. FROM nginx 指定该镜像是基于 nginx:latest 镜像而构建的；

2. COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下；

3. COPY default.conf /etc/nginx/conf.d/default.conf 将 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

6.构建镜像

docker build -t vue2.0-system .

出现上面的信息表示构建成功
-t 参数给镜像命名 vue2.0-system
. 是基于当前dockerfile目录来构建的镜像

运行docker image ls | grep docker-demo-vue查看镜像，可以看到我们构建镜像的大小

7.运行容器
docker run -d -p 3000:80 --name docker-vue vue2.0-system

命令说明：
-d 设置容器在后台运行
-p 表示端口映射，把本机的 3000 端口映射到 container 的 80 端口（这样外网就能通过本机的 3000 端口访问了。
–name 设置容器名 docker-vue
vue2.0-system 是我们上面构建的镜像名字
可以运行docker ps -a 查看容器id：

8.访问项目
我们打开http://localhost:3000/，就可以在浏览器中看到对应的页面，跟我们前面创建项目的时候看到的界面是一样的
也可以使用curl -v -i localhost:3000 去查看对应的静态文件

docker的发布流程

// 1.查看目前已经在运行的容器有哪些
docker ps 
docker ps -a 查看全部的容器

// 2. 停掉某一个容器
docker stop 容器ID

// 3.删除容器
docker rm 容器ID

// 4. 查看已经运行的镜像
docker images
docker images -a   // 查看全部镜像

// 5. 删除镜像
docker rmi 镜像id

// 6. 在创建镜像 注意后面的点 .    创建之后查看  docker images
docker build -t  my-vue . 

// 7.创建容器
docker run -d -it --add-host="jeecg-boot-system:127.0.0.1" -p 80:80 jeecg-boot-ui

// 8. 查看容器是否启用成功
docker ps  / docker container ls
或者docker ps -a
或者 docker logs -f  容器ID 查看是否运行

// 9.docker stats 查看容器资源占用
docker stats 容器名

// 10.

作为一名前端工程，掌握基本的前端打包发布流程很有必要

这里解释一下 创建容器的这个指令的意思
docker run -d -it --add-host=“jeecg-boot-system:127.0.0.1” -p 80:80 jeecg-boot-ui

1. -d: 后台运行容器，并返回容器ID；
2. -it：可交互式、赋予 tty 的方式
3. -p：host-port:container-port：宿主机与容器端口映射，方便容器对外提供服务， 一般发布都是以80为主，因为80可以省略，如果是其他端口，在访问浏览器的时候就需要带上端口号了
4. –add-host 就是配置host，部署在docker环境的项目，需要通过域名访问外部一些资源，但因为没有配置dns解析，因此需要通过配置hosts来进行访问，所以需要配置host

启动 nginx 容器，并在本地 8888 端口进行访问 命令：
docker run --rm -it --name nginx -p 8888:80 nginx:alpine

–rm：当停止容器时自动清除容器