docker编译vue并打包nginx镜像

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

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


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

文章标题:docker编译vue并打包nginx镜像

本文作者:kaisawind

发布时间:2019-06-05, 04:02:53

最后更新:2020-11-18, 15:55:44

原始链接:https://kaisawind.gitee.io/2019/06/04/2019-06-05-other3/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏