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

公開:2020/10/18
更新:2020/10/18
3 min読了の目安(約3400字TECH技術記事

使おうと思った経緯

Twitter

こちらのツイートを見て、ちょっと使ってみようともいました

環境構築

あまり自分のPCにあれこれ入れるのが嫌なので、なにかやるときはContainer作るようにしてます。
なので今回も執筆用にContainer用意しました。

リモートリポジトリ作成

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

ディレクトリ構成

作成したContainerはVSCodeのRemoteContainerで使用するので、以下のようなディレクトリ構成になっています。

  • 単一Containerですが、docker-composeから起動するため(個人的な理由)
|--.devcontainer
|  |--devcontainer.env
|  |--devcontainer.json
|  |--docker-compose.yml
|  |--node
|  |  |--Dockerfile
|  |--ssh
|     |--config
|     |--github
|     |--github.pub
|     |--known_hosts
|---gitignore

Dockerfileの作成

nodejsベースで環境を作りました。

  • rootではなく、ユーザーを作成して利用
  • zenn-clinpxを使わずに使用できるようにする
  • 編集は常にContainer内で行うため、最後にGithubからリポジトリをCloneするようにする
  • sshのキーはContainer内で作らず、ホスト側で作ったキーをCOPYします。
Dockerfile
FROM node:12.18.2-alpine3.12

ARG USER_NAME
ARG GROUP_NAME
ARG USER_UID
ARG USER_GID

RUN deluser --remove-home node \
    && addgroup -g $USER_GID -S $GROUP_NAME \
    && adduser -u $USER_UID -s /bin/sh -S $USER_NAME $GROUP_NAM
RUN apk --update --no-cache add git curl bash sudo openssh-client

COPY --chown=${GROUP_NAME}:${USER_NAME} ./ssh /home/${USER_NAME}/.ssh

RUN npm install -g zenn-cli@latest

RUN mkdir /home/$USER_NAME/contents \
    && chown -R ${GROUP_NAME}:${USER_NAME} /home/$USER_NAME/contents

USER $USER_NAME
WORKDIR /home/$USER_NAME/contents
RUN git clone git@github.com:**<githubのID>**/zenn-content.git /home/$USER_NAME/contents

docker-compose.ymlの作成

今回は特に同時起動するContainerはないですが、僕の場合は単一Containerでもcomposeから起動してます。
ここは個人的にそうしているだけなので必須事項ではないです
Dockerfileから立ち上げたい方はそれで問題ありません。
volumes:VSNoteを使っているため、Host側とバインドしているだけなので使わない場合は不要です。

docker-compose.yml
version: '3.2'
services:
  node:
    build:
      context: .
      dockerfile: ./node/Dockerfile
      args:
        USER_NAME: zenn_writer
        GROUP_NAME: zenn_writer
        USER_UID: 1000
        USER_GID: 1000
    env_file: devcontainer.env
    environment:
      - TZ=JST-9
    volumes:
      - ../../../../notes:/home/zenn_writer/notes:cached
    command: /bin/sh -c "while sleep 1000; do :; done"

devcontainer.jsonの設定

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

devcontainer.json
{
  "name": "Existing Docker Compose (Extend)",
  "dockerComposeFile": "./docker-compose.yml",
  "service": "node",
  "workspaceFolder": "/home/zenn_writer/contens",
  "settings": {
    "terminal.integrated.shell.linux": null
  },
  "extensions": [
    "vscodevim.vim",
    "formulahendry.auto-rename-tag",
    "mhutchie.git-graph",
    "vscode-icons-team.vscode-icons",
    "eamodio.gitlens",
    "yzhang.markdown-all-in-one",
    "davidanson.vscode-markdownlint",
    "oderwat.indent-rainbow",
    "esbenp.prettier-vscode",
    "tabnine.tabnine-vscode",
    "patricklee.vsnotes"
  ],
  "remoteUser": "zenn_writer"
}

Github連携

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

記事作成

初期設定

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

zenn init

新規記事作成

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

zenn new:article

ローカル環境での確認

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

zenn

まとめ

とりあえずこんな感じでまとめました。
VSNoteを使ってメモを取っているため、記事もVSCodeから書けるのは結構嬉しいです。
それにGithubにPush後から記事の更新までが思ったより早いので細かい修正も気兼ねなくできるのがありがたいですね。

Qiitaとの差異としてはそんなかんじで、あとは画像添付をQiitaなみに簡単にするにはどうしたもんかなぁって感じです。