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

作者：墨白 2016-11-03 09:49:04

開發前端

一、解決痛點

免搭建前端靜態環境

分支切換，無需重新啟動編譯(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

五、結語

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

引入docker之后，可以大大減少前后端聯調的時間，從而加快開發進度。

這篇文章是在基于梁杰的這篇用 Docker 快速配置前端開發環境進行的開發，建議大家首先閱讀這篇文章。

責任編輯：龐桂玉來源： segmentfault