Zenn
🐳

zenn-cli をDocker（docker-compose） で動かす

2020/09/23に公開
Docker
Zenn
tech

Zenn Cli をdocker-compose を使用してローカルで動かす方法について紹介します。
docker-compose を使用するメリットとしてはNode やライブラリをローカルに入れたくなかったり、既にローカルへ構築済みの環境に影響を及ぼしたくない際に使用できることかなと思います。

1. docker-composeの準備

Dockerfile , docker-compose.yaml の2ファイルを用意します。

新しくディレクトリを作成し、以下の3ファイルを作成します。

Dockerfile

FROM node:alpine

WORKDIR /opt/zenn

RUN apk add --no-cache git \
  && npm install -g zenn-cli

docker-compose.yaml

version: '3.8'

services:
  zenn:
    build: .
    working_dir: /opt/zenn
    volumes:
      - ./:/opt/zenn:delegated
    ports:
      - 8000:8000
    command: npx zenn preview

2. プロジェクトを作成

先程作成したdocker-compose を使用してコマンドを叩いていきます。

はじめにnpm の初期化を行います。

$ docker-compose run zenn npm init --yes
Creating zenn_zenn_run ... done
Wrote to /opt/zenn/package.json:

{
  "name": "zenn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次にzenn のプロジェクト作成を行います

$ docker-compose run zenn zenn init
Generating articles skipped.
Generating books skipped.
Generating .gitignore skipped.
Generating README.md skipped.

  🎉Done!
  早速コンテンツを作成しましょう

  👇新しい記事を作成する
  $ zenn new:article

  👇新しい本を作成する
  $ zenn new:book

  👇表示をプレビューする
  $ zenn preview

3. zennプレビューの表示

最後にdocker-composeを起動してzennのプレビューを確認します。

$ docker-compose up
Starting zenn_zenn_1  ... done
zenn_1   | 👀 Preview on http://localhost:8000

http://localhost:8000 へ接続し、以下の画面が表示されれば成功です。

Discussion