借助docker构建vue.js镜像

周末在研究一个vue写的项目，奈何mac上面 npm install 会报错，有个gcc编译失败，于是考虑用 docker 来构建。

通过在 hub.docker.com 搜索，我找了这个镜像： vuejs/ci
实测可用，可是做出来的 image 太大了(1.43GB)，然后想了一个办法，用 httpd 做了最终镜像，体积减小到144MB，大致流程如下：
1，构建基础 base 镜像，主要任务是 npm install ，安装基础依赖。主要是避免代码修改后，重复安装依赖。
2，构建打包 building 镜像，主要任务是执行 npm run build，生成 production 环境代码。
3，构建分发 dist 镜像，主要任务是打包 dist。

最终结果：

镜像

终端运行的脚本 build_docker_image.sh

#!/bin/bash

# 切换到主目录
cd ..

# 清理之前的文件
rm -rf /tmp/share/
rm -rf ./dist/
rm -rf ./node_modules

# 如果没有基础镜像，构建一个
if [[ "$(docker images -q vue-cms:base 2> /dev/null)" == "" ]]; then
    echo "build base image"
    docker build -t vue-cms:base -f ./docker/Dockerfile.base .
fi

# 使用 docker 构建 vue dist
echo "build building image"
docker build -t vue-cms:build -f ./docker/Dockerfile.make .
docker run -it --name build -v /tmp/share/:/tmp/share/ vue-cms:build

# 将构建结果拷贝出来
cp -r /tmp/share/dist ./dist

# 使用构建结果打包成目标镜像
echo "build dist image"
docker rmi vue-cms:latest
docker build -t vue-cms:latest -f ./docker/Dockerfile . 

# 运行镜像
docker stop vue
docker rm vue
docker run -it -d --name vue -p 8080:80 vue-cms:latest
open http://localhost:8080

# 清理中间镜像
docker rm build
docker rmi vue-cms:build

生成打包镜像用到的 Dockerfile.make

FROM vue-cms:base
COPY ./ /vue-cms/
RUN rm -rf /vue-cms/node_modules
RUN cp -rf /vue-cms-base/node_modules /vue-cms/
WORKDIR /vue-cms/
RUN npm install
ENTRYPOINT ["sh", "building-entrypoint.sh"]

打包镜像的入口 entrypoint.sh

#!/bin/sh
npm run build
cp -r dist /tmp/share/

打包分发镜像的 Dockerfile

FROM httpd:latest
COPY ./dist/ /usr/local/apache2/htdocs/
WORKDIR /usr/local/apache2/htdocs/
EXPOSE 80