🐈
【初めての人向け】Codespaces ハンズオン 〜クイックスタート編〜
はじめに
この記事は下記動画の記事版です！
動画の方が操作方法とかがわかりやすと思うのでぜひ見てみてください
概要
GitHub Codespaces は、 GitHub で提供されている機能の一つで、一言でいうとクラウド開発環境です
- クラウド ( Azure ) 上のマシン ( VM ) にコンテナで環境作って開発
- 似たようサービスは AWS Cloud9
価格体系
※2025/03/03 時点
最新の料金、自分の使用量は下記より確認可能です
VM
VM はコア数によって料金が異なり RAM は固定です
※記載ないですが、ストレージサイズも固定
| Cores | RAM | Price |
|---|---|---|
| 2 | 4 [ GB ] | 0.18 [ USD / h ] |
| 4 | 8 [ GB ] | 0.36 [ USD / h ] |
| 8 | 16 [ GB ] | 0.72 [ USD / h ] |
| 16 | 32 [ GB ] | 1.44 [ USD / h ] |
| 32 | 64 [ GB ] | 2.88 [ USD / h ] |
ストレージ
ストレージに種類はなく一律です
0.07 [ USD / GB / Month ]
無料枠
毎月無料枠が設定されていてこの範囲無いなら課金されないです
| アカウントプラン | 1 か月あたりのストレージ | 1 か月あたりのコア時間 |
|---|---|---|
| Free | 15 [ GB / 月 ] | 120 |
| Pro | 20 [ GB / 月 ] | 180 |
※どちらかが上限で起動できなくなります
- コア時間
- 起動している間だけ消費
- Free の場合 1 コアで 120 なので 2 コアだと 60
- ストレージ
- VM が存在している限り消費
- 15 [ GB ] の VM を 1 ヶ月残しておける
ハンズオン
クイックスタート
↓に沿ってやっていきます
Codespaces ( Visual Studio Code の Web 版 ) 起動
- クイックスタートページから、テンプレートリポジトリにアクセス
- テンプレートリポジトリ右上の Code ボタンをクリック
- Codespaces タブが選択されていなければ選択
- Create Codespaces on main をクリック
アプリケーション起動
- ターミナルを起動
- コマンド
npm run devを入力し実行 - ポップアップメッセージが表示されるのでブラウザで開くをクリック
- 新しいタブでアプリケーションが起動 🎉
環境廃棄
使い終わった環境の廃棄をします
- Codespaces のページ ( https://github.com/codespaces ) にアクセス
- ⋯ をクリック
- 一番下の Delete をクリック
- 確認ダイアログの Delete をクリック
- フラッシュメッセージが表示されたら削除完了
個人的感想
推しポイント
ローカル環境が汚れない
- 開発ツールのインストールが不要
- VM, Docker とかすら入れなくても開発ができる
環境構築
- 同じ環境からスタート可能
- OJT とかではとりあえず起動してもらえれば開発、動作確認可能
- 変な設定が残ってて起動しない問題が減る
どこでも開発できる
- GitHub にログインできれば起動可能
- 端末が変わっても環境は同じ
気になるポイント
アップデートが早い
- 変更が頻繁に入るので追従するのが大変
- 最新情報が見つけづらい
VM の状況が確認しづらい
- CPU 使用率、メモリ使用量が確認できない
Discussion