摘要：介于目前項(xiàng)目的前端開(kāi)發(fā)基于人人企業(yè)版有了快狗團(tuán)隊(duì)的手摸手，很快就能用部署這樣一個(gè)后臺(tái)管理平臺(tái)。構(gòu)建鏡像，部署靜態(tài)資源這里借助獲取鏡像，通鏡像作為基礎(chǔ)來(lái)構(gòu)建人人企業(yè)版鏡像。本許可協(xié)議授權(quán)之外的使用權(quán)限可以從處獲得。

Created by huqi at 2019-5-24 21:01:30  
Updated by huqi at 2019-5-26 00:00:42

最近后端的小伙伴在探索docker部署，給我也提了需求，希望我別掉鏈子，也能將前端服務(wù)通過(guò)docker部署。于是乎，我在大掘金找到了一篇不錯(cuò)的實(shí)踐，@快狗打車(chē)前端團(tuán)隊(duì) 的 [[手把手系列之]Docker 部署 vue 項(xiàng)目](https://juejin.im/post/5cce4b...。出于Copy的職業(yè)本能，看完文章立馬動(dòng)手嘗試了一下，一頓操作猛如虎，通過(guò)Docker部署了一個(gè)vue-cli生成的demo，當(dāng)然，理論上來(lái)看，也就是部署了一個(gè)靜態(tài)目錄dist。簡(jiǎn)單的實(shí)踐效果如圖。介于目前項(xiàng)目的前端開(kāi)發(fā)基于D2Admin 人人企業(yè)版,有了快狗團(tuán)隊(duì)的手摸手，很快就能用Docker部署這樣一個(gè)后臺(tái)管理平臺(tái)。本文默認(rèn)使用linux且安裝了[email protected]、[email protected]及[email protected]。

“巧婦難為無(wú)米之炊”，代碼都沒(méi)有，何談部署？說(shuō)時(shí)遲那時(shí)快，先clone一下源代碼。D2Admin 人人企業(yè)版大概9.25M的樣子，我的ECS配置極差，網(wǎng)絡(luò)環(huán)境也比較差，拉取的時(shí)間稍微長(zhǎng)一點(diǎn)，都吃完一片西瓜了，都還在95%的進(jìn)度。當(dāng)然，乳溝您本地已經(jīng)打包好了請(qǐng)略過(guò)一下操作，還有時(shí)間可以多吃幾片西瓜。一般來(lái)說(shuō)在實(shí)際上線中，前端可能只要給到打包之后的文件夾就夠了。

git clone https://github.com/d2-projects/d2-admin-renren-security-enterprise.git
cd d2-admin-renren-security-enterprise
npm install
npm run build

這里build主要目的還是為了獲取到dist目錄。

這里借助docke獲取nginx鏡像，通nginx鏡像作為基礎(chǔ)來(lái)構(gòu)建D2Admin 人人企業(yè)版鏡像。
拉取nginx鏡像：

docker pull nginx

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

mkdir nginx
vi nginx/deafult.conf

deafult.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;
    }
}

新建Dockerfile文件：

vi Dockerfile

Dockerfile

FROM nginx

新建sh腳本文件，如：

vi D2AdminRenren.sh

docker run  -p 4443:80 -d --name d2adminrenren --mount type=bind,source=/home/huqi/d2-admin-renren-security-enterprise/nginx,target=/etc/nginx/conf.d --mount type=bind,source=/home/huqi/d2-admin-renren-security-enterprise/dist,target=/usr/share/nginx/html nginx

部署靜態(tài)資源：

sh D2AdminRenren.sh

一波操作下來(lái)基本上就把D2Admin 人人企業(yè)版部署上去了。

簡(jiǎn)單說(shuō)下上面幾個(gè)操作的作用。docker拉取nginx，這里能夠在不影響本機(jī)之前裝的nginx的情況下，在docker容器中裝了一個(gè)多帶帶的nginx，一個(gè)簡(jiǎn)單的命令似乎見(jiàn)識(shí)到了docker的強(qiáng)大之處。nginx的配置文件我就不細(xì)說(shuō)，因?yàn)槲也粫?huì)，這方面的資料還是蠻多的，之前看極客學(xué)院就推出過(guò)相關(guān)的專(zhuān)欄還是蠻火的，也可以參考@快狗打車(chē)前端團(tuán)隊(duì) 寫(xiě)的幾篇相關(guān)的文章，這里為啥設(shè)置目錄為 /usr/share/nginx/html，是因?yàn)楹罄m(xù)會(huì)復(fù)制dist目錄到這個(gè)文件夾，從而達(dá)到靜態(tài)部署的目的。至于Dockerfile這個(gè)文件為啥只有 FROM nginx這一行僅僅說(shuō)明鏡像來(lái)源于官方nginx，是因?yàn)榫唧w的配置寫(xiě)到了后邊的sh腳本中。這里的sh腳本又長(zhǎng)又臭，主要還是因?yàn)槲也粫?huì)斷行，不過(guò)還是很好理解，其實(shí)就一條 docker run 的指令，-p指定容器暴露的端口，-d指定容器將會(huì)運(yùn)行在后臺(tái)模式,--name 指定容器名字，后續(xù)可以通過(guò)名字進(jìn)行容器管理，--mount這里是關(guān)鍵，主要用于容器數(shù)據(jù)持久化，這樣一來(lái)無(wú)論是修改nginx配置文件還是重新打包vue應(yīng)用，都只要重啟容器docker restart 就能生效。

一般來(lái)說(shuō)，前后分離的項(xiàng)目都會(huì)存在跨域的問(wèn)題，D2Admin人人企業(yè)版看似不存在跨域，那是因?yàn)楹笈_(tái)接口做了跨域處理，這樣一來(lái)，誰(shuí)都可以調(diào)這個(gè)接口，如圖所示，后臺(tái)接口展示得比較明顯，接下來(lái)想處理一來(lái)，在nginx上做一下代理轉(zhuǎn)發(fā)。

修改前端api配置：

vi scr/.env

.env

# 所有環(huán)境默認(rèn)
# 優(yōu)先級(jí)最低

# 網(wǎng)絡(luò)請(qǐng)求公用地址
VUE_APP_API=security-enterprise-server

重新build：

npm run build

修改nginx配置，增加接口轉(zhuǎn)發(fā),將 security-enterprise-server路徑下的請(qǐng)求全部轉(zhuǎn)發(fā)到后臺(tái)。
修改后的deafult.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;
    }
    location ~  /security-enterprise-server/ {
        proxy_pass https://demo.renren.io;
    }
}

重啟：

docker restart d2adminrenren

一次簡(jiǎn)單的嘗試，居然踩了很多莫名其妙的坑，比如我的docker沒(méi)有快狗前端團(tuán)隊(duì)文中提到的docker exect指令，只有 docker exec，比如docker ps 查看到端口已開(kāi)，netstat -tnpl沒(méi)看到端口……不管怎樣，總算是又邁出了一步，至少在后端都討論docker的時(shí)候，也能插上一句“那個(gè)，前端也能用docker部署”。也許是又做了一個(gè)夢(mèng)，夢(mèng)中copy了不少代碼，夢(mèng)醒時(shí)分，繼續(xù)漫無(wú)目的地前行！

本作品 由 Loner 采用 知識(shí)共享 署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際 許可協(xié)議進(jìn)行許可。
基于https://github.om/hu-qi/Loner上的作品創(chuàng)作。
本許可協(xié)議授權(quán)之外的使用權(quán)限可以從 https://creativecommons.org/l... 處獲得。