VivliostyleをDockerで使ってPDFビルド&GitHub Actionsで自動実行 #Docker

概要

VivliostyleをDocker内で使ってPDFをビルドした時の方法です。あまりDockerやGitHub Actionsを使う方法が見当たらなかったためメモを残すことにしました。

環境

ChromeOS crostini Linux Debian 10.11
Docker version 20.10.7
Vivliostyle cli 4.5.0

ディレクトリ構成

下記のようなディレクトリ構成にします。お好みで変更してください。

.
├── book/
│   ├── dist/  # ビルドした成果物の出力先
│   ├── docs/  # 記事
│   ├── node_modules/
│   ├── package.json
│   ├── publication.json
│   ├── themes/packages/@vivliostyle/theme-techbook/
│   ├── vivliostyle.config.js
│   └── yarn.lock
├── Dockerfile
└── docker-compose.yml

プロジェクトのルートディレクトリにDockerfile,docker-compose.ymlを配置
book/というディレクトリ内に、vivliostyle cliで構築したvivliostyleのプロジェクトを配置
book/distに、ビルドしたCSSやPDFファイルを配置

DockerでPDFをビルドする

まずDockerfile,docker-compose.ymlを用意します。apt-getでインストールする依存ライブラリが多くなっています。
また、Dockerコンテナ内にフォントが必要です。私はIPAex明朝を使うためインストールしていますが、必要に応じて変更してください。

Dockerfile

FROM node:16-slim
WORKDIR /app

RUN apt-get update && apt-get install -y \
  git \
  curl \
  build-essential \
  libgtk2.0 \
  libnss3-dev \
  libatk-bridge2.0-0 \
  libdrm-dev \
  libxkbcommon-dev \
  libgbm-dev \
  libasound-dev \
  fonts-ipaexfont \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

COPY book/package.json .
COPY book/yarn.lock .
RUN yarn

docker-compose.yml

version: '3'
services:
  app:
    build: .
    volumes:
      - ./book:/app

SASSビルドの設定

vivliostyle cliでプロジェクトを構築し@vivliostyle/theme-techbookを利用すると、
book/themes/packages/@vivliostyle/theme-techbook（以下、テーマ側）に配置されます。この中のscss/をカスタマイズして使っています。テーマ側のpackage.jsonで行われるSASSのビルドをbook/package.json側（以下、親側）でできるようにしたいので、sassライブラリをテーマ側から親側のpackage.jsonに移動します。
yarn run sass （テーマ側）/scss/:dist/stylesで、book/dist/stylesにビルドしたCSSが出力されますので、このコマンドもscriptsに追加します。

book/package.json（抜粋）

{
  "scripts": {
    "build:css": "yarn run sass themes/packages/@vivliostyle/theme-techbook/scss/:dist/styles",
    "build": "yarn run build:css && vivliostyle build --no-sandbox",
  },
  "dependencies": {
    "@vivliostyle/cli": "latest",
    "@vivliostyle/theme-techbook": "^0.4.0",
    "npm-run-all": "^4.1.5",
    "sass": "^1.32.8"
  },
  "private": true
}

.gitignoreにも追加しておくと良いと思います。

.gitignore（抜粋）

book/dist/*

vivliostyle.config.jsに、このビルド後のスタイルを読み込む設定を追記しておきます。

book/vivliostyle.config.js（抜粋）

module.exports = {
  theme: 'dist/styles/theme_print.css',
  output: ['./dist/output.pdf'],
  workspaceDir: '.vivliostyle',
}

$ docker-compose run --rm app yarn buildして、book/dist/output.pdfにPDFが出力されれば成功です。

GitHub Actionsでの実行

GitHub Actions上で、このDockerfileを使ってビルドするようにします。

github/workflows/docker-image.yml

name: Vivliostyle build in Docker

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - run: docker build . --file Dockerfile --tag my-image
    - run: docker run --rm -v $(pwd)/book:/app my-image yarn
    - run: docker run --rm -v $(pwd)/book:/app my-image yarn build
    - uses: actions/upload-artifact@v2
      with:
        name: book
        path: book/dist/output.pdf

GitHub ActionsのArtifactsに、ビルドされたPDFのZipファイルが出力されます。