本文和大家分享的是使用Docker快速搭建前端開發(fā)環(huán)境的方法步驟，希望可以幫助大家更好的學(xué)習(xí)docker ，一起來看看吧。

一、解決痛點(diǎn)

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

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

3.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)跨平臺(tái)運(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 中所做的改動(dòng)不會(huì)保存到Image。如果需要保存改動(dòng)，很簡單，執(zhí)行 docker commit ContainerID TAG 即可，類似于 git 的 commit

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

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

　　最后說端口映射。前面說過，Docker 可以看做一個(gè)虛擬機(jī)，你的所有文件都在里面。如果你在 Container 中運(yùn)行一個(gè)服務(wù)器，監(jiān)聽127.0.0.1:8000 ，從你自己的機(jī)器上直接訪問 http://127.0.0.1:8000 是不行的，因?yàn)?/span> 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)頁?？雌饋碇灰玫?nbsp;Container 的 IP 問題就解決了。

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

　　通常情況下這個(gè) IP 是 192.168.99.100 （利用 Kitematic 啟動(dòng) docker），只能從 Container 的宿主機(jī)（也就是運(yùn)行 Docker 的機(jī)器）訪問。不過 Container 的情況有些特別，它只關(guān)聯(lián)了 IP，沒有關(guān)聯(lián)端口。因此如果想要訪問 Container 內(nèi)部的端口（比如 8000），你需要手動(dòng)配置端口映射，把 Container 內(nèi)部的端口映射到 IP 上。

四、動(dòng)手

1. 下載 Docker Toolbox

Docker Toolbox 支持 Windows 和 Mac OS，可以到 官網(wǎng) 下載安裝，耗時(shí)較嚴(yán)重，建議找直接找下下好的包。

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

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”，你會(huì)看到一個(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 | bashsource ~/.bashrc

nvm install node

　　安裝完成不忙做nginx配置，我們需要等其掛載數(shù)據(jù)卷之后，再做nginx配置文件修改。

nvm 可以采用國內(nèi)的淘寶源，速度比較快。

5. 導(dǎo)出image

　　在 mac 平臺(tái)上面可以直接操作 Katematic 進(jìn)行端口映射配置，但在 windows 平臺(tái)上面只能通過 命令行 進(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 文件。

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

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

　　配置流程：

1.在 Kitematic 中點(diǎn)擊左下角“DOCKER CLI”打開 Docker 命令行

2.輸入命令docker import，從文件夾中直接把 ubuntu 文件拖拽到命令行中（注意 ubuntu 文件路徑中不能有中文，如果有，先把文件移動(dòng)到另一個(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 可以用來存放一些自動(dòng)化腳本

·

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

shiftdone

五、結(jié)語

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

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

 

文章來源：SegmentFault