2021 鐵人賽

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 對外
  1. 從 dockerfile 建立一個名為 docker-vue-test 的映像檔
    docker build . -t docker-vue-test
  2. 用 docker images 檢查是否建立成功


REPOSITORY                                                   TAG                            IMAGE ID            CREATED             SIZE
docker-vue-test                                              latest                         12a507b72910        47 minutes ago      232MB
  1. 用下列指令綁定「本機端的資料夾」和「新建立的容器內的資料夾」連通，並建立容器
docker run -it -p 1234:8080 -v <本機端的 docker-vue-test 絕對路徑>:/app docker-vue-test sh
  1. 建立後會載入到容器內的 /app 資料夾，在裡面啟動 npm run serve 就完成了
    Demo

採坑

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

參考資料

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