摘要：介于目前項目的前端開發基于人人企業版有了快狗團隊的手摸手，很快就能用部署這樣一個后臺管理平臺。構建鏡像，部署靜態資源這里借助獲取鏡像，通鏡像作為基礎來構建人人企業版鏡像。本許可協議授權之外的使用權限可以從處獲得。

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.6、node@8.9.0及git@1.8.3.1。

“巧婦難為無米之炊”，代碼都沒有，何談部署？說時遲那時快，先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... 處獲得。