2
Help us understand the problem. What are the problem?

posted at

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

概要

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

image.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?