如何將 Vite+Vue 封裝到 Docker 並運行？

前言

剛好最近遇到一個需求，是需要將 Vite（Vue）專案封裝成 Docker，所以順便把這個需求給寫成文章。

初始環境

首先我們先準備一個 Vite+Vue 的專案，只需要輸入以下指令

npm init vite@latest

然後依照選項去調整即可，這邊我也提供我的選項

✔ 請輸入專案名稱： … vue-project-docker
✔ 是否使用 TypeScript？ … 否 / 是
✔ 是否啟用 JSX 支援？ … 否 / 是
✔ 是否引入 Vue Router 進行單頁應用程式開發？ … 否 / 是
✔ 是否引入 Pinia 用於狀態管理？ … 否 / 是
✔ 是否引入 Vitest 用於單元測試 … 否 / 是
✔ 是否要引入一款端對端（End to End）測試工具？ › 不需要
✔ 是否引入 ESLint 用於程式碼品質檢測？ › 否

Dockerfile

接下來要建立一個 Dockerfile，在終端機輸入以下指令

touch Dockerfile

而這個 Dockerfile 是用來告訴 Docker 要怎麼建立我們的環境，以下是我的 Dockerfile：

FROM node:20 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

這邊我也針對每一行做一些解釋：

1. FROM node:20 AS builder：這行是告訴 Docker 我們要使用 Node.js 20 作為基底，並且取名為 builder，因此 Docker 就會在這個電腦上安裝 Node.js 20，而取名為 builder 是因為我們把行為區分成了兩個階段，這個階段是用來建立我們的專案。
2. WORKDIR /app：我們把電腦的工作目錄設置到 /app 上，你可以想像成新增建立一個資料夾叫 app，然後接下來的指令都會在這個資料夾下執行。
3. COPY package*.json ./：這行是把我們的 package.json 和 package-lock.json 複製到 /app 資料夾下。
4. RUN npm install：這行是執行 npm install，這樣就會安裝我們的專案所需的套件，安裝完畢後 node_modules 資料夾就會出現在 /app 資料夾下。
5. COPY . .：這行是把我們的專案複製到 /app 資料夾下，這樣子 Docker 就可以使用我們的專案。
6. RUN npm run build：這行是執行 npm run build，這行指令就是在把我們的專案編譯成靜態檔案。

到這邊為止，我們就把為 builder 的階段就完成了，接下來我們要建立一個新的階段，這個階段是用來執行我們的專案。

1. FROM nginx:alpine：這行是告訴 Docker 我們要使用 Nginx 作為基底，並且使用 alpine 版本，而 alpine 版本是一個輕量的版本。
2. COPY --from=builder /app/dist /usr/share/nginx/html：這行是把 builder 階段的 /app/dist 資料夾複製到 /usr/share/nginx/html 資料夾下，在 Nginx 中，這個資料夾（/usr/share/nginx/html）預設是對外開放提供服務的資料夾。
3. EXPOSE 80：這行是告訴 Docker 我們要對外開放 80 Port，這樣子外部的人才可以透過 80 Port 來訪問我們的網站。
4. CMD ["nginx", "-g", "daemon off;"]：這行是告訴 Docker 當啟動容器時要執行的指令，這行指令是啟動 Nginx 並且讓 Nginx 在前景運行，這樣 Docker 就不會在啟動後立刻關閉。

建立 Docker Image

接下來就要封裝 Docker Image 了，這邊我們要使用 docker build 指令，這個指令是用來建立 Docker Image 的，而我們要在專案的根目錄下執行以下指令：

docker build -t vue-project-docker:v1 .

封裝的過程會稍微需要一點時間

等待封裝完成後，我們就可以使用以下指令來查看我們的 Docker Image：

docker images

如果當你有看到你的 Docker Image，那就代表封裝成功了

建立 Docker Container

最後一步驟就是建立 Docker Container，這邊我們要使用 docker run 指令，這個指令是用來建立 Docker Container 的，而我們要在專案的根目錄下執行以下指令：

docker run -d -p 8080:80 vue-project-docker:v1

只要你出現以下訊息，就代表你的 Docker Container 並且運行成功了！

這時候你就可以直接透過 http://localhost:8080 來訪問你的網站囉～

Note
8080 的 Port 是你在 docker run 指令中所指定的 Port，如果你有改 Port，那你就要改成你所指定的 Port，而 80 是 Nginx 的 Port，如果你想要改 Nginx 的 Port，你可以去修改 Dockerfile 中的 EXPOSE 80。

停止 Docker Container

如果你想要停止 Docker Container，你可以使用以下指令：

docker stop containerId

Note
containerId 是你的 Docker Container 的 ID，你可以透過 docker ps 來查看你的 Docker Container 的 ID。