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

5 min読了の目安(約3200字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

Heroku Pipeline作成

Heroku Dashboardから New > Create new pipeline を選択し、パイプラインを作成します。

GitHubリポジトリはZennと連携したリポジトリを選択します。

Create new pipeline

Pipelineが作成できたら、一番左の列にある Enable Review Apps をクリックします。

右側に設定が開くので、 Create new review apps for new pull requests automatically にチェックを入れてから Enable Review Apps をクリックします。

Enable Review Apps

これで準備OKです!

動作確認

適当に記事を作成してPull Requestを作ってみると、以下のようにデプロイが始まります。

wait deployment

しばらく待つと、デプロイが完了して以下のような表示に変わります。

deployed

この状態になったら、 View deployment をクリックすることでプレビューページを開くことができます。

preview

完璧ですね!💯

なお、レビュー環境の状況はHerokuのPipeline画面からも確認することができます。

View in pipeline detail

注意点

Heroku Review Appsでは認証などの機能がないため、ランダムURLとはいえ他人にアクセスされてしまう可能性があります。

普通の記事は公開前提なので問題ないと思いますが、有料販売を予定している本の場合などはこのリスクを考慮して利用を検討してください。

今後の夢

今回はHeroku Review Appsを利用しましたが、プレビュー画面は静的なのでNetlifyDeploy Previewを利用できると、より高速かつ無料枠を圧迫せずに同様のことが実現できそうです。

現状のZenn CLIにはプレビュー画面を静的サイトとして出力する機能がないため、そういった機能が入ったらこちらも試してみたいと思います。