Published on

记一个 vue 项目的 dockerfile

Authors
  • avatar
    Name
    Shelton Ma
    Twitter

Dockerfile

使用 nginx 来处理静态文件, 分层copy, 确保依赖层能够使用缓存

# 使用 Node.js 18 作为基础镜像
FROM node:18 AS builder

WORKDIR /app
# package.json / yarn.lock 变化才会重新安装依赖，更快构建。
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# Production nginx stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

构建与启动

  1. 构建镜像docker build -t usc-vue:latest .
  2. 创建实例docker run -d -p 3000:80 usc-vue
  3. --rm 测试时退出自动删除
Discuss on Twitter • View on GitHub