手把手教你實(shí)現Docker 部署 vue 項目

服務(wù)器

1.寫(xiě)在前面：

docker 作為輕量級虛擬化技術(shù)，擁有持續集成、版本控制、可移植性、隔離性和安全性等優(yōu)勢。本文使用Docker來(lái)部署一個(gè)vue的前端應用，并盡可能詳盡的介紹了實(shí)現思路和具體步驟，以方便有類(lèi)似需要的同學(xué)參考。

Docker 是一個(gè)開(kāi)源的應用容器引擎，讓開(kāi)發(fā)者可以打包他們的應用以及依賴(lài)包到一個(gè)可移植的容器中，該容器包含了應用程序的代碼、運行環(huán)境、依賴(lài)庫、配置文件等必需的資源，通過(guò)容器就可以實(shí)現方便快速并且與平臺解耦的自動(dòng)化部署方式，無(wú)論你部署時(shí)的環(huán)境如何，容器中的應用程序都會(huì )運行在同一種環(huán)境下。（更多詳情請移步docker官網(wǎng)查看docker）

默認已經(jīng)安裝了 docker，@vue/cli

相關(guān)版本：

Docker version 18.09.2, build 6247962
vue cli –version 3.3.0
macOS Mojave Verison 10.14.1

運行環(huán)境為macOS，如果與閱讀者操作系統之間存在差異，請自行調整

相關(guān)鏡像：

nginx:latest
node:latest

2.具體實(shí)現：

用 vue cli 創(chuàng )建一個(gè)vue項目，修改一下創(chuàng )建出來(lái)的項目，在頁(yè)面上寫(xiě)一個(gè)前端接口請求，構建一版線(xiàn)上資源 ，基于nginx docker鏡像構建成一個(gè)前端工程鏡像，然后基于這個(gè)前端工程鏡像，啟動(dòng)一個(gè)容器 vuenginxcontainer。
啟動(dòng)一個(gè)基于 node 鏡像的容器 nodewebserver，提供后端接口。
修改 vuenginxcontainer 的 nginx 配置，使前端頁(yè)面的接口請求轉發(fā)到 nodewebserver 上。
稍作優(yōu)化和改進(jìn)。

3 創(chuàng )建 vue 應用

3.1 vue cli 創(chuàng )建一個(gè)vue項目

運行命令

yarn serve / npm run serve

訪(fǎng)問(wèn) http://wap.friendlycc.com.cn/host/

3.2 改寫(xiě)

稍微改寫(xiě)一下頁(yè)面，在A(yíng)pp.vue中 傳入HelloWorld 組件中的 msg 改為Hello Docker ; created 生命周期中加入一個(gè)接口請求

import axios from \'axios\';

……

axios.get(\'/api/json\', {
 params: {}
}).then(
 res => {
 console.log(res);
 }
).catch(
 error => {
  console.log(error);
 }
)

……

這時(shí)候會(huì )在頁(yè)面控制臺看到一個(gè)報錯信息:

/api/json 接口 404，當然此時(shí)這個(gè)接口還不存在，暫時(shí)寫(xiě)到這里，一會(huì )再調這個(gè)接口。

3.3 構建vue項目

運行命令

yarn build / npm run build

此時(shí)工程根目錄下多出一個(gè) dist

文件夾

如果將該dist目錄整個(gè)傳到服務(wù)器上，部署成靜態(tài)資源站點(diǎn)就能直接訪(fǎng)問(wèn)到該項目。

接下來(lái)就來(lái)構建一個(gè)這樣的靜態(tài)資源站點(diǎn)。

4 構建vue應用鏡像

nginx 是一個(gè)高性能的HTTP和反向代理服務(wù)器，此處我們選用 nginx 鏡像作為基礎來(lái)構建我們的vue應用鏡像。

4.1 獲取 nginx 鏡像

docker pull nginx

docker 鏡像（Image）一個(gè)特殊的文件系統。Docker鏡像是一個(gè)特殊的文件系統，除了提供容器運行時(shí)所需的程序、庫、資源、配置等文件外，還包含了一些為運行時(shí)準備的一些配置參數（如匿名卷、環(huán)境變量、用戶(hù)等）。 鏡像不包含任何動(dòng)態(tài)數據，其內容在構建之后也不會(huì )被改變。
docker 鏡像相關(guān)操作有: 搜索鏡像 docker search [REPOSITORY[:TAG]] 、拉取鏡像 docker pull [REPOSITORY[:TAG]] 、查看鏡像列表 docker image ls 、刪除鏡像： docker image rm [REPOSITORY[:TAG]] / docker rmi [REPOSITORY[:TAG]] 等等。
docker 鏡像名稱(chēng)由REPOSITORY和TAG組成 [REPOSITORY[:TAG]] ，TAG默認為latest

4.2 創(chuàng )建 nginx config配置文件

在項目根目錄下創(chuàng )建 nginx 文件夾，該文件夾下新建文件 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 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 /usr/share/nginx/html;
 }
}

該配置文件定義了首頁(yè)的指向為 /usr/share/nginx/html/index.html , 所以我們可以一會(huì )把構建出來(lái)的index.html文件和相關(guān)的靜態(tài)資源放到 /usr/share/nginx/html 目錄下。

4.3 創(chuàng )建 Dockerfile 文件

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

自定義構建鏡像的時(shí)候基于Dockerfile來(lái)構建。
FROM nginx 命令的意思該鏡像是基于 nginx:latest 鏡像而構建的。
COPY dist/ /usr/share/nginx/html/ 命令的意思是將項目根目錄下dist文件夾下的所有文件復制到鏡像中 /usr/share/nginx/html/ 目錄下。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是將nginx目錄下的default.conf 復制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置來(lái)替換nginx鏡像里的默認配置。

4.4 基于該Dockerfile構建vue應用鏡像

運行命令（注意不要少了最后的 “.” ）

docker build -t vuenginxcontainer .

-t 是給鏡像命名 . 是基于當前目錄的Dockerfile來(lái)構建鏡像

查看本地鏡像，運行命令

docker image ls | grep vuenginxcontainer

到此時(shí)我們的 vue 應用鏡像 vuenginxcontainer 已經(jīng)成功創(chuàng )建。接下來(lái)，我們基于該鏡像啟動(dòng)一個(gè) docker

容器。

4.5 啟動(dòng) vue app 容器

Docker 容器Container： 鏡像運行時(shí)的實(shí)體。鏡像（Image）和容器（Container）的關(guān)系，就像是面向對象程序設計中的類(lèi)和實(shí)例一樣，鏡像是靜態(tài)的定義，容器是鏡像運行時(shí)的實(shí)體。容器可以被創(chuàng )建、啟動(dòng)、停止、刪除、暫停等 。

基于 vuenginxcontainer 鏡像啟動(dòng)容器，運行命令：

docker run \\
-p 3000:80 \\
-d --name vueApp \\
vuenginxcontainer

docker run 基于鏡像啟動(dòng)一個(gè)容器
-p 3000:80 端口映射，將宿主的3000端口映射到容器的80端口
-d 后臺方式運行
–name 容器名 查看 docker 進(jìn)程

docker ps

可以發(fā)現名為 vueApp的容器已經(jīng)運行起來(lái)。此時(shí)訪(fǎng)問(wèn) http://wap.friendlycc.com.cn/host/

應該就能訪(fǎng)問(wèn)到該vue應用:

目前為止，已經(jīng)通過(guò) docker容器部署了一個(gè)靜態(tài)資源服務(wù)，可以訪(fǎng)問(wèn)到靜態(tài)資源文件。還有 /api/json這個(gè)接口數據沒(méi)有，接下來(lái)我們來(lái)解決一下這個(gè)問(wèn)題。

5 接口服務(wù)

再部署一個(gè) node 的容器來(lái)提供接口服務(wù)

5.1 express 服務(wù)

用 node web 框架 express 來(lái)寫(xiě)一個(gè)服務(wù)，注冊一個(gè)返回json數據格式的路由 server.js:

\'use strict\';

const express = require(\'express\');

const PORT = 8080;
const HOST = \'0.0.0.0\';

const app = express();
app.get(\'/\', (req, res) => {
 res.send(\'Hello world\\n\');
});

app.get(\'/json\', (req, res) => {
 res.json({
  code: 0,
  data :\'This is message from node container\'
 })
});

app.listen(PORT, HOST);
console.log(`Running on http://wap.friendlycc.com.cn/host/ 
運行該 express 應用需要 node 環(huán)境，我們基于 node 鏡像來(lái)構建一個(gè)新鏡像
 
5.2 獲取 node 鏡像
 
docker pull node
 
5.3 編寫(xiě) Dockerfile 將 express 應用 docker 化
 
FROM node

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080
CMD [ npm, start ]
 
構建鏡像的時(shí)候 node_modules 的依賴(lài)直接通過(guò) RUN npm install 來(lái)安裝，項目中創(chuàng  )建一個(gè) .dockerignore 文件來(lái)忽略一些直接跳過(guò)的文件：
 
node_modules
npm-debug.log
 
5.4 構建 nodewebserver 鏡像
 
運行構建命令：
 
 docker build -t nodewebserver .
 
 
5.5 啟動(dòng) nodeserver 容器
 
基于剛剛構建的 nodewebserver 鏡像 啟動(dòng)一個(gè)名為 nodeserver 的容器來(lái)提供接口服務(wù)8080端口，并映射宿主的5000端口
 
docker run \\
-p 5000:8080 \\
-d --name nodeserver \\
nodewebserver
 
查看當前docker進(jìn)程
 
docker ps
 
 
可以發(fā)現 nodeserver 的容器也正常的運行起來(lái)。訪(fǎng)問(wèn)以下 http://wap.friendlycc.com.cn/host/ 
能訪(fǎng)問(wèn)到前面寫(xiě)的json數據
 
 
到目前為止，后端接口服務(wù)也正常啟動(dòng)了。只需最后把頁(yè)面請求的接口轉發(fā)到后端接口服務(wù)就能調通接口。
 
6. 跨域轉發(fā)
 
想要將 vueApp 容器 上的請求轉發(fā)到 nodeserver 容器上。首先需要知道 nodeserver 容器的 ip 地址和端口，目前已知 nodeserver 容器內部服務(wù)監聽(tīng)在 8080 端口，還需要知道 ip 即可。
 
6.1 查看 nodeserver 容器的 ip 地址：
 
查看容器內部 ip 有多種方式，這里提供兩種：
 
進(jìn)入容器內部查看
 
docker exect -it 02277acc3efc bash
 
cat /etc/hosts
 
 
docker inspect [ containerId ] 直接查看容器信息:
 
docker inspect 02277acc3efc
 
在其中找到 Networks 相關(guān)配置信息：
 
 
記錄下node服務(wù)容器對應的ip，一會(huì )兒配置nginx轉發(fā)的時(shí)候會(huì )用到。
 
6.2 修改 nginx 配置
 
Nginx 配置 location 指向 node 服務(wù) default.conf （前端想要了解的Nginx，關(guān)于Nginx的配置已經(jīng) location 的具體寫(xiě)法可以參考（一文弄懂Nginx的location匹配 ））
 
添加一條重寫(xiě)規則，將 /api/{path} 轉到目標服務(wù)的 /{path} 接口上。 在前面的nginx/default.conf文件中加入：
 
location /api/ {
 rewrite /api/(.*) /$1 break;
 proxy_pass http://wap.friendlycc.com.cn/host/
}
 
修改完了之后意識到一個(gè)問(wèn)題：vueApp 容器是基于 vuenginxcontainer 這個(gè)鏡像運行的，而在一開(kāi)始構建鏡像的時(shí)候是將 nginx配置 default.conf 直接構建進(jìn)去了。因此如果需要修改 default.conf 還得再重新構建一個(gè)新的鏡像，再基于新鏡像來(lái)運行新的容器。
 
7. 改進(jìn)
 
能不能每次修改配置文件后直接重啟容器就能讓新配置生效，答案當然是有。
 
在構建鏡像的時(shí)候 不把 Nginx 配置復制到鏡像中，而是直接掛載到宿主機上，每次修改配置后，直接重啟容器即可。
 
7.1 修改 Dockerfile 文件
 
把 vueclidemo 項目下的 Dockerfile 修改一下
 
FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 
將 COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令刪除，nginx配置都通過(guò)掛載命令掛載在宿主機上。再看 COPY dist/ /usr/share/nginx/html/ 命令，如果每次構建的項目dist/下的內容變動(dòng)都需要重新走一遍構建新鏡像再啟動(dòng)新容器的操作，因此這條命令也可以刪除，使用掛載的方式來(lái)啟動(dòng)容器。
 
7.2 重新運行vue應用容器
 
直接基于nginx鏡像來(lái)啟動(dòng)容器 vuenginxnew ，運行命令：
 
docker run \\
-p 3000:80 \\
-d --name vuenginxnew \\
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d \\
--mount type=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html \\
nginx
 
 --mount type=bind,source={sourceDir},target={targetDir} 將宿主機的sourceDir 掛載到容器的 targetDir 目錄上。
 此處運行的命令較長(cháng)，如果每次重新輸入難免麻煩，我們可以將完整的命令保存到一個(gè) shell 文件 vueapp.sh 中，然后直接執行 sh vueapp.sh 。
 
這樣就能每次修改了nginx配置或者 重新構建了vue應用的時(shí)候，只需重啟容器就能立馬生效。 此時(shí)我們再訪(fǎng)問(wèn) http://wap.friendlycc.com.cn/host/ 能看到接口能正常返回，說(shuō)明轉發(fā)生效了。
 
 
至此接口服務(wù)的轉發(fā)也調通了。
 
7.3 配置負載均衡
 
后端服務(wù)一般都是雙機或者多機以確保服務(wù)的穩定性。我們可以再啟動(dòng)一個(gè)后端服務(wù)容器，并修改 nginx 的配置 來(lái)優(yōu)化資源利用率，最大化吞吐量，減少延遲，確保容錯配置。
 
基于前面 4.5 節的類(lèi)似操作，新啟動(dòng)一個(gè)容器，并基于 5.1 節類(lèi)似的操作，查看到 新容器的 IP (172.17.0.3)
 
修改一下 nginx/default.conf （新增 upstream ，修改 location /api/ 中的 proxy_pass）:
 
 upstream backend {
  server 172.17.0.2:8080;
  server 172.17.0.3:8080;
 }

 ……

 location /api/ {
  rewrite /api/(.*) /$1 break;
  proxy_pass backend;
 }
 
8. 寫(xiě)在后面
 
不習慣命令行的同學(xué)可以選用Kitematic 來(lái)管理 docker 容器的狀態(tài)、數據目錄和網(wǎng)絡(luò )。所有對容量的操作都可以可視化的操作，這里就不做過(guò)多介紹了，有興趣的同學(xué)可以自行體驗下。
 
 
9 總結 
 
docker提供了非常強大的自動(dòng)化部署方式與靈活性，對多個(gè)應用程序之間做到了解耦，提供了開(kāi)發(fā)上的敏捷性、可控性以及可移植性。本文以vue項目為例實(shí)現一個(gè)前后分離項目使用docker部署的完整步驟，希望能給想要擁抱 docker 的同學(xué)帶來(lái)一點(diǎn)幫助。 
 
參考資源 
 
docker 官網(wǎng)
 nginx 官網(wǎng)
 docker 從入門(mén)到實(shí)踐
 Kitematic user guide
 前端想要了解的Nginx
 一文弄懂Nginx的location匹配
 
以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持特網(wǎng)科技。
 
 更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問(wèn)題，請訪(fǎng)問(wèn)特網(wǎng)科技官網(wǎng)：wap.friendlycc.com.cn