💯

Zenn記事でもレビューしたい！のでPull Requestごとにプレビューページを作る

2020/09/20に公開

GitHub

Heroku

Zenn

tech

Zenn 始めました。

ZennとGitHubを連携させることで、記事や本をリポジトリ管理できるのは大変便利ですね。

ところで、せっかく GitHub を使えるなら Pull Request でレビューしたくなってきますよね？　そういった場合、わざわざ手元にチェックアウトして zenn preview を実行することなく記事が確認できると便利そうです。

そんなわけで、Heroku Review Appsを使って Pull Request から記事を簡単に確認できるようにしてみました。

事前準備

あらかじめ、以下の 2 つの公式記事に従って GitHub 連携し、Zenn CLI を使えるようにしておきます。

この作業通りに行えば、以下のようなディレクトリ構成になっているはずです。

$ tree -L 2 -a -I node_modules
.
├── articles
│   └── .keep
├── books
│   └── .keep
├── .gitignore
├── package.json
├── package-lock.json
└── README.md

2 directories, 6 files

Herokuデプロイ設定

Heroku は package.json を検知してNode.js用のビルド設定を自動で使ってくれるため、npm start でプレビューが立ち上がるようにするだけで OK です。

package.json を以下のように書き換えます。

$ git diff
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -4,7 +4,12 @@
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"no test\"",
+    "start": "npx zenn preview -p $PORT",
+    "watch": "npx zenn preview -w"
+  },
+  "engines": {
+    "node": "14.x"
   },

Heroku 用のデプロイ設定のほか、npm test で例外コードを返さないようにする処置と、npm run watch で開発用のプレビュー画面がホットリロードで開くようにしています。

以下のように PORT を指定して npm start し、指定したポート番号でプレビューが立ち上がればオーケーです。

$ PORT=3000 npm start

> cli_test@1.0.0 start /home/kokuyouwind/repos/zenn-content/cli_test
> npx zenn preview -p $PORT

Preview on http://localhost:3000