zen 로컬 미리보기를 여는 Docker image 만들기

대강

며칠 전에 젠에 등록했는데 GiitHub 창고에서 협업이 재밌었어요.
우리는 곧 합작할 것이다.
하지만 GiitHub 창고를 연합하면 창고부터 Write를 시작할 수 있다.
젠 측 웹 편집기가 사용할 수 없는 상태에서 글을 쓰려면 로컬 환경에서 집필→GiitHub Push에 대한 방법밖에 없다는 것이다.
(이 점은 이미 정부측을 알았고 다른 사람도 썼다.)
[2010/10/15 보완] 협업 상태에서도 웹 편집기가 열립니다.
집필 후업데이트 창고 협업 상태에서도
웹 편집기에서 Mardown 파일의 소스를 확인하고 업데이트할 수 있습니다.
그러나 GiitHub 측에서 업데이트하면 웹 편집기에서 편집한 차이는 무시됩니다.
(zen→GiitHub 창고에서 이전의 연결 기능을 쓸 수 있다는 뜻)
기릿허브가 합동하기 전에 쓴 기사를 창고로 옮기는 것이 기본적인 사용법이라고 생각합니다.
(또는 덮어쓴 것을 파악한 토대에서 편집기로 사용하고 매번GiitHub 측에 수동으로 반영됨)
이렇게 되면 글을 미리 보기 위해서는 공식적으로 제공된zenn-cli을 사용해야 한다.
zen-cli는 npm에 간단하게 설치할 수 있지만 공동 보도된 창고가 있다면 미리 보기 환경을 간단하게 재구성할 수 있을 것 같습니다.
그래서 우리는zen-cli를 Docker의 이미지로 만들어 간단하게 일어서보았다.

Docker 이미지 만들기

먼저 Zen-cli가 설치된 Docker 이미지를 만듭니다.
마지막으로 작성된 Docker file은 다음과 같습니다.

FROM node:14.11.0-alpine3.12
RUN apk add --no-cache --update git
RUN npm init --yes
RUN npm install zenn-cli

14.11.0 사용

이 인상에서 원래의 인상은 원래의alpine을 사용하지 않고 node가 제공한 이미지를 사용한다.
이것은 알피니3입니다.12 node 설치→zen-cli를 사용할 때 미리 보기 화면의 URL을 열 때ReferenceError: url is not defined 오류가 발생하여 제대로 표시할 수 없습니다.
찾아봤어, 노드.js의 버전이 낡으면 발생하기 때문에 node의 버전은 최신 이미지를 사용합니다.

GTI 설치

두 번째 줄에 Giit를 설치한 것은zen-cli가 의존하는 일부 소프트웨어 패키지가 Giit 명령을 실행했기 때문이다.
Giit 가 없으면 다음 오류로 인해 npm install 이 실패할 수 있습니다.

npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -2
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://[email protected]/catnose99/markdown-it-custom-block.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

따라서 GTI를 미리 설치해야 합니다.
이 Docker file로 제작된 이미지는 ik11235/zenn-cli라는 이름으로pushdocker hub로 만들어졌습니다.

이미지를 사용한 Docker Compose 활용

상기 이미지를 사용하면zen-cli를 설치한 기계로 사용할 수 있습니다.
그러나zen-cli는 문장 미리보기에 사용되기 때문에 그 문장 데이터가 필요합니다.
미리 보기 환경의 특성상 용기 자체가 항상 시작되고 글 파일을 제때에 편집합니다.
따라서 사전에 데이터를 컨테이너 안으로 복제하는 수단은 이번 용도에 적합하지 않다.
이번에는 호스트 편지를 마운트할 디렉터리입니다.
다음 docker-compose.yml에 이러한 환경을 만듭니다.

version: '3'
services:
  zenn:
    image: ik11235/zenn-cli
    volumes:
      - ./articles:/articles
      - ./books:/books
    ports:
      - "8000:8000"
    command: ["./node_modules/.bin/zenn"]

사용법

Docker가 설치된 기계, 창고와 연합된 디렉터리에 상기 docker-compose.yml를 설치하십시오.

.
├── articles
│   ├── example-article01.md
│   └── example-article02.md
├── books
└── docker-compose.yml

이후 이 디렉터리에서 다음 명령을 실행하면 미리 보기 서비스가 시작됩니다.

docker-compose up

http://localhost:8000/를 켜면 미리보기 화면이 보일 거예요.
미리보기 화면에서 사용하는 포트 번호를 변경하면 docker-compose.yml의 왼쪽ports 포트 번호가 변경됩니다.
컨테이너의 8000호 포트를 변경된 포트 번호로 전송하여 포트 번호를 변경할 수 있습니다.

끝맺다

이 글을 쓸 때 실제로 사용하는 것은 이 미리보기 환경이지만 문제가 없다.
다만, 글을 쓸 때 어차피 현지에서 기사를 쓰면 textlint도 넣고 싶지만, textlint도 npm에 설치돼 억지로 Docker 용기로 담을 필요가 없다는 말이 떠오르는데...