使用 Docker Compose 測試 Build 過的 Vue | 點燈坊

yarn serve 只能測試 src 目錄下的 Vue，可使用 docker compose 配合 Nginx 快速測試 dist 目錄下的 Vue。

Version

Vue 2.6.11

Docker Compose

docker-compose.yml

version: "3"
services:
  vue:
    image: nginx:alpine
    restart: always
    ports:
      - "7979:80"
    volumes:
      - ./dist:/usr/share/nginx/html

在 project 根目錄下建立 docker-compose.yml：

• image: nginx:alpine：使用 Nginx
• ports：設定對外為 port 7979，對內為 port 80
• volumns：將 dist 目錄對應用 container 內部的 /usr/share/nginx/html

NPM Script

package.json

"scripts": {
  "docker": "yarn build && docker compose up -d"
}

• docker：先執行 docker build，執行完後再執行 docker compose up -d

Conclusion

• 不必另外安裝任何 package，只要一個 docker-compose.yml 就可在本機以 Nginx 執行 dist 目錄下的 Vue