一、解決痛點(diǎn)

免搭建前端靜態(tài)環(huán)境

分支切換，無需重新啟動編譯(package.json或gulpfile.js文件改變除外)

nginx可自行配置，滿足不同項(xiàng)目的需求

二、前端靜態(tài)搭建思路

基于ubuntu系統(tǒng)環(huán)境，利用nginx靜態(tài)資源服務(wù)器經(jīng)過docker暴露出來的端口進(jìn)行請求轉(zhuǎn)發(fā)，這樣后端的開發(fā)機(jī)上面只需要安裝docker就能夠訪問前端的靜態(tài)資源，不需要訪問前端開發(fā)機(jī)。

三、具體解決方案

1. 用 Kitematic 客戶端實(shí)現(xiàn)跨平臺運(yùn)行 Docker
2. 用端口映射預(yù)覽 Docker 里的文件
3. 用 nginx + 端口映射編輯 Docker 里的文件
4. 配置一個(gè)通用的 Image(鏡像)

這里面有幾個(gè)概念需要先解釋一下。

首先，Kitematic 是一個(gè) Docker GUI，配置非常方便。

其次，Docker 中最重要的三個(gè)概念是 Container(容器)、Image(鏡像)和 Volume(卷)。

Image 是靜態(tài)內(nèi)容，如果你要把某個(gè) Image 跑起來，那就需要一個(gè) Container。這里面有一點(diǎn)很重要：Container 中所做的改動不會保存到 Image。如果需要保存改動，很簡單，執(zhí)行 docker commit ContainerID TAG 即可，類似于 git 的 commit

如果不想使用commit仍想保存文件，docker 也提供了一個(gè)方法：使用 Volume。

Volume 就是專門存放數(shù)據(jù)的文件夾，啟動 Image 時(shí)可以掛載一個(gè)或多個(gè) Volume，Volume 中的數(shù)據(jù)獨(dú)立于 Image，重啟不會丟失。

***說端口映射。前面說過，Docker 可以看做一個(gè)虛擬機(jī)，你的所有文件都在里面。如果你在 Container 中運(yùn)行一個(gè)服務(wù)器，監(jiān)聽127.0.0.1:8000，從你自己的機(jī)器上直接訪問 http://127.0.0.1:8000 是不行的，因?yàn)?Container 和你的機(jī)器是兩個(gè)不同的環(huán)境。

那怎么辦呢?我們先來看一個(gè)大家都熟悉的問題。

日常開發(fā)中我們經(jīng)常需要讓同事預(yù)覽網(wǎng)頁效果，常用的方法是監(jiān)聽 0.0.0.0:8000，然后讓同事連接同一個(gè)局域網(wǎng)，訪問 http://你的機(jī)器IP:8000 即可。

Container 的問題非常相似，只不過我們自己變成了“同事”，需要訪問 Docker 內(nèi)部的網(wǎng)頁。看起來只要拿到 Container 的 IP 問題就解決了。

幸運(yùn)的是，Container 確實(shí)有 IP。

通常情況下這個(gè) IP 是 192.168.99.100(利用 Kitematic 啟動 docker)，只能從 Container 的宿主機(jī)(也就是運(yùn)行 Docker 的機(jī)器)訪問。不過 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)下載安裝，耗時(shí)較嚴(yán)重，建議找直接找下下好的包。

安裝完畢之后打開 Kitematic，注冊一個(gè) Docker Hub 賬號，方便之后的操作。

2. 下載Ubuntu鏡像

在 Katematic 里面的搜索 Ubuntu

選擇第二排***個(gè)，點(diǎn)擊 create 按鈕。

這里插一句，fuck GFW ，100M的文件能花兩個(gè)小時(shí)下載，也是醉了。

下載完成后，在 Kitematic 左側(cè)的 Container 列表中選擇 ubuntu，然后點(diǎn)擊上方的“START”按鈕執(zhí)行。點(diǎn)擊“EXEC”可以進(jìn)入系統(tǒng)命令行，輸入 su 開啟 root 權(quán)限。

這個(gè)時(shí)候，可以點(diǎn)擊 Kitematic 右上角的“Settings”，點(diǎn)擊“Ports”，你會看到一個(gè) IP 地址，通常情況下是 192.168.99.100。打開自己的電腦的命令行，輸入 ping 192.168.99.100，應(yīng)該是通的。

3. 常規(guī)初始化工作

受夠了渣下載速度，決定換源。采用的是中科大的源，你也可以嘗試阿里云的源，速度都不錯(cuò)~

sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list 
apt-get update  

先安裝必要的編輯器以及路徑補(bǔ)全：

apt-get install vim bash-completion 

其它的工具可以自行添加

4. 安裝nginx以及nvm

nvm是一個(gè) node 版本管理器，利用它可以進(jìn)行多個(gè)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 進(jìn)行端口映射配置，但在 windows 平臺上面只能通過 命令行 進(jìn)行配置。掛載卷目前只能通過命令行進(jìn)行配置。基于這種情況，我們統(tǒng)一利用命令行來配置。

首先，commit。點(diǎn)擊 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 

查看你的個(gè)人目錄。mac上面就是 /Users/你的用戶名，就能找到ubuntu.tar文件。

接下來，我們會新建一個(gè) image，在這個(gè) image 上面進(jìn)行整個(gè)的配置。

6. 配置端口映射以及掛載卷

配置流程：

1. 在 Kitematic 中點(diǎn)擊左下角“DOCKER CLI”打開 Docker 命令行
2. 輸入命令docker import，從文件夾中直接把 ubuntu 文件拖拽到命令行中(注意 ubuntu 文件路徑中不能有中文，如果有，先把文件移動到另一個(gè)純英文路徑的文件夾中)
3. 輸入命令docker images，復(fù)制出鏡像的 IMAGE ID(類似b357a78dc95e)
4. 最重要的一步，輸入命令： 

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 顯示這個(gè) image 的名稱為 iwjw
• -v /Users/aaaa/test:/static:將/Users/aaaa/test這個(gè)文件夾掛載到 docker 內(nèi)Ubuntu系統(tǒng)的/static文件夾。簡單說來，就是在docker命令行內(nèi) 進(jìn)入 /static文件夾，能訪問到宿主機(jī)(本人電腦)中的/Users/aaaa/test文件夾。
• 注意：掛載/Users/aaaa/test這個(gè)文件夾是用來存放 靜態(tài)資源代碼，掛載/Users/aaa/nginxconf是用來編寫nginx配置文件的，掛載/Users/aaa/www可以用來存放一些自動化腳本

7. 根據(jù)自己的項(xiàng)目進(jìn)行個(gè)性化配置

個(gè)性化配置：

1. nginx
2. 運(yùn)行腳本編寫，可以考慮放在/www文件夾里進(jìn)行管理。

shell腳本類似如下：

function init() { 
  nginx 
  npm install gulp -g 
  npm install 
} 
# 打開命令行提示 
 
echo " -aaainit 進(jìn)入 aaa 文件夾，并初始化aaa項(xiàng)目" 
echo " -aaa 進(jìn)入 aaa 文件夾，并初始化aaa項(xiàng)目" 
echo " -h 幫助" 
 
while [ -n "$1" ] 
do 
    case "$1" in 
    "-aaainit") 
        echo "進(jìn)入 aaa 文件夾，并初始化運(yùn)行 aaa 項(xiàng)目" 
 
        cd /static/aaa 
        init 
        npm run start 
 
        ;; 
    "-aaa") 
        echo "進(jìn)入 aaa 文件夾，并運(yùn)行 aaa 項(xiàng)目" 
 
        cd /static/aaa 
        npm run start 
 
        ;; 
 
    "-h") 
        echo " -aaainit 進(jìn)入 aaa 文件夾，并初始化aaa項(xiàng)目" 
        echo " -aaa 進(jìn)入 aaa 文件夾，并初始化aaa項(xiàng)目" 
        echo " -h 幫助" 
        ;; 
    esac 
    shift 
done  

五、結(jié)語

基本上，完成上面的docker配置，后端就可以自己在前端代碼的分支進(jìn)行自己接口的測試了。

引入docker之后，可以大大減少前后端聯(lián)調(diào)的時(shí)間，從而加快開發(fā)進(jìn)度。

這篇文章是在基于梁杰的這篇用 Docker 快速配置前端開發(fā)環(huán)境進(jìn)行的開發(fā)，建議大家首先閱讀這篇文章。