Zenn CLI環境をDockerで構築

はじめに

Zenn CLIを導入するにあたって、ローカル環境を汚したくなかったのでDockerで構築しました。
なお、Zenn CLIの基本的な導入方法はZenn公式よりこちらで公開されています。

リポジトリ準備

まずはリポジトリを準備します。
以下のように2つのリポジトリを作成しましょう（注1）。

• zenn-content-env
• zenn-content

zenn-content-envは、docker-compose.ymlなどDocker関連のファイルを格納するためのリポジトリです。

zenn-contentは、Zennと連携しているリポジトリです。こちらのリポジトリに記事情報を格納していくことになります。
Zennとリポジトリの連携方法はZenn公式よりこちらで公開されています。

ローカルの作業ディレクトリが~/workspaceだとすると
~/workspace配下にzenn-content-envを配置し、~/workspace/zenn-content-env配下にzenn-contentを配置します。

ファイル作成

次に、用意したリポジトリにファイルを追加していきましょう。

docker-compose.yml

以下ファイルを~/workspace/zenn-content-env配下に追加しましょう。
特に難解な箇所はないと思いますので解説は割愛します。

docker-compose.yml

version: '3'
services:
  zenn-content:
    build: ./docker/zenn-content
    volumes:
      - ./zenn-content:/usr/src/app
    ports:
      - "8000:8000"
    tty: true

Dockerfile

以下ファイルを~/workspace/zenn-content-env配下に追加しましょう。
特に難解な箇所はないと思いますので解説は割愛します。

Dockerfile

FROM node:15.3.0-alpine3.10
WORKDIR /usr/src/app
RUN apk update && \
    apk add git
EXPOSE 8000

コマンド実行

以下コマンドを実行しましょう。
Zenn CLIの使い方はZenn公式よりこちらで公開されています。

$ docker-compose up -d
$ docker-compose exec zenn-content npm init --yes # プロジェクトをデフォルト設定で初期化
$ docker-compose exec zenn-content npm install zenn-cli # zenn-cliを導入
$ docker-compose exec zenn-content npx zenn init # セットアップ

動作確認

最後にプレビューを開いて動作確認とします。

$ docker-compose exec zenn-content npx zenn preview

http://localhost:8000にアクセスして以下のように表示されたら成功です。

以下コマンドなどを用いて記事を書き始めましょう！

$ docker-compose exec zenn-content npx zenn new:article

さいごに

特に詰まることなく導入できました。
今後はこちらを使って記事投稿を行っていけたらと思います。

備考

（注1）
zenn-content-envリポジトリの作成は任意です。