🐳

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

2022/09/28に公開約1,700字

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
  1. 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:
  1. 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"]
  1. 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"
    ]
  }
}
  1. お好きなコマンドプロンプトで、コマンドを叩きます。
    まず作業ディレクトリに移動します。  
    次に、docker-compose up -d

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

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

テスト編集

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

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

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

https://github.com/kazukim10/zenn

GitHubで編集を提案

Discussion

ログインするとコメントできます