如何使用 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:

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。