Docker+Nginx 部署 Vue 專案（保姆級總結）

一、思路總結

利用 Docker + Nginx 部署 Vue 專案，先將 Vue 專案通過 build 命令構建成一個 dist檔案夾，然后將這個檔案夾交給 nginx 進行代理（這里利用的是反向代理，作用是可以對外隱藏專案的真實埠），然后撰寫 Dockerfile檔案，在 nginx 基礎鏡像之上，構建一層屬于我們自己的鏡像，然后打包，Dockerfile 主要是配置 “vue 專案目錄” 和 “nginx的組態檔”，將這兩個檔案拷貝映射到 nginx 容器內部，撰寫好 Dockerfile 檔案后，通過build 命令構建鏡像，最后將這個自定義的nginx鏡像發布到DockerHub倉庫，其他人就可以去DockerHub將鏡像 pull 下來，利用這個鏡像創建并運行一個容器就可以直接運行我們這個專案，

二、具體程序分析

（1）用指令 npm run build 打包 vusjs 專案，打包成功后會生成一個目錄 dist

[root@wuze chess]# npm run build

生成了dist目錄：

（2）把該檔案夾拷貝到阿里云服務器（作業系統 centos7）下的 /usr/share 目錄下

[root@wuze bigcourse]# cp -r /home/2020yunjisuan/bigcourse/chess/dist /usr/share 
[root@wuze bigcourse]# cd /usr/share/
[root@wuze share]# ll

（3）在 /usr/share 目錄下新建Dockerfile 檔案

Dockerfile檔案內容：

# 設定基礎鏡像
FROM nginx
# 定義作者
MAINTAINER wuze <wuzest@163.com>
# 將dist檔案中的內容復制到 /usr/share/nginx/html/ 這個目錄下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'

（4）新建檔案 nginx.conf，指定讀取路徑 /usr/share/nginx/html

worker_processes auto;

 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  _;
 
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

（5）在 share 目錄中，然后 用括號里指令 (docker build -t myvue:V1.0 .) 構建鏡像，（注意最后的 .）

[root@wuze share]# docker build -t myvue:V1.0 .
Sending build context to Docker daemon  645.9MB
Step 1/5 : FROM nginx
 ---> ae2feff98a0c
Step 2/5 : MAINTAINER wuze <wuzest@163.com>
 ---> Using cache
 ---> 368cd9413d73
Step 3/5 : COPY dist/  /usr/share/nginx/html/
 ---> 79bf2529bb17
Step 4/5 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> f3a6fcdf323f
Step 5/5 : RUN echo 'echo init ok!!'
 ---> Running in 5ceb3f41d39b
echo init ok!!
Removing intermediate container 5ceb3f41d39b
 ---> c7ff34f49d32
Successfully built c7ff34f49d32
Successfully tagged myvue:V1.0
[root@wuze share]#

查看鏡像 docker images：

（6）運行生成成功的鏡像：docker run -p 3000:80 -d --name myvuetest01 鏡像id

• run: 創建一個新的容器并運行一個命令
• -d: 后臺運行容器，并回傳容器 ID
• -p: 埠映射，格式為：主機 (宿主) 埠：容器埠
• --name "myvuetest01": 為容器指定一個名稱

注意 這里可能會出現一個小問題，可能會報錯：

[root@wuze share]# docker run -p 3000:80 -d --name myvuetest03 c7ff34f49d32
0fef9a9d6790dc518cd7365855445f4533ab98ceacb2cd4d2a88e68d6147430c
docker: Error response from daemon: driver failed programming external connectivity on endpoint myvuetest03 (36dd00046d3b98db5876cdb4aa1b949a5a3c92efca6399617cc6e413c75e59a8):  (COMMAND_FAILED: '/usr/sbin/iptables -w10 -t filter -A DOCKER ! -i docker0 -o docker0 -p tcp -d 172.17.0.4 --dport 80 -j ACCEPT' failed: iptables: No chain/target/match by that name.
).

原因是docker 服務啟動時定義的自定義鏈 DOCKER 由于某種原因被清掉，
重啟 docker 服務及可重新生成自定義鏈 DOCKER，

細節：
重啟后記得更換容器的名稱，因為剛剛雖然沒運行起來容器，但是容器確確實實是已經被創建了，所以兩種方法，一種是手動洗掉那個沒跑起來的容器，一種是再給容器起個新名字，（沒有什么特殊要求的使用第二種就行了，方便簡單）

[root@wuze share]# systemctl restart docker
[root@wuze share]# docker run -p 3000:80 -d --name myvuetest04 c7ff34f49d32
be9543bf00ed437e02e61bce1df075dc7d4b17da1ad76a96737ba53f6555b5cb
[root@wuze share]#

（7）查看docker容器：（利用自定義nginx鏡像的nginx容器創建成功）

[root@wuze share]# docker ps
CONTAINER ID   IMAGE          COMMAND                  CREATED              STATUS              PORTS                  NAMES
be9543bf00ed   c7ff34f49d32   "/docker-entrypoint.…"   About a minute ago   Up About a minute   0.0.0.0:3000->80/tcp   myvuetest04

（8）放行防火墻埠（3000埠），并重啟防火墻

[root@wuze share]# firewall-cmd --zone=public --add-port=3000/tcp --permanent
success
[root@wuze share]# systemctl restart firewalld.service

通過下面命令可以查看防火墻當前對埠的放行狀態：

[root@wuze share]# firewall-cmd --list-all

如果有看到 3000埠 的影子就說明放行成功，

（9）開放阿里云安全組（3000埠）

去控制臺，添加3000埠，阿里云安全組添加后即可生效，不需要重啟（千萬不要重啟阿里云服務器啊！）

（10）部署好后，本地目錄 dist 下的內容可以刪掉（不必須）

（11）本地瀏覽器訪問測驗（域名:3000或者 服務器ip:3000）

如果不想訪問時出現:3000埠的字樣，可以在前面 “創建并運行容器” 那里將容器的埠改成80，因為http協議默認埠為80

專案就算部署成功了！搞定收工！

（12）后續：可以將鏡像打包發布到 DockerHub，提供給其他人下載、開發

[root@wuze share]# docker tag c7ff34f49d32 wuzewz/myvue1224:1.0
[root@wuze share]# docker push wuzewz/myvue1224:1.0
The push refers to repository [docker.io/wuzewz/myvue1224]
3610e5e82cf2: Pushed 
326e772158f9: Pushed 
4eaf0ea085df: Mounted from library/nginx 
2c7498eef94a: Mounted from library/nginx 
7d2b207c2679: Mounted from library/nginx 
5c4e5adc71a8: Mounted from library/nginx 
87c8a1d8f54f: Mounted from library/nginx 
1.0: digest: sha256:d432798af2695fc0c552303676f6ad4bba546fd2f4606ab5b30e9e4ec5033113 size: 1779
[root@wuze share]#

搞定收工！