ZennのGitHub連携とZenn CLIのコンテナ実行

Zenn向けの記事作成、コンテンツ管理を効率化するためにGitHub連携とZenn CLIの導入を行った。合わせてZenn CLIのコンテナイメージを作成。

GitHubリポジトリでZennのコンテンツを管理する

Zennの記事をGitHubのリポジトリとして管理、記事の作成が行える。

zenn.dev

手順はZenn公式の記事の通り。

• GitHubに新規リポジトリ作成（プライベート可）
• Zennのダッシュボード > Deploys からリポジトリを連携
  • 新規作成したリポジトリのみ連携対象とする
• ブランチ名の確認
  • ブランチは自動でmainが選択された

連携後はgit pushからすぐにZenn側に反映されるのを確認。

課題

• 現時点ではGitHub→Zennへの1方向しか連携できない。すでに投稿済みのコンテンツは手動でGitHubのコンテンツに作成し、git pushして同期し直すしかない。

Zenn CLIのコンテナ実行

Zenn公式のCLIおよびローカルプレビューのためのツール。

zenn.dev

OSSとしてGitHubリポジトリで公開。リポジトリ名はZenn Editor。

github.com

• Node.js製のため、ローカルにインストールするには環境構築が必要
• コンテナで実行することでローカル環境をクリーンに保つ
• リモートのLinuxサーバー上で実行してmacOSから接続して使用

コンテナイメージの特徴

• ベースイメージにRed Hat UBI(UBI8)を使用
  • UBIについてはこちらを参照
  • UBI8ベースのNode.jsイメージもあるが不要なパッケージやイメージサイズが大きいので使用を見送り。UBI8からスクラッチでイメージを作成。
  • UBI8 Minimalはパッケージマネージャーがmicrodnfのため、Node.jsのインストールスクリプトが実行できなかったため見送り
• Node.js v16
  • Zenn CLIのNode.js バージョン指定は見当たらなかったので最新版で実行
  • 以前は v15以上は動作不可だった？ https://zenn.dev/link/comments/37ee0dd4e886e3
• ルートレスで実行可能
  • コンテナ内実行ユーザー: zenn

Podman コマンド

• コンテナ実行: podman run -d --name zenn -p 8000:8000 -v ./zenn-content:/zenn:z --userns=keep-id tnk4on/zenn
  • ローカルにzenn-contentディレクトリを作成してコンテナにバインド
  • コンテナ内の実行ユーザーとローカルのユーザーのidをマッピングし、作成したコンテンツをコンテナ/ホストどちらでも編集可能に
• コンテナの停止: podman stop zenn
• コンテナの再開: podman start zenn
• コンテナの削除: podman stop zenn; podman rm zenn
• 記事の新規作成: podman exec -it zenn npx zenn new:article