Zenn
💨

Zenn 記事の執筆環境を VSCode Remote Containers を使って構築する

2022/01/28に公開
VS Code
Zenn
devcontainer
remotecontainers
tech

やりたいこと

GitHub上で管理する Zenn 記事の執筆環境を VSCode Remote Containers で用意したい

実際にやったこと

ベースイメージ

github.com/microsoft/vscode-remote-try-nodeで使用している mcr.microsoft.com/devcontainers/javascript-nodeを参考に、mcr.microsoft.com/devcontainers/typescript-node使用することとした。

その際、以下の2点を考慮した。

  • Zenn CLI は Node.js で動作する
  • Zenn 記事を GitHub で管理する
    • Git とコミットの Push 等の Git リモートリポジトリの操作ための SSH クライアントが必要

このイメージは devcontainers 管理のイメージで、Development Containerとして使用するために必要十分な設定がされている。
採用したイメージは、nodeをベースイメージとし、開発で最低限必要なgitやopenssh-client等のパッケージはDev Container Featuresのcommon-utilsによって導入された状態で利用を開始できるのが良い。

Remote Containers 設定

以下のように設定した。

.devcontainer/devcontainer.json
{
  "name": "zenn-contents",
  "build": {
    "dockerfile": "Dockerfile",
    "cacheFrom": "ghcr.io/nmemoto/zenn-contents"
  },
  "customizations": {
    "vscode": {
        "extensions": [
            "GitHub.vscode-pull-request-github",
            "eamodio.gitlens"
        ]
    }
  },
  "portsAttributes": {
    "8000": {
      "label": "Zenn Preview",
      "onAutoForward": "openBrowser"
    }
  },
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {
        "version": "latest"
    }
  },
  "postStartCommand": "npm install",
  "remoteUser": "node"
}
Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:0-16-bullseye

postsAttributesはコンテナ内で起動するプレビューアプリケーションをホスト側で閲覧するためのデフォルトのポートフォワード設定で、npx zenn previewのデフォルトの起動ポートの8000を指定した。
"onAutoForward": "openBrowser"は、ポートフォワードされたタイミングでこのポートを使うアプリケーションをシステムのデフォルトブラウザで開くために設定した。

featuresは、2022年9月11日現在、Preview 機能であるDev container featuresのことを指しており、https://github.com/devcontainers/features に記載のあるツールについてはこの記法で該当ツールを導入できるようになる。
ここではgithub-cliを導入している。

postStartCommandではコンテナ起動後に実行されるコマンドを設定できる。
Zennのコンテンツを管理しているこのリポジトリでは、DependabotとGitHub Actionsが勝手にpackage.jsonをアップグレードしてマージしてくれるようにしている。
新しい記事を書くタイミングで最新のmainブランチからブランチを作成すれば、その次にコンテナ起動したタイミングでpostStartCommandで指定したnpm installが動作し、自然と最新のzenn-cliを使用できるようになる。
なお、DependabotとGitHub Actionsによる自動マージについてはGitHub ActionsでのDependabotの自動化に詳しく記載されていた。

devcontainer.jsonのそれぞれの設定の詳細については、devcontainer.jsonのリファレンスに記載がある。

まとめ

  • ベースイメージは、mcr.microsoft.com/devcontainers/typescript-node:0-16-bullseye を使うとよさげ。
  • .devcontainer/devcontainer.jsonのpostsAttributesを使用し、ポートフォワード時にブラウザでhttp://localhost:8000を開くようにする。
  • DependabotとGitHub Actionsにpackage.jsonの最新化の処理をさせ、マージさせる。postStartCommandを使用し、コンテナ起動時に毎回npm install`を実行させると、新しい記事を書くタイミングで最新のzenn-cliを使用することができる。
GitHubで編集を提案

Discussion