使用 Vue 作為前端框架的開發者，對於 vue-cli 想必不陌生。將 Docker 和 vue-cli 整合成一個開發環境，可以讓他人即時預覽開發環境下的成果。

步驟

1. 開新專案，這邊新開一個名為 docker-vue-test 的 vue3 專案
   vue create docker-vue-test
2. 建立 dockerfile

cd docker-vue-test

### Dockerfile in docker-vue-test
FROM node:12-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 install
EXPOSE 8080 #容器建立後，其預設開啟 8080 對外

3. 從 dockerfile 建立一個名為 docker-vue-test 的映像檔
   docker build . -t docker-vue-test
4. 用 docker images 檢查是否建立成功

REPOSITORY                                                   TAG                            IMAGE ID            CREATED             SIZE
docker-vue-test                                              latest                         12a507b72910        47 minutes ago      232MB

5. 用下列指令綁定「本機端的資料夾」和「新建立的容器內的資料夾」連通，並建立容器

docker run -it -p 1234:8080 -v <本機端的 docker-vue-test 絕對路徑>:/app docker-vue-test sh

6. 建立後會載入到容器內的 /app 資料夾，在裡面啟動 npm run serve 就完成了
   

採坑

1. 為何容器內的 app 資料夾僅有 package-lock.json?
   其實映像檔內是有資料的，但你在啟動一個新容器時，你的本機端的 vue 專案資料夾的絕對路徑有錯，所以才會導致剩下 package-lock.json

參考資料

1. Docker, Vue Cli 整合 (2)
2. Vue - 使用 Docker 佈署
3. Dockerize Vue.js App