使用docker+nginx部署vue项目

1. 首先准备好docker环境，在centos下的
      环境如下：
         
2. 首先拉取最新的nginx
    命令：
        docker pull nginx
    
3.  在data下面创建分别创建以下四个目录
       mkdir -p /mydata/nignx/conf 挂载容器里面的配置，即nginx.conf
       mkdir -p /mydata/nignx/conf.d 挂载容器里面的子配置,即nginx.conf里面include的配置文件
       mkdir -p /mydata/nignx/logs 挂载容器里面的代理的日志文件
       mkdir -p /mydata/nignx/html 挂载容器里面的界面的访问
4. 启动nginx(先不挂载nginx.con配置文件)
     docker run  --name nginx -d -p 80:80 --name nginx1.0 \    
     -v /mydata/nignx/logs:/var/log/nginx nginx
    
5.  然后使用如下命令进入交互式终端：
    docker exec -it nginx1.0 /bin/bash
    进入后可以看到在nginx1.0的容器中：
    /etc/nginx/目录下存在nginx.conf，
    /etc/nginx/conf.d/目录下存在default.conf文件
    
6. 退出容器，使用下面的命令，将容器中的两个文件拷贝到我们前面准备的指定挂载mulxia
    docker cp nginx1.0:/etc/nginx/nginx.conf /mydata/nignx/conf/ #使用id或names【mynginx】
    docker cp nginx1.0:/etc/nginx/conf.d/default.conf /mydata/nignx/conf.d/
    
7. 删除容器
    docker stop nginx1.0
    docker rm -f nginx1.0
    
8. 使用挂载目录去创建nginx容器并启动命令：
    docker run  --name nginx -d -p 7070:80 \
   -v /mydata/nignx/html:/usr/share/nginx/html \
   -v /mydata/nignx/conf/nginx.conf:/etc/nginx/nginx.conf \
   -v /mydata/nignx/conf.d:/etc/nginx/conf.d \
   -v /mydata/nignx/logs:/var/log/nginx nginx
    命令解读：
       run：启动一个docker容器
       name：容器的名称
       d: 后台启动
       p: 绑定别的端口 -p a:b 将宿主机器的a端口绑定到容器的b端口 -P 为随机绑定到端口
       v : 挂载的内容 宿主机器的文件夹：容器的文件夹
9. 随便写一个html页面放到/mydata/nignx/html下，否则会报403
    效果：
       
10. ok上面nginx配置好了，开始打包我们的vue项目
     首先修改config下的index.js文件
     
11. 打包vue项目路径：
     命令：cnpm run build
     
     打包完成后再vue项目的目录下会多出一个dist目录
     
12. 将dist目录上传到linux指定的目录下，并且编写Dockerfile文件以及default.conf文件
     
13. default.conf文件
     
14. Dockerfile文件
     
15. 执行我们的Dockerfile文件生成amsvue容器
     命令：
          docker build -t amsvue .
     
     
     如上可发现已经生成镜像文件
16. 下面我们创建并且启动容器
     命令：
         docker run --name=amsvue -d -p 9090:80 amsvue
     
17. 效果(后台接口调用成功)