zenn-cliの動くdocker環境を1から作る

はじめに

Zenn での記事制作にあたって、 Docker での執筆環境を作成しました。
ローカルの環境になんか node とかインストールしたくない！という方もいると思うので、1から環境を作るまでをまとめます。

ゴール

• zenn-cli の動作する Docker 環境の作成
  • コンテナを立ち上げると、プレビューをみることができる。
  • textlint などはこの記事では割愛します。

筆者環境

• Macbook Pro(Catalina)
• Docker version 19.03.13-beta2
• docker-compose version 1.27.2

docker for mac の edge 版を homebrew で install しています。

Dockerfile の作成、 zenn-cli を導入するまで

Dockerfile の作成

初期の設定済ませるまで動かない部分はコメントアウトしておきます。

FROM node:14.11.0-alpine

# 後のnpm installで必要になる
RUN apk add --no-cache git

WORKDIR /app

# COPY ./package.json ./package.json
# COPY ./package-lock.json ./package-lock.json
# RUN npm install --no-progress
COPY . .

EXPOSE 8000

# CMD npx zenn preview

docker-compose.yml の作成

正直なくても良いですが、コマンドで volume 指定したりするのが面倒なので。。。

version: "3.8"

services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/app:cached
      - /app/node_modules
    ports:
      - 8000:8000
    tty: true
    restart: always

イメージを build する

docker-compose build

package.json を作成、 zenn-cli をインストールする

docker-compose run --rm app npm init
# PJ名とかの入力を求められます、それぞれお好みで
docker-compose run --rm app npm install zenn-cli

package.json を確認してみると、 dependencies に zenn-cli が含まれていると思います。

Dockerfile の修正、プレビュー環境を動かすまで

Dockerfile の修正

package.json、package-lock.json を作成したので、Dockerfileのコメントアウトした部分を修正します。

FROM node:14.11.0-alpine

RUN apk add --no-cache git

WORKDIR /app

COPY ./package.json ./package.json
COPY ./package-lock.json ./package-lock.json
RUN npm install --no-progress
COPY . .

EXPOSE 8000

CMD npx zenn preview

記事、本を格納するディレクトリを作る

zenn-cli のプレビューモードを実行すると、記事、本を格納するディレクトリが無いとエラーが起きます。
記事作成コマンドを打ってもディレクトリは生成されないので、事前に作成しておきます。

mkdir books articles

これでDockerfileは完成となります。node で動くのでシンプルですね〜。

記事を作成する

ローカルで下記コマンドを叩けば、公式と同様に作成されます。

docker-compose run --rm app npx zenn new:article

記事のプレビューを起動する

コンテナを起動してあげれば良いです。

docker-compose up

localhost:8000で確認できます。
エラーが出ていればコンソールに表示されます。

終わりに

好きなエディターで記事書いて、資産として管理できるって良いですね。