搭建前端開發(fā)環(huán)境——docker篇
一、解決痛點
免搭建前端靜態(tài)環(huán)境
分支切換，無需重新啟動編譯(package.json或gulpfile.js文件改變除外)
nginx可自行配置，滿足不同項目的需求
二、前端靜態(tài)搭建思路
基于ubuntu系統(tǒng)環(huán)境，利用nginx靜態(tài)資源服務(wù)器經(jīng)過docker暴露出來的端口進行請求轉(zhuǎn)發(fā)，這樣后端的開發(fā)機上面只需要安裝docker就能夠訪問前端的靜態(tài)資源，不需要訪問前端開發(fā)機。
三、具體解決方案
- 用 Kitematic 客戶端實現(xiàn)跨平臺運行 Docker
- 用端口映射預(yù)覽 Docker 里的文件
- 用 nginx + 端口映射編輯 Docker 里的文件
- 配置一個通用的 Image(鏡像)
這里面有幾個概念需要先解釋一下。
首先，Kitematic 是一個 Docker GUI，配置非常方便。
其次，Docker 中最重要的三個概念是 Container(容器)、Image(鏡像)和 Volume(卷)。
Image 是靜態(tài)內(nèi)容，如果你要把某個 Image 跑起來，那就需要一個 Container。這里面有一點很重要：Container 中所做的改動不會保存到 Image。如果需要保存改動，很簡單，執(zhí)行 docker commit ContainerID TAG 即可，類似于 git 的 commit
如果不想使用commit仍想保存文件，docker 也提供了一個方法：使用 Volume。
Volume 就是專門存放數(shù)據(jù)的文件夾，啟動 Image 時可以掛載一個或多個 Volume，Volume 中的數(shù)據(jù)獨立于 Image，重啟不會丟失。
***說端口映射。前面說過，Docker 可以看做一個虛擬機，你的所有文件都在里面。如果你在 Container 中運行一個服務(wù)器，監(jiān)聽127.0.0.1:8000，從你自己的機器上直接訪問 http://127.0.0.1:8000 是不行的，因為 Container 和你的機器是兩個不同的環(huán)境。
那怎么辦呢?我們先來看一個大家都熟悉的問題。
日常開發(fā)中我們經(jīng)常需要讓同事預(yù)覽網(wǎng)頁效果，常用的方法是監(jiān)聽 0.0.0.0:8000，然后讓同事連接同一個局域網(wǎng)，訪問 http://你的機器IP:8000 即可。
Container 的問題非常相似，只不過我們自己變成了“同事”，需要訪問 Docker 內(nèi)部的網(wǎng)頁?？雌饋碇灰玫?Container 的 IP 問題就解決了。
幸運的是，Container 確實有 IP。
通常情況下這個 IP 是 192.168.99.100(利用 Kitematic 啟動 docker)，只能從 Container 的宿主機(也就是運行 Docker 的機器)訪問。不過 Container 的情況有些特別，它只關(guān)聯(lián)了 IP，沒有關(guān)聯(lián)端口。因此如果想要訪問 Container 內(nèi)部的端口(比如 8000)，你需要手動配置端口映射，把 Container 內(nèi)部的端口映射到 IP 上。
四、動手
1. 下載Docker Toolbox
Docker Toolbox 支持 Windows 和 Mac OS，可以到官網(wǎng)下載安裝，耗時較嚴重，建議找直接找下下好的包。
安裝完畢之后打開 Kitematic，注冊一個 Docker Hub 賬號，方便之后的操作。
2. 下載Ubuntu鏡像
在 Katematic 里面的搜索 Ubuntu
選擇第二排***個，點擊 create 按鈕。
這里插一句，fuck GFW ，100M的文件能花兩個小時下載，也是醉了。
下載完成后，在 Kitematic 左側(cè)的 Container 列表中選擇 ubuntu，然后點擊上方的“START”按鈕執(zhí)行。點擊“EXEC”可以進入系統(tǒng)命令行，輸入 su 開啟 root 權(quán)限。
這個時候，可以點擊 Kitematic 右上角的“Settings”，點擊“Ports”，你會看到一個 IP 地址，通常情況下是 192.168.99.100。打開自己的電腦的命令行，輸入 ping 192.168.99.100，應(yīng)該是通的。
3. 常規(guī)初始化工作
受夠了渣下載速度，決定換源。采用的是中科大的源，你也可以嘗試阿里云的源，速度都不錯~
- 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權(quán)限的終端輸入：
- 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配置，我們需要等其掛載數(shù)據(jù)卷之后，再做nginx配置文件修改。
nvm可以采用國內(nèi)的淘寶源，速度比較快。
5. 導(dǎo)出image
在 mac 平臺上面可以直接操作 Katematic 進行端口映射配置，但在 windows 平臺上面只能通過 命令行 進行配置。掛載卷目前只能通過命令行進行配置?；谶@種情況，我們統(tǒng)一利用命令行來配置。
首先，commit。點擊 Kitematic 左下角 “DOCKER CLI”，執(zhí)行：
- 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。
然后執(zhí)行：
- docker commit b357a78dc95e username/imagename
接下來，導(dǎo)出Image
- docker export b357a78dc95e -o ubuntu.tar
查看你的個人目錄。mac上面就是 /Users/你的用戶名，就能找到ubuntu.tar文件。
接下來，我們會新建一個 image，在這個 image 上面進行整個的配置。
6. 配置端口映射以及掛載卷
配置流程：
- 在 Kitematic 中點擊左下角“DOCKER CLI”打開 Docker 命令行
- 輸入命令docker import，從文件夾中直接把 ubuntu 文件拖拽到命令行中(注意 ubuntu 文件路徑中不能有中文，如果有，先把文件移動到另一個純英文路徑的文件夾中)
- 輸入命令docker images，復(fù)制出鏡像的 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 協(xié)議暴露 80 端口
- --name iwjw:在 Katematic 顯示這個 image 的名稱為 iwjw
- -v /Users/aaaa/test:/static:將/Users/aaaa/test這個文件夾掛載到 docker 內(nèi)Ubuntu系統(tǒng)的/static文件夾。簡單說來，就是在docker命令行內(nèi) 進入 /static文件夾，能訪問到宿主機(本人電腦)中的/Users/aaaa/test文件夾。
- 注意：掛載/Users/aaaa/test這個文件夾是用來存放 靜態(tài)資源代碼，掛載/Users/aaa/nginxconf是用來編寫nginx配置文件的，掛載/Users/aaa/www可以用來存放一些自動化腳本
7. 根據(jù)自己的項目進行個性化配置
個性化配置：
- 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
五、結(jié)語
基本上，完成上面的docker配置，后端就可以自己在前端代碼的分支進行自己接口的測試了。
引入docker之后，可以大大減少前后端聯(lián)調(diào)的時間，從而加快開發(fā)進度。
這篇文章是在基于梁杰的這篇用 Docker 快速配置前端開發(fā)環(huán)境進行的開發(fā)，建議大家首先閱讀這篇文章。
