docker搭建前端環境

wangmeijian 發表於 2021-01-14

開發環境的搭建,是新人入職後的第一道檻,有時一個小小的問題就能阻塞半天。如果能提供一個工具在短時間內搞定開發環境,勢必提高新人對團隊的印象分!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