Zenn執筆環境をDockerとVSCodeで用意する

はじめに

ZennのCLIを利用するにはnode環境が必要です。
ローカル環境を汚したくないのでDocker上でZennの執筆を行えるようにしました。

GitHubとZennの連携

最初に以下に従ってGitHubでZennのコンテンツを管理できるようにします。

• GitHubリポジトリでZennのコンテンツを管理する

Dockerfileとdocker-compose.ymlの作成

以下のDockerfileとdocker-compose.ymlを好きなディレクトリ内に作成し、Dockerコンテナを立ち上げます。

Dockerfile

FROM node:14

WORKDIR /zenn-content

RUN apt -y update && apt install git -y && \
  npm init --yes && \
  npm install zenn-cli@latest && \
  npx zenn init

docker-compose.yml

version: '3.5'

services:
  zenn:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - '8000:8000'
    working_dir: '/zenn-content'
    command: npx zenn preview

これでlocalhost:8000でプレビューを確認できます。

VSCodeで接続し記事を執筆する

VSCodeに「Remote - Containers」拡張機能を入れます。

• Remote - Containers - Visual Studio Marketplace

拡張機能を使い、Dockerfileのあるディレクトリにdevcontainer.jsonを生成しました。
この拡張機能を使うとVSCodeからローカル環境で開発するのと同じ様にコンテナ内のファイルを編集できます。

VSCodeのターミナルを開くことでコンテナ内でコマンドの実行もできます。
次のようにzennのコマンドを実行して記事を作成します。

$ npx zenn new:article --slug 記事のスラッグ

GitHubにアップロードする

記事を執筆したらターミナルからgitを叩いて記事をGitHubにアップロードします。

終わりに

これでローカル環境を汚さずコンテナに引きこもってZennの記事を執筆できるようになりました。