Day 16 撰写一个 dockerfile，和 vue-cli 服务进行整合开发

使用 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