基于 docker 和 pyppeteer 的预渲染的自动化

在 上一篇博客 中，我基于 pyppeteer 实现了 vue SPA 的预渲染。但是到目前为止，预渲染还需要我每次手动在我的 Windows 电脑上操作，不能自动化进行，更不能持续集成。在这篇博客里，我将实现基于 docker 和 pyppeteer 的预渲染自动化。

本文的全部代码已经开源在 gwy15.com.prerender。

（以下 pyppeteer 简写为 pyptr）

Docker 下的 pyppeteer 环境安装

首先，我们需要选择一个合适的基础镜像，在上面完成我们的 docker 镜像构建。

搜索 Docker Hub，发现有现成的 puppeteer 镜像，但是其是基于 node.js 搭建，如果在上面沿用，会引入 node 环境，这是我们用不上的。而 Docker Hub 上现成的 pyptr 镜像则略显版本老旧，我不太喜欢。因此，这次我选择从 python:3.8-slim 镜像开始构建。

根据 官方的依赖说明 ，我们很快能写出 chromium 依赖的安装语句

RUN sed -i s/deb.debian.org/mirrors.aliyun.com/ /etc/apt/sources.list \
    && sed -i s/security.debian.org/mirrors.aliyun.com/ /etc/apt/sources.list \
    && apt-get update \
    && apt-get install -y --fix-missing \
        gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 \
        libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 \
        libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 \
        libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
        libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 \
        libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 \
        lsb-release xdg-utils wget \
    && apt-get clean && apt-get autoremove -y && rm -rf /var/lib/apt/lists/*

将解压后的 chromium 镜像拷贝到相应路径、建立非 root 用户、安装 python 脚本的依赖后，我们就可以编译 docker 镜像了。

自动化运行预渲染

我们还需要编写一个启动脚本进行 docker 的运行环境设置，包括：

• 本地（宿主）到容器路径的挂载
• 挂载路径的权限移交
• chromium 的沙盒设置

最终我编写的脚本如下：

#! /bin/bash
set -e
cd "${0%/*}"
# prepare output directory
mkdir -p output
# change permissions
chown -R 999:999    output && chmod -R 775  output
docker run -it --rm --init --cap-add=SYS_ADMIN \
    -v `pwd`/output:/home/pptruser/output \
    prerenderer
# hand over permission to main user
chown -R 1000:1000  output && chmod -R 775  output

需要自动化预渲染时，运行此脚本即可。