Zennの執筆環境をVSCode + Dockerで作ってみた

以前書いて公開していたのですが、閉じたままにしていたので再公開します。
devcontainerのコードも最新になってます！

環境構築

あまり自分のPCにあれこれ入れるのが嫌なので、何かやりたいときはgitの管理単位でdevcontainerを作っています。
なので今回もZenn執筆用にContainer用意しました。

リモートリポジトリ作成

Githubにzenn-contentでPrivateRepositoryを作りました。

ディレクトリ構成

作成したContainerはVSCodeのdevcontainerで使用するので、以下のようなディレクトリ構成になっています。
devcontainerと記事や本を1つのリポジトリで保存するようにしています。

• 単一Containerですが、docker-composeから起動するためです。（個人的な理由）
• .extendionsはDLしたVSCode拡張をコンテナ起動時に再ダウンロードしなくてよいようにするためです。
• articlesとbooksはzenn cliで記事作成時や本作成時に出来るディレクトリです。

|--.devcontainer
|  |--.extendions
|  |--ubuntu
|  |  |--Dockerfile
|  |--.env
|  |--devcontainer.json
|  |--docker-compose.yml
|---articles
|---books
|---gitignore

Dockerfileの作成

• DockerのベースコンテナはUbuntuで作りました。
• rootユーザーではなく、別でユーザーを作成してコンテナ内での操作をします。
• zenn-cliをnpxを使わずに使用できるようにしてます。

Dockerfile

FROM ubuntu:20.04

ARG USER_ID
ARG USER_NAME
ARG GROUP_ID
ARG GROUP_NAME
ARG WORK_DIR

# 証明書のDL
RUN set -x \
    && apt-get update \
    && apt-get install -y --no-install-recommends \
        ca-certificates \
    && apt-get clean && rm -rf /var/cache/apt/archives/* /var/lib/apt/lists/*
# Set TimeZone
RUN set -x \
    && apt-get update \
    && apt-get install -y --no-install-recommends \
        tzdata \
    && apt-get clean && rm -rf /var/cache/apt/archives/* /var/lib/apt/lists/* \
    && ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && echo 'Asia/Tokyo' >/etc/timezone

# Install sudo, curl
RUN set -x \
    && apt-get -y update \
    && apt-get install -y --no-install-recommends \
    sudo \
    curl \
    && apt-get clean && rm -rf /var/cache/apt/archives/* /var/lib/apt/lists/*

# create group
RUN set -x \
    && groupadd --gid ${GROUP_ID} ${GROUP_NAME}

# create vscode user
RUN set - x \
    && echo "$USER_NAME ALL=(ALL) NOPASSWD: ALL" >> /etc/sudoers.d/${USER_NAME} \
    && chmod 0440 /etc/sudoers.d/${USER_NAME} \
    && useradd \
        --uid ${USER_ID} \
        --gid ${GROUP_ID} \
        --home-dir /home/${USER_NAME} \
        --create-home \
        --shell /bin/bash \
        ${USER_NAME}

# vscode extensions cache (extensionsの再インストールを防ぐ)
# https://code.visualstudio.com/docs/remote/containers-advanced#_avoiding-extension-reinstalls-on-container-rebuild
RUN set -x \
    && mkdir -p /home/${USER_NAME}/.vscode-server/extensions \
    && chown -R ${GROUP_NAME}:${USER_NAME} /home/${USER_NAME}/.vscode-server

# node18 install
RUN set -x \
    && apt-get -y update \
    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
    && apt-get install -y --no-install-recommends \
    nodejs \
    && apt-get clean && rm -rf /var/cache/apt/archives/* /var/lib/apt/lists/*

# install yarn
RUN npm install -g yarn

# install Zenn-cli
RUN set -x \
    && yarn global add \
    zenn-cli

USER ${USER_NAME}

# create workingirectory
RUN set -x \
    && mkdir /home/${USER_NAME}/${WORK_DIR}
WORKDIR /home/${USER_NAME}/${WORK_DIR}

docker-compose.ymlの作成

今回は特に同時起動するContainerはないですが、僕の場合は単一Containerでもcomposeから起動してます。
ここは個人的にそうしているだけなので必須事項ではないです。
Dockerfileから立ち上げたい方はそれで問題ありません。

• ホストのvolumeマウントはdocker-compose.ymlに書いてます。

docker-compose.yml

version: "3.4"
services:
  zenn_cli_on_nodejs:
    container_name: $CONTAINER_NAME
    # ホスト名を明示的に指定する
    hostname: localhost
    init: true
    build:
      context: .
      dockerfile: ./ubuntu/Dockerfile
      args:
        USER_ID: 1000
        USER_NAME: $USER_NAME
        GROUP_ID: 1000
        GROUP_NAME: $USER_NAME
        WORK_DIR: develop
    environment:
      - TZ=JST-9
    ports:
      - 8000:8000
    volumes:
      # ソースコードとdevcontainerを一緒に管理する場合は明示的にマウント先を指定
      - ..:$HOME_DIR/develop:cached
      # ホストの.extensionsディレクトリをマウントしてコンテナのVSCode拡張のダウンロード先に指定
      - .extensions:$HOME_DIR/.vscode-server/extensions
    command: sleep infinity

devcontainer.jsonの設定

VSCode側の設定なので本質ではないですが、devcontainer.jsonもおいておきます。
Plaginの設定は各自でお願いします

devcontainer.json

{
  "name": "Zenn CLI on VSCode",
  "dockerComposeFile": "./docker-compose.yml",
  "service": "zenn_cli_on_nodejs",
  // workspaceを明示的に指定
  "workspaceFolder": "/home/vscode/develop",
  // remotecontainer内でのextension
  "extensions": [
    "vscodevim.vim",                          // Vim
    "formulahendry.auto-rename-tag",          // Auto Rename Tag
    "mhutchie.git-graph",                     // Git Graph
    "pkief.material-icon-theme",              // Material Icon Thema
    "vector-of-bool.gitflow",                 // gitflow
    "oderwat.indent-rainbow",                 // indent-rainbow
    "streetsidesoftware.code-spell-checker",  // Code Spell Checker
    "EditorConfig.EditorConfig",              // EditorConfig for VS Code
    "negokaz.zenn-editor"                     // Zenn Editor
  ],
  "remoteUser": "vscode",
  "features": {
    // devcontainerの拡張でgitを追加
    // https://github.com/devcontainers/features/tree/main/src/git
    "ghcr.io/devcontainers/features/git:1": {}
  }
}

Github連携

こちらに詳しく書いてあるので割愛します

記事作成

初期設定

一番最初だけ以下のコマンドを実行します。

zenn init

新規記事作成

新しい記事を作る時には以下のコマンドを実行します。

zenn new:article

ローカル環境での確認

ローカル環境で確認したい場合は以下のコマンドを実行します。
ローカル環境のURLはhttp://localhost:8000/になります

zenn

まとめ

とりあえずこんな感じでまとめました。
前回公開時からかなり時間が経っているのと、devcontainer周りも色々変えているのでまた変わったら更新します。