エンジニアサマーインターンシップでGitHub Codespacesを使ってみた

こんにちは。kubell(旧 Chatwork)の工藤です。

kubellでは先日、エンジニアサマーインターンシップ2024を実施しました！

インターンシップの中では運営の用意したGitHubリポジトリを使って開発していただくシーンがあるのですが、その際の環境構築の方法として初めてGitHub Codespacesを採用してみました。

今回はその理由や使ってみた感想を書いていきたいと思います。

※ インターンシップの内容についても多少触れますが、来年以降も同じコンテンツを提供するとは確定していないのでご注意ください。

インターンシップにおける環境構築への悩み

kubellのインターンは講義パートと開発パートに分かれています。例年、大まかな流れとして講義パート中に環境構築・ハンズオンを行い、開発パートでそのリポジトリ上で開発をしていきます。

ここで毎年悩ましいのが「環境構築とそのサポート」です。多くの人が集まるインターンシップではローカル環境の多様さ・依存関係の管理・参加者のスキルレベルなど様々な要因が環境構築を難しくさせています。さらに2020年以降は講義パートについては全てオンラインで開催しており、インターン生の端末内の見たい情報についてこちらが声で指示する必要があるのも難しさを増大させています。

そんな環境構築の問題に対して、従来は以下のように対応してきました。合わせて感じた良い点悪い点も紹介します。

対応方法	金銭コスト	運用コスト	サポートのしやすさ
インターン生自身のPCで作業してもらう	○ 最も安くなる	○ 学生も返品作業などの手間が少ない	× 環境の違いが激しく、最も難しい
運営でPCをレンタルし、学生に送付	× 全員分を用意するとかなり高い	× 運営と学生でのやり取りの手間が増える	○ 統一された環境でサポートしやすい

どちらも一長一短で明確にこれが完璧だ！となる選択肢は見つかっていませんでした。

GitHub Codespaces の採用・準備まで

調査

そんな中で今年候補に上がってきたのが、GtiHub Codespaces です。3行で特徴を説明すると

クラウド上で開発環境を構築でき、使用した分だけの料金で済む！
ブラウザやローカルのVSCodeから接続できる！
構成ファイルから自動で環境構築が完了し、チーム全体で統一された開発環境を使うことができる！

といった感じです。まずはカタログスペックだけを見て、これは従来の対応方法の間に位置するちょうど良い候補なのではと考えました。

個人アカウントの使用であれば、毎月一定の無料枠があるので早速運営陣で試してみました。結果として、Codespaces環境下で課題用リポジトリの動作確認は難なくでき、料金の試算的にもPCをレンタルするより安くなりそうだったので採用することにしました。

(本当はもっと細かく検討してますが省略してます)

準備として運営がやったこと

Codespacesでインターン生にやってもらうにあたって運営が行なった作業は以下の通りです。

Codespacesの有効化
- GitHub Organization下ではCodespacesの無料枠は存在せず、機能を有効化するには管理者クラスの権限が必要です。
- そのため、弊社のGitHubの管理部署とやりとりを行い、有効化してもらいました。
リポジトリの準備
- 課題用リポジトリに .devcontainer/devcontainer.json を作成し、ベースとなるイメージや必要なアプリケーションの設定を書き込みました。
- 以下は実際に書いた設定ファイルです。

{
  "name": "chatwork internship-2024 devcontainer",
  "image": "mcr.microsoft.com/devcontainers/base:jammy",
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/node:1": {}
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "GitHub.codespaces"
      ]
    }
  },
  "onCreateCommand": "pnpm install && pnpm generate:all && pnpm docker:build-backend",
  "postCreateCommand": "docker-compose -f ./tools/docker-compose/docker-compose-databases.yml pull && npm install -g concurrently"
}

Codespaces上での開発方法説明
- Codespacesで開発していく上での手順をドキュメントにまとめました。

実際に使ってみて

準備を整え、インターン生を迎え、計4週間使い倒してきました。(正確には2週間×2ターム)

感想を一言で言うと「採用してよかった！」です。ただ、もちろん不便な点もあったので分けて述べていきたいと思います。

よかった点

環境構築が圧倒的に楽
- 従来だとBEとFEの環境構築用の講義時間を2枠取っていたのが解放できました。
- オンライン上でのサポートでも、ほぼつまずきなくできました。
成果物の共有が楽
- ポートフォワーディング + ポート公開範囲の変更機能により、インターン生のローカルで動いているものをチームや運営に簡単に共有できました。
- 中間レビューのような場面でレビュアーが実際に触れるのは良い体験でした。
料金が圧倒的に安い
- レンタルPCを学生に送付する場合、少しスペックを妥協しても約40万の見積もりでした。
- Codespacesはインターンシップ終了後に計算したところ 約1万5000円 となりました。
- 30万以上の節約となりました！
最悪 Dev Container で操作してもらうこともできる
- ネットワークやCodespacesが不調でも、最悪ローカル上にDev Contaierで起動可能です。
- ただし、Dockerのインストールなど一定のサポートは必要だと思います。

不便だった点

Codespacesの管理がメンバー権限では手間が増える
- (弊社の場合は)有効化も無効化も料金管理も管理部署とのやりとりが必要でした。
- インターン生が想定外に大きなコア数で開発などをしていても気づきづらいという難しさもあります。
Codespacesの不調についてはサポートしづらい
- 期間中何度かインターン生からCodespacesが不調な旨を訴えられましたが、こちらではできることも少なく、Codespacesの完全な再構築やPCの再起動を試すしかありませんでした。