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

## 概要
[Vivliostyle](https://vivliostyle.org/ja/)を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: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](https://www.npmjs.com/package/@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`に追加します。

```json: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:.gitignore（抜粋）
book/dist/*
```

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

```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ファイルが出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/7cef856f-f3ae-410d-2c07-d2d42a00d7cd.png)