MarkdownとBullet Journal

いわゆるプログラマーのつぶやき

【Git】⒋iPadやwebでVSCodeを使う:GitHub Codespaces

インストール不要でVSCodeが使える

GitHub Codespacesは、GitHubSaaSとして利用できるwebサービスであり、ブラウザで起動したイメージもVSCodeそのものである。拡張機能やターミナルも全く同様に使えるので、例えばGitHub Copilotも問題なく利用できる(要契約)。

利用方法は、①全てGitHub Codespacesで行うやり方と、②VSCodeはローカル(端末側)にフロントエンドを置き、リモートのVSCode Serverをコンテナ内で実行できるため、同様にローカル:端末側は従前のVSCodeアプリを用いるやり方をそれぞれ説明する。

利用方法①:全てCodespacesを使用

GitHubのアカウントとネット接続可能なPCやiPadのみで利用できる(無償利用範囲)。GitHub上の任意のRepositoryを、GitHub Codespaces上にcloneする方法なのでブラウザだけで完了する。

利用方法

  1. GitHubサイトに接続、開発対象のリモートリポジトリを開く
  2. 「Code」の左にある下矢印をクリック
  3. タブの「Codespaces」を選択し、「Create Codespace on ****」をクリック

すると見事なぐらいVS Codeと同機能な画面が開くので、VSCode同様に利用できる。

Codespacesの画面

  • HTTPS接続なのでファイアウォールの内側から利用可能
  • ローカル(端末側)への開発ツール類のインストール不要(Dockerも不要)
  • ポート転送機能を用いたWebアプリ開発が可能
  • 開発環境のトラブル時はコンテナ抹消&再構築で解決
  • GitHub Codespaces上でDockerが利用可能(Docker-in-Docker)
  • 開発者の増減対応も容易(サービス利用の増減のみ)

利用方法②:ローカル:VSCode+リモート:Codespaces

ローカル:端末側はVSCodeアプリを用いて、リモートサーバーのGitHub Codespacesと接続する利用方法も可能である。従前からVSCodeが有しているVSCode Serverのコンテナの一つとしてGitHub Codespacesを使用する。

利用方法:

公式が詳しい:

docs.github.com

  • ローカル側にVSCodeエディタ(+環境)、リモート側に対象ソースコードやプロセスを配置
  • 画面情報を転送しないので軽快に動作する(リモートデスクトップの従来の欠点を改善)
  • ローカル環境を汚さない(必要なファイルはリモート側だけに配置)

Codespacesの設定共通化

GitHub Codespaces環境のカスタマイズ等は、.devcontainer/devcontainer.jsonに記述する。VSCodeの設定やインストールしたい拡張機能の定義 など詳細は公式のドキュメント参照:

Create a development container using Visual Studio Code Remote Development

  翻译: