🐳

GitHub Codespacesのススメ (講師向け)

に公開
Docker
VS Code
Codespaces
dev container
tech

講師向けTL;DR

  • 本記事はGithubCodespaceの使用に必要なdevcontainer.jsonの基本的な書き方をまとめました。
  • 決めるのは3つだけ（OS base image／feature／その他スクリプトの実行タイミング）。
  • まずは下の完成品をコピペ → Codespaces 作成 → sui --version 確認。
  • 備考: 本テンプレは sui_codespace_starterの .devcontainer を簡約・注釈化したものです。

完成品：最小テンプレ（コピペでOK）

.devcontainer/devcontainer.json
{
  // Sui dev container (no Prebuild). Installs via suiup.
  // 名前はUI表示やログ識別に使われます
  "name": "Sui Starter",

  // 言語入りの公式イメージ（Node 22, Debian bookworm）。OS/言語はピン留めで再現性担保
  "image": "mcr.microsoft.com/devcontainers/typescript-node:22-bookworm",

  // よく使う共通ツールは Features で追加（イメージに含まれないものだけを積むのが基本）
  "features": {
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },

  "customizations": {
    "vscode": {
      // VScode拡張機能の`識別子`を指定する
      "extensions": [
        "Mysten.move"
      ]
    }
  },

  // 初回作成時: suiup + Sui CLI(testnet) を導入
  // 重い処理は onCreateCommand に寄せる（Create フェーズで1回だけ実行）
  // featuresに無いものはスクリプト実行で導入する  
  "onCreateCommand": "bash .devcontainer/setup.sh",

  // 起動毎: testnet を最新化（失敗は許容）。失敗許容はスクリプト側で || true などで処理
  "postStartCommand": "bash .devcontainer/update-on-start.sh",

  // ~/.local/bin を先頭に追加して優先解決
  // （注: 下記の例は末尾追加。先頭にするには
  //   "${containerEnv:HOME}/.local/bin:${containerEnv:PATH}" を使用）
  "remoteEnv": {
    "PATH": "${containerEnv:PATH}:${containerEnv:HOME}/.local/bin"
  },

  // フロントエンド開発の目印ポート（任意）
  "forwardPorts": [3000],
  "portsAttributes": {
    "3000": { "label": "Web (Next.js)" }
  }
}

image

  • ミニマル: mcr.microsoft.com/devcontainers/base:ubuntu など
  • すぐ実行: mcr.microsoft.com/devcontainers/typescript-node:22-bookworm など言語入り
  • 一覧/タグの確認先: devcontainers/images

feature

  • 概要: features は共通ツールを追加する拡張。例: Git/GitHub CLI、Docker CLI など。
  • 本テンプレ: git:1 と github-cli:1 を採用（言語入りイメージなので Node の追加は不要）。
  • 適用の指針:
    • 言語は言語入りイメージを優先。ミニマル base:* を選ぶときのみ言語 Feature を追加。
    • Alpine 系は非対応の Feature があるため Debian/Ubuntu 系を推奨。
  • 一覧/使い方の確認先: devcontainers/features または 公式カタログ

よく使うフック

  • onCreateCommand
    • 初回作成時に実行。重い初期セットアップ向け（CLI/SDKの導入、キャッシュ作成など）。
  • postCreateCommand
    • 作成直後に実行。ワークスペースを前提とした処理（例: npm ci, DB 初期化）。onCreateCommand と役割が重ならないよう整理。
  • postStartCommand
    • 起動のたびに実行。軽い更新や同期（例: CLI の update）。失敗は許容設計に。
  • postAttachCommand
    • VS Code がアタッチしたときに実行。UI 連動の準備（タスク起動、メッセージ表示など）。
  • updateContentCommand
    • git pull などコンテンツ更新時に実行。コード生成や依存再取得に便利。

詳細はJSON リファレンスを参照。

関連リンク（公式のみ）

Discussion