ローカル環境をあまり汚したくないので、zenn-cliをdocker上で構築する

dockerを使ってzenn_cliを簡単に使用できるようにする

なぜ？わざわざdockerを使って構築するのか？

zenn-cliを導入する一番のモチベーションは、プレビューを見ながら執筆したい。　　
になると思います。

tech記事が集まるzennにあって、需要は少ない気がしますが、
zenn-cliをローカル環境に導入したいけど、ローカル環境を極力汚したくないので
PC内を綺麗に保てている（気がする）dockerを使って構築してみました。

やること

1. ローカル環境に、お好きな名前で作業ディレクトリを作成します。
2. ディレクトリ以下の構成は下のようになります

sample_dir(お好きな名前で)
  |- articles
  |- books
  |- images
  |- zenn
      |- Dockerfile
      |- package.json
  |- docker-compose.yml

3. docker-compose.yml内を編集します。

docker-compose.yml

version: "3.9"
services:
  zenn:
    container_name: zenn
    restart: always
    build:
      context: zenn
    volumes:
      - ./articles:/zenn/articles
      - ./books:/zenn/books
      - ./images:/zenn/images
      - zenn_node_modules:/zenn/node_modules
    ports:
      - 8000:8000

volumes:
  zenn_node_modules:

4. Dockerfileを編集します

Dockerfile

FROM node:lts-buster

# Create app directory
WORKDIR /zenn

COPY package*.json /zenn
RUN npm install zenn-cli@latest

CMD ["npx", "zenn", "preview"]

5. package.jsonを編集します

package.json

{
  "name": "zenn",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "zenn-cli": "^0.1.128"
    
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

6. お好きなコマンドプロンプトで、コマンドを叩きます。
   まず作業ディレクトリに移動します。　　
   次に、docker-compose up -d

7. dockerイメージが作成され、コンテナが立ち上がればOKです。

8. Zennのプレビュー画面が確認できます。
   今回は、localhost:8000に移動すると確認ができると思います。

テスト編集

画像の挿入テストも問題無くできました。

編集が済んだら、githubのレポジトリにpushをしてデプロイすれば、公開できます。

以上になります。
ここまで読んでいただきありがとうございます！

https://github.com/kazukim10/zenn