【Copy攻城獅日誌】Docker部署D2Admin 人人企業版

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

前言

最近後端的小夥伴在探索docker部署，給我也提了需求，但願我別掉鏈子，也能將前端服務經過docker部署。因而乎，我在大掘金找到了一篇不錯的實踐，@快狗打車前端團隊 的 [[手把手系列之]Docker 部署 vue 項目](https://juejin.im/post/5cce4b...。出於Copy的職業本能，看完文章立馬動手嘗試了一下，一頓操做猛如虎，經過Docker部署了一個vue-cli生成的demo，固然，理論上來看，也就是部署了一個靜態目錄dist。簡單的實踐效果如圖。介於目前項目的前端開發基於D2Admin 人人企業版,有了快狗團隊的手摸手，很快就能用Docker部署這樣一個後臺管理平臺。本文默認使用linux且安裝了docker@18.09.六、node@8.9.0及git@1.8.3.1。

git clone及項目打包

「巧婦難爲無米之炊」，代碼都沒有，何談部署？說時遲那時快，先clone一下源代碼。D2Admin 人人企業版大概9.25M的樣子，個人ECS配置極差，網絡環境也比較差，拉取的時間稍微長一點，都吃完一片西瓜了，都還在95%的進度。固然，乳溝您本地已經打包好了請略過一下操做，還有時間能夠多吃幾片西瓜。通常來講在實際上線中，前端可能只要給到打包以後的文件夾就夠了。

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鏡像做爲基礎來構建D2Admin 人人企業版鏡像。
拉取nginx鏡像：

docker pull nginx

建立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

部署靜態資源：

sh D2AdminRenren.sh

一波操做下來基本上就把D2Admin 人人企業版部署上去了。

簡單說下上面幾個操做的做用。docker拉取nginx，這裏可以在不影響本機以前裝的nginx的狀況下，在docker容器中裝了一個單獨的nginx，一個簡單的命令彷佛見識到了docker的強大之處。nginx的配置文件我就不細說，由於我不會，這方面的資料仍是蠻多的，以前看極客學院就推出過相關的專欄仍是蠻火的，也能夠參考@快狗打車前端團隊 寫的幾篇相關的文章，這裏爲啥設置目錄爲 /usr/share/nginx/html，是由於後續會複製dist目錄到這個文件夾，從而達到靜態部署的目的。至於Dockerfile這個文件爲啥只有 FROM nginx這一行僅僅說明鏡像來源於官方nginx，是由於具體的配置寫到了後邊的sh腳本中。這裏的sh腳本又長又臭，主要仍是由於我不會斷行，不過仍是很好理解，其實就一條 docker run 的指令，-p指定容器暴露的端口，-d指定容器將會運行在後臺模式,--name 指定容器名字，後續能夠經過名字進行容器管理，--mount這裏是關鍵，主要用於容器數據持久化，這樣一來不管是修改nginx配置文件仍是從新打包vue應用，都只要重啓容器docker restart 就能生效。

跨域轉發

通常來講，先後分離的項目都會存在跨域的問題，D2Admin人人企業版看似不存在跨域，那是由於後臺接口作了跨域處理，這樣一來，誰均可以調這個接口，如圖所示，後臺接口展現得比較明顯，接下來想處理一來，在nginx上作一下代理轉發。

修改前端api配置：

vi scr/.env

.env

# 全部環境默認
# 優先級最低

# 網絡請求公用地址
VUE_APP_API=security-enterprise-server

從新build：

npm run build

修改nginx配置，增長接口轉發,將 security-enterprise-server路徑下的請求所有轉發到後臺。
修改後的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

後記

一次簡單的嘗試，竟然踩了不少莫名其妙的坑，好比個人docker沒有快狗前端團隊文中提到的docker exect指令，只有 docker exec，好比docker ps 查看到端口已開，netstat -tnpl沒看到端口……無論怎樣，總算是又邁出了一步，至少在後端都討論docker的時候，也能插上一句「那個，前端也能用docker部署」。也許是又作了一個夢，夢中copy了很多代碼，夢醒時分，繼續漫無目的地前行！

本做品 由 Loner 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於 https://github.om/hu-qi/Loner上的做品創做。
本許可協議受權以外的使用權限能夠從 https://creativecommons.org/l... 處得到。