1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Codespacesの使い方メモ

1
Posted at

はじめに

ずっと気になっていたCodespacesを触ってみたので、手順などを備忘録的にメモしていこうと思います。

概要

Codespacesは、GitHubが用意してくれているコンテナ上でVSCodeを立ち上げ、作業することができる環境のことです。
こちらはGitHubアカウントを持っている人であれば、無料枠で誰でも使うことができるものになっています。

使い方

今回は簡単なメモ書きを共有しますが、公式のページの方が当たり前に詳しいので、必要な型はこちらを見てください。

基本的な使い方としては、開きたいリポジトリのGitHubページへアクセスしてもらい、緑のCodeボタンからCodespaces -> Create codespace on mainを選択します。
image.png

これで作業をしていくことができます。
実際の画面は以下のようになります。普通にVSCodeが立ち上がっている感じですね。

image.png

今回はブラウザから開きましたが、ローカルのVSCodeをクライアントとして立ち上げることもできます。
その場合、ローカルのVSCodeの設定が適用されるので、いつも使っている設定をリモート環境でも使うことができます。

終了方法は、キーボードの F1(または Ctrl/Cmd + Shift + P)を押して、コマンドパレットを開き、Codespaces: Stop Current Codespace と入力して実行します。
これでクラウド上のインスタンス(サーバー)が安全にシャットダウンされます。

また、こちらの環境は一定時間経つと勝手に止まるので、普通にタブを閉じてもらっても一応大丈夫です。

起動(停止)中のCodespacesについてはこちらから確認することができます。

image.png

こちらから再開や削除も行えますが、削除するとコンテナごと作業内容なども削除されてしまうので、git pushなどで作業内容を反映、保存するようにしてください。
削除ではなく、停止にすることもできるのでうまく使い分けてください。

設定

Codespacesはリポジトリで管理されているものしか入っていませんが、いくつかの手段で個人の設定を持ち込むことができます。

まず一つ目の方法としては、webブラウザではなくローカルのVSCodeをクライアントにして作業することです。
先ほど説明した通り、これによってVSCodeのローカル設定を反映させることができます。

二つ目の方法としてはdotfilesを使う方法です。
VSCodeの設定以外にもbashの設定などを環境に持ち込むことができます。
具体的にはdotfilesなど、自分のリポジトリを準備しておくと、Codespacesが立ち上がる時に、リンクされているリポジトリにあるinstall.shなどのファイルを実行してくれます。
このときに必要となる処理を書いておけば自分好みの環境を作成することができます。
具体的にはこちらをご覧ください。

手順としてはこちらのページにアクセスし、Automatically install dotfilesという場所にチェックボックスを入れます。自分のdotfilesがあれば勝手に選択されますが、他の名前のリポジトリを指定したい場合はそちらを設定することもできるようです。

image.png

参考までに私のdotfilesです。

3つ目の手順はSettings Syncを使う方法です。こちらはGitHubが提供している機能でVSCodeの設定などを共通で管理できる方法です。これでVSCodeの設定をCodespacesに持ち込むことができます。

具体的な手順は、こちらへアクセスしていただき、Settings SyncをEnableにします。
image.png

料金

Codespacesは基本無料で使用することができます。

アカウント プラン 1 か月あたりのストレージ 1 か月あたりのコンピューティング時間
GitHub 個人アカウントの場合は無料 15 GB/月 120 時間
GitHub プロフェッショナル 20 GB/月 180 時間

GitHubに支払い方法の登録をする必要があるようです。
私は以前に登録したことがあったため、具体的にどういった操作が必要になるかわかりません。すみません。

また、料金の上限を設定しておくことができます。
https://github.com/settings/billing/budgets へアクセス。
左のBilling and licensing -> Budgets and alearts -> Codespacesの欄の右にある・・・ -> を選択。

image.png

こちらから上限やアラートの設定ができるようです。
私の場合は料金を払いたくなかったのですが、もともと設定はそのようになっていたようでした。

image.png

まとめ

触ってみた感想ですが、開発環境を自分のローカルマシンに持たなくてもよいというのは新鮮で便利ですね。
チームで開発する際にも環境を合わせるハードルが低くなって非常に便利そうでした。
まだまだ勉強不足なので、もっと触ってみたいと思います。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?