搭建前端開發環境——docker篇
一、解決痛點
-
免搭建前端靜態環境
-
分支切換，無需重新啟動編譯（ package.json 或 gulpfile.js 文件改變除外）
-
nginx 可自行配置，滿足不同項目的需求
二、前端靜態搭建思路
基于 ubuntu 系統環境，利用 nginx 靜態資源服務器經過 docker 暴露出來的端口進行請求轉發，這樣后端的開發機上面只需要安裝 docker 就能夠訪問前端的靜態資源，不需要訪問前端開發機。
三、具體解決方案
-
用 Kitematic 客戶端實現跨平臺運行 Docker
-
用端口映射預覽 Docker 里的文件
-
用 nginx + 端口映射編輯 Docker 里的文件
-
配置一個通用的 Image（鏡像）
這里面有幾個概念需要先解釋一下。
首先， Kitematic 是一個 Docker GUI ，配置非常方便。
其次，Docker 中最重要的三個概念是 Container（容器）、Image（鏡像）和 Volume（卷）。
Image 是靜態內容，如果你要把某個 Image 跑起來，那就需要一個 Container。這里面有一點很重要：Container 中所做的改動不會保存到 Image。如果需要保存改動，很簡單，執行 docker commit ContainerID TAG 即可，類似于 git 的 commit
如果不想使用 commit 仍想保存文件，docker 也提供了一個方法：使用 Volume。
Volume 就是專門存放數據的文件夾，啟動 Image 時可以掛載一個或多個 Volume，Volume 中的數據獨立于 Image，重啟不會丟失。
最后說端口映射。前面說過，Docker 可以看做一個虛擬機，你的所有文件都在里面。如果你在 Container 中運行一個服務器，監聽 127.0.0.1:8000 ，從你自己的機器上直接訪問 http://127.0.0.1:8000 是不行的，因為 Container 和你的機器是兩個不同的環境。
那怎么辦呢？我們先來看一個大家都熟悉的問題。
日常開發中我們經常需要讓同事預覽網頁效果，常用的方法是監聽 0.0.0.0:8000 ，然后讓同事連接同一個局域網，訪問 http://你的機器IP:8000 即可。
Container 的問題非常相似，只不過我們自己變成了“同事”，需要訪問 Docker 內部的網頁。看起來只要拿到 Container 的 IP 問題就解決了。
幸運的是，Container 確實有 IP。
通常情況下這個 IP 是 192.168.99.100 （利用 Kitematic 啟動 docker），只能從 Container 的宿主機（也就是運行 Docker 的機器）訪問。不過 Container 的情況有些特別，它只關聯了 IP，沒有關聯端口。因此如果想要訪問 Container 內部的端口（比如 8000），你需要手動配置端口映射，把 Container 內部的端口映射到 IP 上。
四、動手
1. 下載 Docker Toolbox
Docker Toolbox 支持 Windows 和 Mac OS，可以到 官網 下載安裝，耗時較嚴重，建議找直接找下下好的包。
安裝完畢之后打開 Kitematic，注冊一個 Docker Hub 賬號，方便之后的操作。
2. 下載 Ubuntu 鏡像
在 Katematic 里面的搜索 Ubuntu
選擇第二排第一個，點擊 create 按鈕。
這里插一句， fuck GFW ，100M的文件能花兩個小時下載，也是醉了。
下載完成后，在 Kitematic 左側的 Container 列表中選擇 ubuntu，然后點擊上方的“START”按鈕執行。點擊“EXEC”可以進入系統命令行，輸入 su 開啟 root 權限。
這個時候，可以點擊 Kitematic 右上角的“Settings”，點擊“Ports”，你會看到一個 IP 地址，通常情況下是 192.168.99.100。打開自己的電腦的命令行，輸入 ping 192.168.99.100，應該是通的。
3. 常規初始化工作
受夠了渣下載速度，決定換源。采用的是中科大的源，你也可以嘗試阿里云的源，速度都不錯~
sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list
apt-get update
先安裝必要的編輯器以及路徑補全：
apt-get install vim bash-completion
其它的工具可以自行添加
4. 安裝nginx以及nvm
nvm 是一個 node 版本管理器，利用它可以進行多個node版本的管理。
在開啟root權限的終端輸入：
apt-get update
apt-get install nginx
apt-get install curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
source ~/.bashrc
nvm install node
安裝完成不忙做nginx配置，我們需要等其掛載數據卷之后，再做nginx配置文件修改。
nvm 可以采用國內的淘寶源，速度比較快。
5. 導出image
在 mac 平臺上面可以直接操作 Katematic 進行端口映射配置，但在 windows 平臺上面只能通過 命令行 進行配置。掛載卷目前只能通過 命令行 進行配置。基于這種情況，我們統一利用 命令行 來配置。
首先， commit 。點擊 Kitematic 左下角 “DOCKER CLI”，執行：
docker ps
類似于如下的輸出：
? ~ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
b357a78dc95e f753707788c5 "/bin/bash" 3 days ago Up 4 seconds 0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:8080->8080/tcp, 0.0.0.0:8088->8088/tcp iwjwdocker
copy 出 container id ，這里是 b357a78dc95e 。
然后執行：
docker commit b357a78dc95e username/imagename
接下來，導出Image
docker export b357a78dc95e -o ubuntu.tar
查看你的個人目錄。mac上面就是 /Users/你的用戶名 ，就能找到 ubuntu.tar 文件。
接下來，我們會新建一個 image，在這個 image 上面進行整個的配置。
6. 配置端口映射以及掛載卷
配置流程：
-
在 Kitematic 中點擊左下角“DOCKER CLI”打開 Docker 命令行
-
輸入命令docker import，從文件夾中直接把 ubuntu 文件拖拽到命令行中（注意 ubuntu 文件路徑中不能有中文，如果有，先把文件移動到另一個純英文路徑的文件夾中）
-
輸入命令docker images，復制出鏡像的 IMAGE ID（類似b357a78dc95e）
-
最重要的一步，輸入命令：
docker run -t -i --privileged -p 80:80/tcp \
-p 443:443/tcp -p 8088:8088/tcp \
-p 8000:8000/tcp -p 8080:8080/tcp -d --name iwjw \
-v /Users/aaaa/test:/static \
-v /Users/aaa/nginxconf:/etc/nginx \
-v /Users/aaa/www:/www IMAGEID \
/bin/bash
解釋一下上面的命令行：
-
-p 80:80/tcp :docker基于 TCP 協議暴露 80 端口
-
--name iwjw :在 Katematic 顯示這個 image 的名稱為 iwjw
-
-v /Users/aaaa/test:/static :將 /Users/aaaa/test 這個文件夾掛載到 docker 內Ubuntu系統的 /static 文件夾。簡單說來，就是在docker命令行內 進入 /static 文件夾，能訪問到宿主機（本人電腦）中的 /Users/aaaa/test 文件夾。
-
注意：掛載 /Users/aaaa/test 這個文件夾是用來存放 靜態資源代碼，掛載 /Users/aaa/nginxconf 是用來編寫 nginx 配置文件的，掛載 /Users/aaa/www 可以用來存放一些自動化腳本
7. 根據自己的項目進行個性化配置
個性化配置：
-
nginx
-
運行腳本編寫，可以考慮放在 /www 文件夾里進行管理。
shell腳本類似如下：
function init() {
nginx
npm install gulp -g
npm install
}
打開命令行提示
echo " -aaainit 進入 aaa 文件夾，并初始化aaa項目"
echo " -aaa 進入 aaa 文件夾，并初始化aaa項目"
echo " -h 幫助"
while [ -n "$1" ]
do
case "$1" in
"-aaainit")
echo "進入 aaa 文件夾，并初始化運行 aaa 項目"
cd /static/aaa
init
npm run start
;;
"-aaa")
echo "進入 aaa 文件夾，并運行 aaa 項目"
cd /static/aaa
npm run start
;;
"-h")
echo " -aaainit 進入 aaa 文件夾，并初始化aaa項目"
echo " -aaa 進入 aaa 文件夾，并初始化aaa項目"
echo " -h 幫助"
;;
esac
shift
done</code></pre>
五、結語
基本上，完成上面的docker配置，后端就可以自己在前端代碼的分支進行自己接口的測試了。
引入docker之后，可以大大減少前后端聯調的時間，從而加快開發進度。
來自：https://segmentfault.com/a/1190000007336706