VueCLI，會製作出一個 SPA 的畫面本身就以 Vue-Router，去做路由了，那Nginx路由又是什麼…
我本身是前端開發進入後端開發後才遇到WebServer，通常都有卡到一瞬間，要怎麼去解 Vue-Router，SPA又要綁在WebServer上，本地打包後又看不到畫面，搞得頭很痛不知所措，結果直推GitHub Pages瀏覽看有沒有Bug又覺得很蠢，繞了一大圈，才搞懂原因，覺得很鬧但還是妥協。 \

原因

Vue-Router，是用JS操作路由，渲染畫面，所以是JS操作，所以畫面才會轉換，雖然路由也轉換，但其實只有畫面，因為以理解來說，兩個路由是要有兩份檔案的，才會訪問到資料，在SPA的宏觀概念下，是只有一個檔案入口。 \

Dockerfile 編譯情境

而在 CI/CD 情境下可將 Vue 可以分成兩中方式進行打包封裝： \

• 在 CI 過程後封裝
  CI 的步驟為 環境安裝 > 應用相依程式安裝 > 應用程式測試掃描 > Docker build > CD部署
  在這個過程中因為已經將應用相依程式安裝，可以簡單的封裝已編譯過的Vue。\

• 在 docker build 狀態下封裝
  如果只有製作CD部署的部分，則可以在 DockerFile 中進行應用相依程式安裝兼編譯。 \

兩者差異是差在應用程式安裝的時機不同。 \

手把手教學

在 CI 過程後封裝

在整個 CI 過程後已經將原先的 Vue相依套件已經安裝且編譯，所以可以用簡單的方式封裝。
DockerFile

FROM nginx:alpine
COPY /dist /usr/share/nginx/html
COPY /default.conf /etc/nginx/conf.d/default.conf

在 docker build 狀態下封裝

使用二階端編譯的方式封裝，Vue

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]