Docker 化 Vue2 應用開發

語言: CN / TW / HK

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第 27 天,點選檢視活動詳情

隨著越來越多的專案使用 Vue3 ,前端專案可能面臨新舊版本的問題,需要在本地切換 node.js 的版本,甚至出現一些依賴衝突的問題,為了避免這些問題最佳的方式是用 Docker 容器化來隔離每個開發環境。本文將介紹如何使用 Docker 對 Vue2 前端專案進行 Docker 化,用於專案開發過程。

開始之前可以參閱《Docker的優勢很容易讓Web開發人員所忽略》熟悉並安裝 Docker 環境。

進入本文的主題,在專案根目錄下增加檔案 Dockerfile,程式碼如下:

``` FROM node:14.19-alpine3.15

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

安裝並快取應用程式依賴項

COPY package.json /app/package.json RUN npm install RUN npm install @vue/[email protected] -g

start app

CMD ["npm", "run", "serve"] ```

再增加檔案 .dockerignore,內容如下:

node_modules .git .gitignore

這將加快 Docker 構建過程,因為本地依賴項和 git repo 不會被髮送到 Docker 守護程序。

構建並標記 Docker 映像:

docker build -t vue2-app:dev .

在構建完成後執行容器:

docker run -it -v ${PWD}:/app -v /app/node_modules -p 8080:8080 --rm vue2-app:dev

執行容器命令解釋:

  1. docker run 命令從剛剛建立的映象中建立一個新的容器例項並執行它。
  2. -v ${PWD}:/app 將專案程式碼掛載到容器中的路徑 /app 下。{PWD} 可能無法在 Windows 上執行,需要使用 %cd% 來替代。
  3. 由於要使用容器中的 node_modules 內容,需要掛載另一個路徑:-v /app/node_modules,這樣安裝的依賴就不在本地資料夾 node_modules 中。
  4. -p 8080:8080 將埠 8080 暴露給同一網路上的其他 Docker 容器(用於容器間通訊),並將埠 8081 暴露給主機。
  5. --rm 在容器退出後刪除容器和卷。
  6. -it :容器的 Shell 對映到當前的 Shell,然後在本機視窗輸入的命令,就會傳入容器,這樣需要終止專案除錯只需要 Ctrl+c ,即可退出。

開啟瀏覽器訪問 http://localhost:8080,跟在本機除錯一樣,更改程式碼自動重新編譯並重載(為了避免過載問題,建議對映的埠號和容器暴露的埠號一致)。

如果想使用 Docker Compose,可以在專案根目錄下建立檔案 docker-compose.yml

``` version: '3.7' services:

vue2-app: container_name: vue2-app build: context: . dockerfile: Dockerfile volumes: - '.:/app' - '/app/node_modules' ports: - '8080:8080' ```

如果沒有匿名卷/app/node_modulesnode_modules 目錄將被執行時主機目錄的掛載路徑覆蓋。換句話說,這會發生:

  • 構建時,將在映像中建立 node_modules 目錄。
  • 執行時,當前目錄被掛載到容器中,覆蓋在構建期間安裝的 node_modules

構建映象並啟動容器:

docker-compose up -d --build

正常執行後將可以在瀏覽器中正常訪問並除錯。如果需要停止除錯或者退出可以執行一下命令:

docker-compose stop

總結

Docker 在WEB開發中還是可以帶來很多的便利和好處,在正式的生產環境也可以使用容器化部署,可以將應用進行隔離。