Docker, Vue Cli 整合 (2)
4 min readJan 6, 2019
這次要來打造適合開發的環境，先看一下這次的 Dockerfile：
### DockerfileFROM node:11-alpine# make the 'app' folder the current working directory
WORKDIR /app# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./# install project dependencies
RUN npm installEXPOSE 8080
做的事情非常少只有把 package.json 複製到 container 中，並且安裝依賴。那麼專案的程式碼跑去哪了呢？由於我們想要做到在本機上修改程式碼就能反應在 container 中，所以使用了 Docker 的 Volume 功能，能讓本機和容器共享同一份資料。
具體操作方式非常簡單，就是在啟動容器時多加 -v <host_path>:<container_path> 這個參數即可，注意這邊的路徑必需是絕對路徑，完整的指令如下：
docker run -it -p 1234:8080 -v ~/docker-vue:/app dockerize-vuejs-app sh簡單解釋一下每個參數的用途：
-i: 打開容器的標準輸入-t: 分配一個虛擬終端（pseudo-tty）-p: 作 port mapping ，這裡將本機的 1234 對應到容器的 8080 （因為 Dockerfile 中的EXPOSE 8080）-v: 作 volume mappingdockerize-vuejs-app: image 名稱sh: 執行終端機，也可以寫在 Dockerfile 的CMD
進入容器的終端後執行 yarn serve ，接下來就能快樂的在本機開發了
優化：使用 docker-compose
每次執行容器時都要輸入那麼一大串指令真的不太方便，也容易忘記，所以可以使用 docker-compose 將指令文件化，在專案的根目錄新增一個 docker-compose.yml 並加入以下內容：
### docker-compose.ymlversion: "3"services:
vue:
image: dockerize-vuejs-app-v4
container_name: myVue
tty: true
volumes:
- "~/docker-vue:/app"
expose:
- 8080
ports:
- 8080:8080
應該蠻容易對應到 docker run 的參數，這邊多了一個 expose: 8080 ，代表其實可以把 Dockerfile 的 EXPOSE 8080 拿掉，統一在這邊管理。（ docker-compose 的主要目的其實是拿來管理多個相依的 container，可以看這篇文章快速了解一下）
這邊也可以配合 .env 檔案，讓專案在不同的電腦上能有不同的環境變數，具體方式可以看文末的 Github 連結。
存檔之後執行
docker-compose up -d之後所有在 docker-compose.yml 定義的 service 就會在背景執行了。接著我們要進入執行中的容器並打開終端機：
docker exec -it myVue sh最後和前面一樣執行 yarn serve 就可以開發了！
附上完整的專案目錄：
