副标
Dockerize your Vue Application
dockerfile Vue example
docker Vue example
Vue应用docker容器化打包

docker忽略文件

.dockerignore

node_modules

www.conf

server {
    listen 80;
    #listen [::]:80;
    listen 443 ssl http2;
    #listen [::]:443 ssl http2;

    server_name h5.iamle.com web-app-h5;

    ssl_certificate      /etc/nginx/ssl/star.iamle.com.crt;
    ssl_certificate_key  /etc/nginx/ssl/star.iamle.com.key;
    #ssl_session_cache    shared:SSL:10m;
    ssl_session_timeout  10m;
    ssl_protocols        TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers          HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers   on;

    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://${API_HOST_BASE};
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
}

Dockerfile

# 构建阶段 vue build stage
FROM node:10.16.0-alpine  AS build-stage-node

## 配置 apk包加速镜像为阿里
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

## 安装 一些基础包
RUN apk update \
  && apk upgrade \
  && apk add git \
  && apk add bash \
  #&& apk add nghttp2-dev \
  && apk add ca-certificates \
  && apk add wget \
  #&& apk add curl \
  #&& apk add tcpdump \
  && apk add iputils \
  && apk add iproute2 \
  && apk add libc6-compat \
  && apk add -U tzdata \
  && rm -rf /var/cache/apk/*

# ## 设置 操作系统时区
# RUN rm -rf /etc/localtime \
#   && ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

# 设置 工作目录
ENV MY_HOME=/app
RUN mkdir -p $MY_HOME
WORKDIR $MY_HOME

## 安装 全局依赖
# RUN npm install -g express

# 安装 项目依赖
COPY package.json ./
RUN npm config set registry https://registry.npm.taobao.org \
  && npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ \
  && npm install

# 复制vue项目文件
COPY . .

# 构建
RUN npm run build

RUN ls -lsah /app

# 打包应用
# 生产阶段 nginx
# 使用nginx镜像运行构建物
FROM nginx:stable-alpine
COPY --from=build-stage-node /app/dist /var/www/html
RUN ls -lsha /var/www/html
COPY ./www.conf /etc/nginx/conf.d/
RUN rm /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]