docker编译vue并打包nginx镜像

docker > docker vue

Created At : 2019-06-05 12:02

Views 👀 :

Comment:

1. 概述
2. Dockerfile文件
3. Vue cli官方打包方法

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

1. 概述

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

2. Dockerfile文件

配置简单说明：

环境变量SASS_BINARY_SITE
使用淘宝镜像防止node-sass下载失败，导致编译失败
设置yarn代理，加快npm包的下载速度
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

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 wind.kaisa@gmail.com