搭建前端開發環境——docker篇

1、解決痛點

1. 免搭建前端靜態環境

2. 分支切換，無需從新啓動編譯（package.json或gulpfile.js文件改變除外）

3. nginx可自行配置，知足不一樣項目的需求

2、前端靜態搭建思路

基於ubuntu系統環境，利用nginx靜態資源服務器通過docker暴露出來的端口進行請求轉發，這樣後端的開發機上面只須要安裝docker就可以訪問前端的靜態資源，不須要訪問前端開發機。

3、具體解決方案

1. 用 Kitematic 客戶端實現跨平臺運行 Docker

2. 用端口映射預覽 Docker 裏的文件

3. 用 nginx + 端口映射編輯 Docker 裏的文件

4. 配置一個通用的 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 上。

4、動手

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. 配置端口映射以及掛載卷

配置流程：

1. 在 Kitematic 中點擊左下角「DOCKER CLI」打開 Docker 命令行

2. 輸入命令docker import，從文件夾中直接把 ubuntu 文件拖拽到命令行中（注意 ubuntu 文件路徑中不能有中文，若是有，先把文件移動到另外一個純英文路徑的文件夾中）

3. 輸入命令docker images，複製出鏡像的 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/sites-enabled \
    -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能夠用來存放一些自動化腳本

若是須要使用80端口，注意須要刪除sites-enabled文件夾裏面的default文件，default文件裏面存在對80端口的默認設置（利用root進行的配置）

7. 根據本身的項目進行個性化配置

個性化配置：

1. nginx

2. 運行腳本編寫，能夠考慮放在/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

5、結語

基本上，完成上面的docker配置，後端就能夠本身在前端代碼的分支進行本身接口的測試了。

引入docker以後，能夠大大減小先後端聯調的時間，從而加快開發進度。

這篇文章是在基於梁傑的這篇用 Docker 快速配置前端開發環境進行的開發，建議你們首先閱讀這篇文章。