docker搭建前端環境

開發環境的搭建，是新人入職後的第一道檻，有時一個小小的問題就能阻塞半天。若是能提供一個工具在短期內搞定開發環境，勢必提升新人對團隊的印象分！docker就是這樣一個工具。

鏡像&容器

docker有個重要的概念叫鏡像，官方概念比較拗口，這麼解釋比較容易理解：docker倉庫有不少鏡像，包括node、nginx、redis等等，一個鏡像通常解決一個問題，鏡像沒有狀態，並且永遠不會改變。容器，是鏡像執行的地方。

體驗

第一步，安裝docker，接着在命令行執行如下命令：

docker run -d -p 80:80 docker/getting-started

以上命令建立了一個容器，執行的鏡像是docker/getting-started，docker會自動從docker倉庫下載這個鏡像。命令執行成功後，在瀏覽器打開http://localhost 便可訪問這個容器的服務。

若是要訪問本身的項目，須要把本身的項目作成鏡像。

Dockerfile

如何建立鏡像？打開前端項目根目錄，新建Dockerfile配置文件，配置以下（假設你的項目依賴nodejs）

FROM node:10.13.0
 WORKDIR /app
 COPY . .
 RUN npm install
 CMD ["npm", "run", "dev"]

FROM node:10.13.0：指定依賴的基礎鏡像nodejs，版本爲10.13.0
WORKDIR /app：指定工做目錄
COPY . .：拷貝當前目錄全部文件到/app
RUN npm install：在項目打包爲鏡像時執行指定npm install
CMD ["npm", "run", "dev"]：鏡像在容器中啓動時執行的命令，這裏假設爲npm run dev

新建.dockerignore，忽略那些不須要打包到鏡像的文件（夾）

node_modules

建立鏡像

把當前文件夾內容打包爲鏡像，注意最後有個點

docker build -t my-app .

建立容器

建立容器，注意，前端項目通常會開啓DevServer，host必須配置爲0.0.0.0，不然在宿主機上沒法訪問docker容器內部的開發環境。

建立名字爲my-app-container的容器，執行的鏡像是my-app，假設DevServer配置的端口爲8080，將容器內的8080映射到宿主機的8080端口，冒號前面的是宿主機端口，後面的是docker容器的端口。

docker run -dp 8080:8080 --name my-app-container my-app

容器會自動執行Dockerfile指定的CMD命令，稍後就能夠在瀏覽器輸入http://localhost:8080 訪問容器內的開發環境了。

查看全部正在運行的docker容器

docker ps

文件映射

業務代碼都打包到鏡像裏了，接下來，要怎麼修改業務代碼呢？只須要在建立容器的時候，作文件映射。
在這以前，先中止並刪除當前運行的容器

//中止容器
docker kill my-app-container
//刪除容器
docker rm my-app-container

假設宿主機前端目錄是/project/app，用-v命令，映射到容器的/app

docker run -dp 8080:8080 -v /project/app:/app --name my-app-container my-app

以後，訪問http://localhost:8080 ，修改宿主機的代碼，代碼在容器中編譯，宿主機的瀏覽器也會實時刷新，如同本地開發同樣。

原文地址Github