使用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. 效果(後臺接口調用成功)