使用docker打包一个简单前端模板网页

由 漆黑菌 于 2019年09月12日 发布

需求背景

用户中心有一个登录页较为特殊,需要单独拆出来采用类似之前JSP模式的混合渲染。由前端提供HTML模板,后端渲染后展示给用户。原计划是我本地build以后直接交给后端同学,但是daocloud这边产品核心技术之一就是docker,而且这个需求的docker可以不在正式生产环境中使用,所以正好拿这个来当新手任务了。

参考文章

gitbook的《Docker — 从入门到实践》https://yeasy.gitbooks.io/docker_practice/

三个技巧,将 Docker 镜像体积减小 90%https://www.infoq.cn/article/3-simple-tricks-for-smaller-docker-images.

简介

因为本次打包产生的是一个静态HTML文件,所以目标就是最后发布一个只包含静态文件的docker。

  1. 首先拉取node镜像,可以去https://hub.docker.com/上结合node官网搜索长期支持版本的docker。因为此处要用到多段构建功能所以命名为build阶段。

  2. 设置工作路径为/build据说这种写法可以利用缓存,实际上用了这种写法以后,如果npm依赖没有变,是可以复用的。

  3. npm打包完成以后,通过FROM scratch设置基础镜像为空,然后用CPOY --from=build指令从build阶段的镜像中取出打包完成的dist文件写入空镜像。

最后写的dockerfile配置文件如下。

    FROM node:10.16.3-stretch as build

    WORKDIR /build
    # 根据从nodejs网站上抄的代码讲这种操作可以使用缓存
    COPY package*.json ./
    RUN npm config set registry https://registry.npm.taobao.org \
        && npm install
    COPY . ./
    RUN npm run build

    # 需要打包的内容实际上只是一些静态文件所以在一个空镜像里就可以了
    FROM scratch
    COPY --from=build /build/dist /

如果需要发布到nginx的配置

    FROM nginx:1.9

    COPY dist /usr/share/nginx/html/
    RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \
        echo "Asia/Shanghai" > /etc/timezone
    EXPOSE 80

    CMD nginx -g 'daemon off;'