如何使用 Docker 打包 vue 專案

部署 vue 的 spa 網站到 GCP，可以直接部署靜態網站到 GCP 的 App Engine，也可以用 docker 打包 image，推到 GCP 的 Container Registry。

你必須先完成的事：

1. 在電腦安裝docker
2. cd到你的專案路徑下

---

在根目錄新增Dockerfile

FROM node:14.13.1
WORKDIR /usr/src/app
RUN yarn global add http-server
COPY package.json yarn.lock ./
RUN yarn install && yarn cache clean
COPY . .
RUN yarn build
EXPOSE 8080
CMD [ "http-server", "dist" ]

 

 

打包image

• -t：給這個 image 取個名字並標上版本

$ docker build -t my-vue-app:v1 .

要記住最後面有一個.，表示你要在你現在所在位置打包，他就會在此路徑下去找Dockerfile，所以下指令前請確認你現在位在你專案的根目錄下。

 

 

docker run

你可以下指令讓剛剛打包的 image 跑起來，或者是用安裝好的 docker 桌面應用程式手動點擊。

下指令：

$ docker run -d --name my-vue-container -p 8081:8080 my-vue-app:v1

• my-vue-container：是我自己取的 container 名稱
• my-vue-app:v1：是剛剛 build 出來的 image 名稱
• -p 8081:8080：我在Dockerfile輸出的port號是8080，container 要從8080接收內容，然後從8081對外顯示。因此現在可以用瀏覽器打開localhost:8081查看你的檔案。

 

docker gui：