docker编译vue并打包nginx镜像 - Wed, Jun 5, 2019

Dockerfile编译vue代码，并打包为nginx镜像

1. 概述

前端使用vue进行开发，但是前端的版本比较多，导致依赖主机电脑的环境，并会编译失败，所以使用node镜像进行编译。 同时，由于前端的静态文件使用nginx服务作为服务进行，所以还需要将编译的静态文件打包成nginx镜像。

2. Dockerfile文件

配置简单说明：

  1. 环境变量SASS_BINARY_SITE 使用淘宝镜像防止node-sass下载失败，导致编译失败
  2. 设置yarn代理，加快npm包的下载速度
  3. COPY命令是将文件从一个镜像copy到另一个镜像
FROM node:10
ARG version=prod
COPY ./ /app
WORKDIR /app
ENV SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass
RUN yarn config set registry http://registry.npm.taobao.org/
RUN yarn && yarn build:$version

FROM nginx:1.15.0
LABEL MAINTAINER="kaisawind <wind.kaisa@gmail.com>"
COPY --from=0 /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/

3. Vue cli官方打包方法

Docker Nginx