WSL2+DockerでVivliostyleの環境を構築する

Q. なんでこんな周りくどいことしているの？ A. 印刷用PDF（PDF/X-1a）形式に変換するにはDocker環境が必要だから Adobe Acrobat ProなしでグレースケールPDFにすることができます。脱Adobeがはかどりますねぇ……！ ## 環境 - Windows 11 Home - WSL2（Microsoft Store版） - Ubuntu 22.04（同上） - Node.js（20.16.0） - Vivliostyle（8.13） ## 大まかな流れ 1. WSL2とUbuntuを入れる 2. Ubuntuログイン・初期設定 3. rootに移動してNode.js/Dockerインストール 4. 指定ユーザーをDocker権限に入れてUbuntuを再起動 5. workdirの作成 6. Gitリポジトリをclone（任意） 7. Docker実行 ## 詳細 ### 1. WSL2とUbuntuを入れる Microsoft StoreでWSL2とUbuntuを入れます。適当に検索してインストールすればOKです。 ### 2. Ubuntuログイン・初期設定 Win11 Homeの設定で「コントロールパネル→プログラムと機能→Windowsの機能の有効化または無効化」を開きます。設定窓を開いたら「Linuxサブシステム」と「仮想マシンプラットフォーム」にチェックして再起動。再起動後、ダウンロードしたUbuntuを起動してユーザー名とパスワードを入力します。 ### 3. rootに移動してNode.js/Dockerインストール `root`に移動し、Node.jsとDockerをインストールします。 #### Node.js設定 ``` # curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg # echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list ``` #### Docker設定 ``` # sudo apt update # sudo apt install ca-certificates curl # sudo install -m 0755 -d /etc/apt/keyrings # sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc # sudo chmod a+r /etc/apt/keyrings/docker.asc # echo \ "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \ $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \ sudo tee /etc/apt/sources.list.d/docker.list > /dev/null ``` #### インストール ※ついでにUbuntuのupgradeを行っています ``` # sudo apt update && sudo apt upgrade -y # sudo apt install -y nodejs docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin ``` ### 4. 指定ユーザーをDocker権限に入れる rootユーザーで実行しない場合、ここで指定ユーザーをDocker権限に入れておきます。今回は2で設定したユーザーをそのまま使うので、ユーザー作成部分は省略します。 ``` # sudo usermod -aG docker <2で作成したユーザー名> ``` ユーザー権限を与えたら、Ubuntuを再起動させます。 ### 5. 2のユーザーでworkdirディレクトリーの作成 2のユーザーでログインした後、workdirディレクトリを作成します。この時に他のディレクトリ名で行わないこと。7の動作でコケます。 ``` $ mkdir workdir && cd workdir ``` ### 6. Gitリポジトリをclone(任意) もしGitで原稿を管理している場合、ここで原稿をcloneします。 ``` $ git clone <リポジトリのURL> && cd <リポジトリ名> ``` ### 7. Docker起動 ``` $ docker run \ --env "DISPLAY=${DISPLAY:-:0.0}" \ --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \ --mount "type=bind,source=$PWD,target=/vivliostyle" \ --workdir /vivliostyle/ \ --interactive \ --tty \ --rm \ ghcr.io/vivliostyle/cli:8.13 preview ``` - [Vivliostyle cli · GitHub](https://github.com/vivliostyle/vivliostyle-cli/pkgs/container/cli) 上記のリンクからVivliostyleのCLIバージョンを調べます。バージョンを確認後、`ghcr.io/vivliostyle/cli:8.13`の8.13を任意の数字にしてください。これでプレビューが出たらひとまず完了です。お疲れさまでした。 ## Ubuntu運用でのコツ ### WSLにあるファイルをWindowsのVSCodeで開けない？できます。VSCodeの「WSL」プラグインを導入した後に、Ubuntu側の原稿ディレクトリで「`code .`」と実行します。ただ、Ubuntuでのプレビューが乱れることが多いので、Ubuntu側で編集しない方がいい気がします。あくまで印刷用PDFを出力する程度に使用することをおススメします。 ### preview以外のコマンドを使いたい ``` $ docker run \ --env "DISPLAY=${DISPLAY:-:0.0}" \ --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \ --mount "type=bind,source=$PWD,target=/vivliostyle" \ --workdir /vivliostyle/ \ --interactive \ --tty \ --rm \ ghcr.io/vivliostyle/cli:8.13 <コマンド> ``` 一番下の行がコマンドになるので、お好みのコマンドを入力してください。 ### 印刷用PDF（グレースケール）を出力するにはどうすればいい？ ``` $ docker run \ --env "DISPLAY=${DISPLAY:-:0.0}" \ --volume /mnt/wslg/.X11-unix/:/tmp/.X11-unix \ --mount "type=bind,source=$PWD,target=/vivliostyle" \ --workdir /vivliostyle/ \ --interactive \ --tty \ --rm \ ghcr.io/vivliostyle/cli:8.13 build --preflight press-ready --preflight-option gray-scale ``` 一番下のコマンドで`--preflight press-ready`オプションを実行します。この際に`--preflight-option`で`gray-scale`を設定することで、グレースケールPDF（KのみのPDF）になります。 ## 関連リンク - [[Vivliostyle CLIのインストール・アップデート]] - [[【Mastodon・Misskey】Node.jsのアップデート方法をおさらいする]] - [[Adobe CCが無くても技術同人誌は出せるのか]] Fediverseに関係ないのにリンクがある？気のせいだ。 ## 参考リンク - [Installing from source - Mastodon documentation](https://docs.joinmastodon.org/admin/install/) - [Install Docker Engine on Ubuntu | Docker Docs](https://docs.docker.com/engine/install/ubuntu/) - [Docker入門 | さくらのナレッジ](https://knowledge.sakura.ad.jp/13265/) - [Vivliostyle CLI](https://docs.vivliostyle.org/ja/vivliostyle-cli.html) - [Vivliostyle CLIのDockerコンテナからプレビューを表示する - Qiita](https://qiita.com/U-1F992/items/c75ffa7373a49d216862) なぜMastodonインストールサイトがあるかって？Node.jsインストール時にいつもお世話になるからだよ！！！