持續創作，加速成長！這是我參與「掘金日新計劃 · 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_modules，node_modules 目錄將被執行時主機目錄的掛載路徑覆蓋。換句話說，這會發生：

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

構建映象並啟動容器：

docker-compose up -d --build

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

docker-compose stop

總結

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