🔧 用 Podman 建立並部署 Vue 專案：從打包、Dockerfile 撰寫到 Nginx 靜態檔案服務

 

🚀 前言：Vue 要部署在 Podman 容器中，有哪些坑？

在企業級開發流程中，使用 Docker（或無 root 權限時的 Podman）來部署 Vue.js 應用，是非常普遍的 DevOps 實作。但在實作中常會遇到一些 常見問題點：

• nginx: not found？

• COPY dist to nginx/html 報錯？

• Vue 無法 build？

• App.vue 匯入檔案路徑錯誤？

這篇文章將從頭到尾完整紀錄如何使用 Podman 建立 Vue 專案容器、修正 build 時的常見錯誤，並成功透過 Nginx 提供靜態檔案服務。

---

🏗️ 專案結構說明

Vue 專案目錄結構如下：

Vue
 ├── dist                # 打包輸出位置
 ├── public
 ├── router
 ├── src
 │   ├── assets
 │   ├── components
 │   └── App.vue
 ├── views               # <-- 錯誤重點來了
 │   ├── App.vue
 │   ├── Home.vue
 │   └── View1.vue
 ├── Dockerfile
 ├── nginx.conf
 ├── package.json
 └── vue.config.js

---

🛠️ 關鍵修正一：App.vue 引用路徑錯誤

原本你在 src/App.vue 中寫了以下匯入：

import Home from './views/Home.vue'

但實際上你的 views/ 資料夾是在 src 外層，應改成：

import Home from '../views/Home.vue'

或者建議在 jsconfig.json 補上：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

然後改成：

import Home from '@/../views/Home.vue'

避免 Docker build 出現 Module not found: Can't resolve 錯誤。

---

🐳 Dockerfile 編寫與解說（兩階段建構）

# Stage 1: 建構 Vue 應用
FROM node:16 AS build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Stage 2: 運行階段，使用 Nginx 提供靜態檔案
FROM nginx:stable-alpine as production-stage
WORKDIR /usr/share/nginx/html
COPY --from=build-stage /app/dist ./
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

---

📃 nginx.conf 配置（重點）

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri /index.html;
    }

    error_page 404 /index.html;

    location /api/ {
        proxy_pass http://backend-service:5163;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

---

🔁 容器操作流程（Podman 指令）

# 停掉舊容器並刪除
podman stop vue-app
podman rm vue-app

# 重新建構 image
podman build -t vue-app .

# 執行容器
podman run -d -p 8080:80 --name vue-app vue-app

接著在瀏覽器開啟：
http://localhost:8080 ✅

---

❌ 常見錯誤與解決方式

錯誤訊息	原因	解決方式
nginx: not found	build 階段執行 nginx，但並未安裝	不需要執行 nginx，移除 nginx -s reload
Can't resolve './views/Home.vue'	vue 引用路徑錯誤	修改成正確的相對或 alias 路徑
/usr/share/nginx/html not found	容器中 nginx 尚未裝好或使用錯 image	使用 nginx:stable-alpine 的 base image
cp: target not a directory	容器中沒該路徑	不要手動 cp，用 Dockerfile COPY 即可

---

✅ 成功畫面確認與驗證

當容器啟動成功後：

podman ps

顯示：

CONTAINER ID  IMAGE       COMMAND               PORTS       NAMES
xxxxxxx       vue-app     nginx -g daemon off;  0.0.0.0:8080->80/tcp vue-app

即可開啟網頁瀏覽你的 Vue App！

---

🧠 小結：部署 Vue + Podman 的黃金準則

1. Dockerfile 拆為兩階段：build + Nginx

2. Vue 的 import 路徑需正確

3. Nginx 提供靜態檔案服務需配 nginx.conf

4. Podman 等同 Docker 指令，但無 root 權限