댓글 달고 싶어요, 젠 기사!각 Pull Request의 미리 보기 페이지 만들기

시작했어.
Zenn과 GiitHub이 연합하도록 하겠습니다. 따라서 보도와 서적에 대한 창고 관리가 매우 편리하다.
그나저나 기릿허브를 어렵게 쓰면 풀 리퀘스트로 코멘트하려고 하겠지?이 경우 특별히 손 옆에서 체크아웃zenn preview하지 않고 기사 내용을 확인할 수 있다면 편리하다.
그래서 나는 Heroku Review Apps를 사용해 Pull Request에서 보도를 간단하게 확인했다.

사전 준비

사전에 다음 2개의 공식 보도에 따라 GiitHub 연합을 진행하여 Zenn CLI를 사용할 수 있도록 한다.

GiitHub 창고를 이용하여 Zenn의 콘텐츠 관리

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 depro 설정

히로쿠가 감지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가 사용한 depro 설정을 제외하고 npm test에서 예외 코드의 처리와 npm run watch에서 개발한 미리보기 화면을 열재부팅으로 엽니다.
다음과 같이 PORTnpm start를 지정하여 지정된 포트 번호로 미리 보기를 시작합니다.

$ PORT=3000 npm start

> [email protected] start /home/kokuyouwind/repos/zenn-content/cli_test
> npx zenn preview -p $PORT

Preview on http://localhost:3000

Heroku Piperline 만들기

Heroku Dashboard에서 New>Create new pipeline을 선택하여 파이프를 생성합니다.
GiitHub 창고는 Zenn과 합작한 창고를 선택합니다.

Pipeline을 완료했으면 맨 왼쪽 열에서 Enable Review Apps를 클릭합니다.
오른쪽에서 설정을 열고 Create new review applus for new pull requests automatically를 선택한 후 Enable Review Apps를 클릭합니다.

이렇게 하면 준비할 수 있어요!

동작 확인

적당히 글을 만들고 Pull Request를 만들어 보면 다음과 같이 deproy를 시작합니다.

시간이 지나면 프로그램이 완성되면 다음과 같은 내용이 표시됩니다.

이 상태가 되면 View deployment 를 클릭하여 미리 보기 페이지를 열 수 있습니다.

너무 완벽해!💯
또 리뷰 환경 상황도 헤로쿠의 피플라인 화면에서 확인할 수 있다.

주의점

히로쿠 리뷰 앱스는 인증 등 기능이 없어 무작위 URL이라고도 다른 사람이 접근할 수 있기 때문이다.
일반적인 보도는 공개를 전제로 하기 때문에 문제가 없을 것으로 보이지만, 유상판매가 예정된 책이라면 이 위험을 감안해 사용을 검토해달라고 당부했다.

앞으로의 꿈

이번에는 히로쿠 리뷰 앱스를 사용했지만 미리보기 화면이 조용해 Netlify의Deploy Preview를 사용할 수 있다면 더 빠르고 공짜인 테두리를 압박하지 않고 같은 일을 할 수 있다.
현재의 Zenn CLI는 미리보기 화면을 정적 웹 사이트로 출력하는 기능이 없기 때문에 그런 기능이 있다면 나도 한번 해보고 싶다.