Zenn
🎃

Zennの執筆環境を構築する（DevContainer + WSL2 + Docker）

2024/01/16に公開
Docker
VS Code
Zenn
WSL 2
devcontainer
idea

はじめに

どうも、しがないエンジニアです。
2024年、新たな挑戦としてアウトプットすることを目標にZennに登録してみました。
ZennではGitHubでコンテンツの管理ができるということで自分のPCの環境を整えてみました。
試しにその環境構築の流れを覚書として記事にしてみます。
拙い部分も多々ありますが、ご了承ください。

ゴール

構築環境

  • Windows10
  • VS Code (DevContainer)
  • WSL2（Ubuntu）
  • Docker

Zenn執筆環境用GitHubリポジトリ

https://github.com/mknsk0309/zenn-public
最終的なフォルダ構成は以下のようになりました。

フォルダ構成
zenn-public
├─ .git
├─ .devcontainer
│  ├─ devcontainer.json
│  └─ Dockerfile
├─ articles
│  └─ .keep
├─ books
│  └─ .keep
├─ .gitignore
└─ README.md

事前準備

まずは事前準備として、WSLの構築とGitHubの準備をしておきます。

WSL2/DevContainerの構築

WSL上でDevContainerの環境を構築する際は以下の記事を参考にさせていただきました。
「DevContainerの初期化」以降の章は後ほどZenn執筆環境の構築内で行うので、省略可能です。
https://zenn.dev/ykdev/articles/14a108290e24f9

Gitの準備

続いて、Git環境の準備を行います。
上記で作成したコンテナはまだ起動せず、WSL上で操作していきます。

Gitのアップデート

まずはWSL上のGitを最新版にアップデートしておきます。

WSL(Ubuntu)
sudo apt-get install git

Gitの環境設定

アップデートが完了したらGitの環境設定をしていきます。

WSL(Ubuntu)
# コミット時のユーザ名、メールアドレスの設定
git config --global user.name {GitHubのユーザ名}
git config --global user.email {GitHubに登録したメールアドレス}

# デフォルトのエディタをVSCodeに設定
git config --global core.editor "code --wait"

設定が完了したら以下のコマンドを実行し、設定した内容が正しく表示されているか確認します。

WSL(Ubuntu)
git config --list

SSHキーの作成

GitHubのリモートリポジトリにアクセスするためのSSH認証設定を行います。

まずはSSHキーを作成します。ホームディレクトリで以下のコマンドを実行してください。
画面に表示された内容に従って、キーの生成を進めます。

WSL(Ubuntu)
ssh-keygen -t ed25519 -C "{GitHubに登録したメールアドレス}"

GitHubに公開鍵を登録

次のページにしたがって、GitHubアカウントに先ほど作成したSSHキーを追加します。
https://docs.github.com/ja/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

GitHubへの接続確認

以下のコマンドを実行し、GitHubへの接続確認を行ってみます。

WSL(Ubuntu)
ssh -T git@github.com

以下のメッセージが出力されれば接続に成功です。

Hi {GitHubのアカウント名}! You've successfully authenticated, but GitHub does not provide shell access.

Zenn執筆環境の構築

それではいよいよ、Zennの執筆環境を構築していきます。

GitHubリポジトリの作成とZenn連携

以下の記事に従って、Zenn用のGitHubリポジトリとZennへの連携を行います。
https://zenn.dev/zenn/articles/connect-to-github

WSLへリポジトリのクローン

WSLのターミナルから、リポジトリをクローンしたい場所に移動して以下のコマンドを実行します。

WSL(Ubuntu)
git clone git@github.com:{GitHubユーザ名}/{リポジトリ名}.git

リポジトリ内の準備

クローンが完了したらディレクトリを移動してVSCodeで開いておきます。

WSL(Ubuntu)
# ディレクトリの移動
cd ./{リポジトリ名}
# 現在のディレクトリをVSCodeで開く
code

devcontainer用のフォルダを作成

リポジトリ内にdevcontainer用のフォルダ(.devcontainer)を作成し、以下のファイルを作成しておきます。

  • Dockerfile
  • devcontainer.json
フォルダ構成
.
├─ .devcontainer
│  ├─ devcontainer.json
│  └─ Dockerfile

実際に作成したDevContainerの設定ファイルとDockerfileは以下の通りです。

.devcontainer/Dockerfile
FROM node:alpine

RUN apk -no-catche add git \
  && yarn global add zenn-cli

USER node
Dockerfileの設定ポイント
  1. コンテナのベースイメージにはalpineを使用しています。
  2. 初期構築時にGitとZennCLIをインストールします。
.devcontainer/devcontainer.json
{
  "name": "Zenn",
  "build": {
    "context": "..",
    "dockerfile": "Dockerfile"
  },
  "mounts": [
    "source=${localEnv:HOME}${localEnv:USERPROFILE}/.gitconfig,target=/home/node/.gitconfig,type=bind"
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        "yzhang.markdown-all-in-one",
        "negokaz.zenn-editor"
      ]
    }
  }
}
devcontainer.jsonの設定ポイント
  1. Gitの設定を共有できるよう、WSL上の.gitconfigをマウントしています。
  2. 拡張機能として、以下を初期インストールしています。

DevContainerの起動

これでDevContainerの準備ができました。DevContainerを起動しましょう。

  • VSCodeから Ctrl + P でコマンドパレットを開く
  • >Dev Containers Open Folder in Container を選択し、リポジトリフォルダを選択

VSCode左下の緑のマークが 開発コンテナー：XXXX となっていれば、作成されたコンテナに接続した状態となっています。

ZennCLIの初期設定

DevContainerの起動と接続が完了したら、以下のコマンドでZenn CLIの初期化を行います。

zenn init

コマンドを実行すると、以下のディレクトリとファイルが作成されます。

  • articles
  • books
  • .gitignore
  • README.md

これで執筆環境の準備が完了しました！
一度、現在の状態をGitにコミット／プッシュしておきましょう。

Zenn CLIの使い方については以下を参考にしてください。
https://zenn.dev/zenn/articles/zenn-cli-guide

まとめ

私自身、初めてZennCliを使用して記事を作成してみました。
使い勝手についてはまだまだ改善の余地があり、今後さらに使いやすくしていく所存です。
今後もたくさん記事を書いて、記事を充実させていければと思います。

GitHubで編集を提案

Discussion