2025/05/27

用 Docker 建立 Vue.js 開發環境:簡單一步啟動 npm run serve

# 建立Image
docker build -t image -f docker/Dockerfile.dev .
# 運行
docker run -it --rm --name containerName -p 8080:8080 -v .:/app image

FROM node:18
LABEL authors="C.Y. Fang"
LABEL description="Dockerfile for Vue.js development environment"

# 安裝 git 和 openssh-client
RUN apt-get update && apt-get install -y git openssh-client && rm -rf /var/lib/apt/lists/*

# 設定工作目錄
WORKDIR /app

# 複製 package.json 和 package-lock.json
COPY package*.json ./

# 安裝依賴
RUN npm install

# 開放 dev server port
EXPOSE 8080

# 設定環境變數,強制使用 IPv4
ENV CHOKIDAR_USEPOLLING=true
ENV WATCHPACK_POLLING=true

# 啟動開發伺服器,強制使用 IPv4
CMD ["npm", "run", "serve", "--", "--host", "0.0.0.0", "--port", "8080", "--sockHost", "localhost", "--sockPort", "8080"]