🖋

GitHub CodespacesでZennの執筆環境を構築する

2023/01/21に公開

VS Code

2023年1月21日に開催された「VS Code Conference JP 2022 - 2023」にオンライン参加しました！この中でDev ContainersとGitHub Codespacesの便利さについて何度か紹介されており、自分の環境でも試してみたくなりました。

そこで今回は、ローカルPCで構築していたZennの執筆環境を、GitHub Codespaces上に構築してみました。思っていたより簡単に構築できたので、この記事では実行手順をメモしておきたいと思います。

※ この記事もGitHub CodespacesのVS Codeで執筆しています。作成したリポジトリはこちらです。

https://github.com/tanny-pm/zenn-docs

ローカルでのZenn執筆環境の構築について

まず、ローカルでZennの執筆環境を構築する手順について記載しておきます。ZennはローカルのテキストエディタとZenn CLIを利用して執筆することができ、以下のような手順で環境を構築します。（手順3,4,5はVS Codeを使う場合のオプションです。）

Node jsをインストールする。
npmでZenn CLIをインストールする。
VS Codeの拡張機能をインストールする。
VS Codeの設定を変更する。
PrettierでMarkdownをフォーマットしたときに、英語と日本語の間にスペースが入る問題を解決する。（参考）
GitHubリポジトリとZennを連携する。

※ VS CodeとGitのインストールは事前に完了している前提です。

今回は、この環境をDockerコンテナ上に構築し、GitHub Codespacesで実行することで、他のPCからもこの環境を気軽に利用できるようにします。

前提

この記事では、ローカルPCが以下のような状態になっていることを前提としています。

すでにローカルPCでZennの執筆環境を構築している。
ローカルPCにDocker Desktopをインストールしている。
VS CodeにDev Containersの拡張機能をインストールしている。

ただし、他のユーザーが作成したコンテナの設定をそのまま利用する場合は、これらの準備は不要です。（GitHubのWEBページからCodespacesの環境を立ち上げるだけで、ブラウザ上でVS Codeが起動します。）

GitHub Codespacesについて

GitHub Codespacesは、GitHubのクラウド上でホストされている開発環境です。今回は、CodespaceのコンテナにZennの執筆環境を構築し、そこにVS Codeからアクセスします。これにより、いつでも、どこでも同じ執筆環境にアクセスできます。

GitHub Codespacesのイメージ。Codespace側にZennの執筆環境を構築し、ブラウザまたはローカルPCのVS Codeからアクセスする。

VS Code Conferenceでの紹介内容が非常に分かりやすかったので、詳細はこちらを参照してください。登壇資料を閲覧できます。

Dev Containersの設定

まず、ローカルPCのVS CodeでDev Containersの設定を行います。手慣れている人であればdevcontainer.jsonに設定を記載するだけで良いかもしれません。今回は、はじめての作業だったのでVS Codeの画面をポチポチしながら設定を進めました。

コンテナを起動する

まずはローカルPCで、Zenn実行環境となるコンテナを起動します。

Zennの記事を管理しているリポジトリを開きます。F1キーでコマンドパレットを開き、「Open Folder in Container...」を選択します。

container
コンテナ設定画面を開く

次に、利用するコンテナイメージを選びます。今回は「Node.js & JavaScript」を利用しました。
node
利用するコンテナを選択する

この後は「OK」を選択して先に進みます。そのあとコンテナが起動し、VS Codeが接続されます。（2,3分ほどかかりました。）

このとき、.devcontainer/devcontainer.jsonが自動的に作成されています。このファイルを編集し、Zennの執筆のための設定を行います。

Zenn CLIをインストールする

ここからはコンテナの設定を行います。まずはZenn CLIをインストールする設定を追加します。すでにpackage.jsonがリポジトリに存在するので、これを利用することにしました。ここではZenn CLIの他にフォーマッターのprettierもインストールします。

package.json

{
  "name": "zenn-docs",
  "version": "1.0.0",
  "description": "* [📘 How to use](https://zenn.dev/zenn/articles/zenn-cli-guide)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tanny-pm/zenn-docs.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/tanny-pm/zenn-docs/issues"
  },
  "homepage": "https://github.com/tanny-pm/zenn-docs#readme",
  "dependencies": {
    "zenn-cli": "^0.1.137"
  },
  "devDependencies": {
    "prettier": "2.8.2",
    "prettier-plugin-md-nocjsp": "^1.5.0"
  }
}

コンテナの起動後にnpm installを実行すれば、上記の内容にしたがってパッケージをインストールできます。devcontainer.jsonの"postCreateCommand"に、以下の設定を追加します。

.devcontainer/devcontainer.json

{
  "name": "Zenn",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "postCreateCommand": "npm install", //追加
}

これで、コンテナ起動後にZenn CLIとPrettierをインストールできます。コンテナを再起動すると、インストールされていることが確認できました。（コマンドパレットからRebuild Containerを実行すれば再起動します。）

@tanny-pm ➜ /workspaces/zenn-docs (main) $ npm list
zenn-docs@1.0.0 /workspaces/zenn-docs
├── prettier-plugin-md-nocjsp@1.5.0
├── prettier@2.8.2
└── zenn-cli@0.1.137

VS Code 拡張機能を追加する

次に、この環境で利用する拡張機能のインストール設定を追記します。

拡張機能の詳細ページを開き、設定ボタンから「Add to devcontainer.json」選ぶと、devcontainer.jsonに拡張機能の名称が追記されます。直接記載しても良いですが、個人的にはこの方法がお手軽だと感じました。
store

最終的な設定は以下のようになります。もう一度コンテナを再起動すると、拡張機能がインストールされます。

.devcontainer/devcontainer.json

{
  "name": "Zenn",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18-bullseye",
  "postCreateCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": [
        "negokaz.zenn-editor",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "yzhang.markdown-all-in-one",
        "ICS.japanese-proofreading",
        "kisstkondoros.vscode-gutter-preview"
      ]
    }
  }
}

VS Codeの設定を追加する

最後に、ワークスペース固有のVS Codeの設定を追加します。コマンドパレットから「Open Workspace Settings (JSON)」を実行し、開いたJSONファイルに設定を記載します。ここに書いた設定がもっとも優先されます。コンテナの設定に追記する方法もあるようですが、優先度は1つ低いようです。

.vscode/settings.json

{
  "workbench.colorTheme": "Visual Studio Light", // Zennのデザインに合わせて白背景に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "japanese-proofreading.textlint.外来語カタカナ表記": false //「コンテナ」がエラーになったので、今回追記
}

これで設定は完了です。この時点で、このリポジトリをDev Containerで実行すれば、設定したZenn執筆環境を利用できるようになっています。.devcontainerと.vscodeの設定だけで、どこでも同じ環境を再現できるのはお手軽ですね！

更新した内容はGitHubにPushしておきます。

GitHub Codespacesの起動

GitHubのリポジトリにアクセスして、GitHub Codespacesを起動します。

「Code」ボタンから「Codespaces」タブを選んで起動するだけでOKです！.devcontainerの設定にしたがってコンテナが起動し、ブラウザかローカルPCのVS Codeが起動します。
git
Codespaceを起動する

あとはいつも通り記事を執筆して、完成したらCommitしてPushするだけです。.devcontainerが作成されていれば、追加の設定なしでGitHub Codespacesが利用できてしまうのはとてもお手軽だと感じました！

ちなみに、Zenn CLIに搭載されているプレビュー機能も問題なく利用できます。以下の画面ではVS Code上で開いていますが、localhostにも転送してくれるので、ローカルのブラウザでも開けます。

ローカルPCのVS Codeで実行した結果

まとめ

今回は以下のような手順で、既存のZenn執筆用のリポジトリをGitHub Codespacesで実行できるように設定しました。

リポジトリをローカルのVS Codeで開く。
テンプレートからコンテナを選んで起動する。
npmでZenn CLIをインストールする。
VS Codeの拡張機能を追加する。
VS Codeのプロジェクト固有設定を追加する。
追加したファイルをGitHubにPushして、Codespacesを起動する。

Dev ContainersとGitHub Codespasesを利用するためには、いろいろな設定を1から記述しなければならないイメージがありました。しかし今回は、VS CodeのGUIを上手く利用しながら、簡単に設定を作成できました！（Dockerの基礎知識はあった方が良いと思います。公式チュートリアルを実施できるくらい。）

複数人で開発しているプロジェクトの場合はとくに、開発環境をコンテナ化することの恩恵は大きいと思います。今後も積極的に利用したいですね。

参考文献

GitHubで編集を提案