副标
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;"]