Zenn
🐳

【すべてコピペで完了！】Docker(docker-compose)でzenn_cli環境を作る！

2021/03/06に公開
Docker
npm
Zenn
docker-compose
tech

はじめに

zenn.devの記事をローカルで執筆する時は、「zenn_cli」ツールがすごく便利です。

zenn_cliは,スムーズにマークダウンファイルの作成したり、 コンテンツをプレビューしたりするためのツール

ツールが用意されているものの、ただ、普通に環境構築を行うと、ローカルの環境を汚してしまったり、環境構築が面倒なので、
「Dockerを使って、ローカルの環境を汚さずにzenn_cliを使えたらいいな！ 」
と思い、記事を執筆しました。

作成手順

作成手順は以下の通りです。

  1. 必要なファイルを作成する
  2. 各ファイルの記述
  3. コンテナビルド
  4. zennのセットアップ
  5. アクセス確認

一つずつ説明していきます。

必要なファイルを作成

以下のファイルをファイルを作成してください

  • Dockerfile
  • docker-compose.yml
  • package.json
以下のコマンドでファイル作成 (以下コピペ！ $は除く)
$ touch Dockerfile docker-compose.yml package.json

セットアップ

上記で作成したファイルの中身を述し、コマンドを実行していきます。

初めて作成する場合はこちらから行ってください。

1. 各ファイルの記述

Dockerfile (以下コピペ！)
FROM node:lts-alpine

WORKDIR /mnt 

RUN npm install

CMD [ "npx", "zenn", "preview"]
docker-compose.yml (以下コピペ！)
version: "3"
services:
  zenn_cli:
    build: 
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/mnt/
    ports:
      - 8001:8000
    tty: true
package.json (以下コピペ！)
{
    "dependencies": {
      "zenn-cli": "0.1.75"
    },
    "scripts": {
      "article": "npx zenn new:article",
      "book": "npx zenn new:book"
    }
  }

2. コンテナビルド

以下コマンドを実行 (以下コピペ！ $は除く)
$ docker-compose build
$ docker-compose run react_cli npm install

3. zennのセットアップを行う

セットアップは以下の２つの方法のどちらかを実行する。

3-1. コンテナにログインしてセットアップする

以下コマンドを実行 (以下コピペ！ $は除く)
# コンテナに入る
$ docker-compose exec zenn_cli sh
# コンテナ内のカレントディレクトリは /mnt とする
$ npm init --yes 
$ npx zenn init
$ npx zenn preview
# 👀 Preview on http://localhost:8000

3-2.ホスト側からセットアップする

もしくは、以下のコマンドを実行します。

以下コマンドを実行 (以下コピペ！ $は除く)
docker-compose run npm init --yes && npx zenn init && npx zenn preview

4. アクセス確認

http://localhost:8001 でアクセスできることを確認

こちらで、完成になります。

使い方

markdownのプレビュー

$ docker-compose up -d

http://localhost:8001 にアクセスする

記事の作成する

以下のコマンドで新しい記事を作成することができます。

$ docker-compose exec zenn_cli npm run article

本の作成をする

以下のコマンドで新しい本を作成することができます。

$ docker-compose exec zenn_cli npm run book

node_moduleをインストールするor 存在しない時

node_moduelをインストールしたいときや、存在しないときは以下のコマンドを実行します。

$ docker-compose run zenn_cli npm install

最後に

今回はローカルのDocker環境でzenn_cliを使用できる環境を作成しました。
「うまく、実行できないよ！」という方がいらっしゃいましたらコメントなどよろしくおねがいします。

参考

補足

text-lintをいれることで文書公正できるようにしました。
以下ファイルに追記してください。

package.json
{
  "dependencies": {
    "textlint": "^11.9.0",
    "textlint-filter-rule-comments": "^1.2.2",
    "textlint-rule-preset-ja-spacing": "^2.0.2",
    "textlint-rule-preset-ja-technical-writing": "^4.0.1",
    "textlint-rule-prh": "^5.3.0",
    "zenn-cli": "0.1.75"
  },
  "scripts": {
    "article": "npx zenn new:article",
    "book": "npx zenn new:book",
    "textlint": "./node_modules/textlint/bin/textlint.js",
    "textlint:fix": "./node_modules/textlint/bin/textlint.js --fix"
  }
}
.textlintrc
{
  "plugins": {
    "@textlint/markdown": {
      "extensions": [".md"]
    }
  },
  "rules": {
    "preset-ja-technical-writing": {
        "no-exclamation-question-mark": {
        "allowFullWidthExclamation": true,
        "allowFullWidthQuestion": true,
      },
      "no-doubled-joshi": {
         "strict": false,
         "allow": ["か"], // 助詞のうち「か」は複数回の出現を許す(e.g.: するかどうか)
      }
    },
    "preset-ja-spacing": {
      "ja-space-between-half-and-full-width": {
        space: "always",
        exceptPunctuation: true,
      },
      "ja-space-around-code": {
        "before": true,
        "after": true
      }
    },
    "ja-technical-writing/ja-no-mixed-period": {
      "allowPeriodMarks": [":"],
    },
    "ja-technical-writing/sentence-length": false //100文字数制限の無効化
  }
}

Discussion