Zenn
⛳

DockerでZenn CLI環境を整える

2021/01/04に公開
Docker
Node.js
tech

更新ログ

  • 2021/Jan/04 新規エントリ

このエントリで言いたいこと

Docker上でNode.jsによるZenn執筆環境をつくった。

環境

  • MacBook Pro (13-inch, 2019, Four Thunderbolt 3 ports)
    プロセッサ：2.4 GHz クアッドコアIntel Core i5
    メモリ：16 GB 2133 MHz LPDDR3
  • MacOS Big Sur (11.1)
  • Docker Desktop (3.0.2(50996))

本論

きっかけ

ブログサービスQrunchが終了したためZennに移行しようとしたが、Node.js環境を入れるのが億劫になっていて放置していた。
ちょうどDockerに興味があったので、この際Docker上でNode.jsを動かしてみようと思った。

想定運用手順

  • GitHub連携でブログ公開する。ただし、GitHubへのpushは自プロセスから。
    新規ファイル作成、プレビューをDocker上のNode.js環境で行う。
  • Dockerはdocker-composeから起動する。

類似案件調査

他にもやってる人いるだろうと思って検索し、以下の2つを参考にすることにした。

どちらもDocker上でGitを呼んでいるので、そこはカスタマイズする。

フォルダ構成

Zenn CLI dockerで簡単構築とほぼ同じ。

zenn-blog
├── articles
│   ├── 00_template.md
│   ├── 4a321e3286b271ed79dc.md
│   └── 95742c7b310169f74213.md
├── books
├── docker
│   └── Dockerfile
├── docker-compose.yml
├── .gitignore
└── workspace.code-workspace

Docker環境

Zenn CLIをインストールするによると、2021/1/4現在Node.js v15以降ではzenn-cliを使えないため、v14をインストールする。
タグ名はdockerhubのNode.jsイメージを参照。
Zennの執筆環境をVSCode + Dockerで作ってみたを参考にroot以外のユーザを作成する。
解釈できなかったオプションパラメータは適宜変更。
adduserの'-S'オプションは分からなかったので削除。
zenn-cliのインストール & 初期化まで行う。

Dockerfile
FROM node:14

ARG USER_NAME
ARG GROUP_NAME
ARG USER_UID
ARG USER_GID

RUN deluser --remove-home node \
    && addgroup --gid $USER_GID $GROUP_NAME \
    && adduser --uid $USER_UID --shell /bin/sh $USER_NAME --ingroup $GROUP_NAME

RUN npm init --yes \
    && npm install -g zenn-cli@latest \
    && npx zenn init

RUN mkdir /home/$USER_NAME/contents \
    && chown -R ${GROUP_NAME}:${USER_NAME} /home/$USER_NAME/contents

USER $USER_NAME
WORKDIR /home/$USER_NAME/contents

docker-compose側で、containerを立ち上げた後にpreviewページを作成する。

docker-compose.yml
version: "3"

services:
  node:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
      args:
        USER_NAME: ak2ume
        GROUP_NAME: ak2ume
        USER_UID: 1000
        USER_GID: 1000
    ports:
      - "8000:8000"
    volumes:
      - .:/home/ak2ume/contents:cached
    command: npx zenn preview

使い方

containerの立ち上げ

zenn-blog フォルダに移動して以下を実行する。

docker-compose up

立ち上げたあと http://localhost:8000/ にアクセスすれば記事のpreviewを見られる。
エディタでファイル保存すれば、すぐに反映される。

記事の新規作成

上記とは別プロセスでターミナルを起動し、

docker exec -it zenn-blog_node_1 zenn new:article

でslug IDを自動生成したtemplateファイルをarticleフォルダ配下に作成してくれる。

まだ分からないこと

  • なし

reference

Discussion