GitHub Codespacesを使って、GitHubリポジトリ上にWebベースのVSCode環境を用意してみた
2025.05.08Webベースの統合開発環境でGitHubリポジトリを管理したい
おのやんです。
みなさん、Webブラウザ経由でGitHubリポジトリを管理したいと思ったことはありませんか？私はあります。
GitHubには、Codespacesという機能があります。これを使うことで、GitHubリポジトリを統合開発環境で開いた状態で、GitHub上の計算資源で動かすことができます。
今回、こちらのGitHub Codespacesを試す機会がありましたので、Codespaces作成から停止まで、一連の流れをまとめたいと思います。
GitHub Codespacesの料金
GitHub Codespacesの料金は、「1か月あたりのストレージ」と「1か月あたりのコア時間」で決まります。詳細はこちらで確認できます。
1か月あたりのストレージ
GitHub Codespacesでは、Codespaceに置くコードやファイルサイズによって料金が計算されます。ストレージを測る単位として、ドキュメントでは「GB/月」という単位が設定されています。具体的には、「どんなサイズのファイルをどのくらいの期間Codespaceに保存していたか」を示す指標になります。
具体的な料金計算はドキュメントでは明示されておらず、こちらのページで試算できます。
1か月あたりのコア時間
GitHub Codespacesでは、使用できるマシンタイプを選ぶことができます。基本的なマシンタイプは次の通りです。
| マシンの種類 | 計算単位 | 消費量を計算する時の係数 | 価格 |
|---|---|---|---|
| 2 コア | 1 時間 | 2 | $0.18 |
| 4 コア | 1 時間 | 4 | $0.36 |
| 8 コア | 1 時間 | 8 | $0.72 |
| 16コア | 1 時間 | 16 | $1.44 |
| 32 コア | 1 時間 | 32 | $2.88 |
例えば2コアのマシンを選択する場合、消費量を計算する時の係数は2なので、1時間経過した場合「2時間消費」という計算になります。こちらも、同じく試算ツールを使えます。
無料枠
これらの料金体系を踏まえて、GitHub Codespacesでは毎月無料枠となる基準が決まっております。
| アカウントプラン | 1ヶ月あたりのストレージ量 | 1ヶ月あたりの1コアにおける利用時間 |
|---|---|---|
| GitHub Free | 15 GB | 120 時間 |
| GitHub Pro | 20 GB | 180 時間 |
これを踏まえると、2コアのマシンを使って1GBのファイルをGitHub Freeプランでホストする場合、
- 1GBのファイルをホストするので、1ヶ月経ったとしても1GB/月で15GB/月を下回るため無料
- 無料利用上限が120時間であるFreeプランだと、1ヶ月の中で60時間までCodespaceを無料でActiveにできる
という流れになっております。
GitHub Codespaces作成までの流れ
まず、GitHubのリポジトリを作成します。今回は個人用のGitHubリポジトリを作成しておきます。
このリポジトリ画面の「Code」から「Codespaces」タブを選択し、Create codespace on mainをクリックします
すると、別タブでVSCodeの画面が開きます。VSCodeでは、GitHubリポジトリのファイル群がそのまま展開されていますので、VSCode上で編集できます。
ここで、ファイルへの変更を試してみましょう。サンプルとして用意したREADME.mdに対して、変更を加えます。
変更を加えて、ファイルを保存しただけでは、GitHubリポジトリ上では何の変化もありません。
試しに、この状態でCodespaceのページを閉じてみます。GitHubリポジトリ画面では、先ほど作成したCodespaceがあるので、こちらをクリックして再度アクセスします。
すると、再度開いたVSCode画面で、さきほどの変更点がそのまま保存されていることが確認できます。
こちらの変更点をGitHubリポジトリに反映するには、通常のgit add、git commit、git pushの流れが必要です。
CodespaceはActive時間で課金されるため、使わない場合は停止しておきましょう。
利用料の確認方法
Codespacesの利用料は、GitHubの設定画面から確認できます。画面右上のアイコンから「Settings」を選択します。
ここの「Billing and Licensing」の「Overview」から、Codespacesの現時点での利用料を確認できます。
こんな感じで、グラフで確認することもできます。今回のCodespaccesはユーザーに紐ついているため、複数のCodespacesを動かしている場合でも一度に確認できます。
実際の請求金額は、画面下部のこちらから確認できます。確認した時点では無料利用枠内でしたので、実請求金額は0です。
注意！非ActiveのCodespaceは30日で削除されます
Codespaceの非Active期間は最長で30日です。これを過ぎると自動でCodespaceが削除されますので注意してください。
例えば手動デプロイ用の環境をGitHub Codespacesで作成しているなどの場合、Codespaceが削除されるとストレージの内容も削除されます。pushしていないコミットなども消えてしまうため、定期的にアクセスして自動削除を防ぐなどで対応しましょう。
オーバースペックなマシンタイプや長時間の稼働は控えよう
GitHub Codespacesは無料枠があるため、オーバースペックなマシンタイプを選ばない・不要な場合はこまめに停止しておくなど、気をつける必要がありそうです。
この記事が参考になれば幸いです。では！
