Zenn
🚀

Cursor と Codespaces を接続

に公開
GitHub
GitHub CLI
SSH
Codespaces
Cursor
tech

はじめに

この記事は下の動画の記事版です！
動画の方が操作方法とかがわかりやすと思うのでぜひ見てみてください

https://youtu.be/7nf3qa0sb34

今回は、Cursor で Codespaces に接続する方法を解説します

基本的に参考にした記事通りにやればつながりますが、なくても大丈夫な手順があったり、日本語の情報がなかったので動画化してみました

https://medium.com/@NFAblog/connect-github-codespaces-to-cursor-ai-ai-friendly-vs-code-clone-243fa5f79414

概要

今回のテーマの「Cursor で Codespaces に接続」ですが
「そもそも、Cursor って Visual Studio Code をベースにしてるから普通につながるのでは？」って思ってました
まあ、解説動画作ってるとか日本語の情報が無いことでお察しだとは思うんですが、一筋縄ではいかなかったんですよね
対応してないからなのかそもそも Codespaces の拡張機能が Cursor の拡張機能の検索に出てこないんですよね
で、なんとかインストールしたとしても作成とか削除とかはできるけど接続できないってのが編集時点の状況ですね
一応、フォーラムにもスレッドあるのでその内修正されるかもですね

バージョン

私が試して接続できなかったバージョンがこんな感じです
どちらも編集時点の最新のはずです

Version: 0.49.6
VSCode Version: 1.96.2
Commit: 0781e811de386a0c5bcb07ceb259df8ff8246a50
Date: 2025-04-25T05:07:16.071Z
Electron: 34.3.4
Chromium: 132.0.6834.210
Node.js: 20.18.3
V8: 13.2.152.41-electron.0
OS: Darwin arm64 24.4.0

Name: GitHub Codespaces
Id: GitHub.codespaces
Description: Your instant dev environment
Version: 1.17.3
Publisher: GitHub
VS Marketplace Link: https://marketplace.cursorapi.com/items?itemName=GitHub.codespaces

解説

では、さっそく解説に入っていきます

https://medium.com/@NFAblog/connect-github-codespaces-to-cursor-ai-ai-friendly-vs-code-clone-243fa5f79414

さっき説明した通り、拡張機能経由ではつながらないので、記事の通り SSH 接続で Codespace に接続します
テストで接続するなら Codespace はいつものクイックスタートのリポジトリがいいと思います

https://github.com/github/haikus-for-codespaces

とりあえず Codespace を起動します

# generate ssh key pair
ssh-keygen -t rsa -b 4096 -C “your_email@example.com”

# install GitHub CLI
brew install gh

# check install gh
gh --version

# Authenticate with GitHub
gh auth login

# List your Codespaces
gh codespace list

# Add codespace scope
gh auth refresh -h github.com -s codespace

# List your Codespaces
gh codespace list

# Check SSH connect
gh codespace ssh

# Generate SSH config for your Codespace
gh codespace ssh --config

# Add it to your SSH config
gh codespace ssh --config >> ~/.ssh/config
  1. SSH key pair を作ります。もう作られてる場合はスキップ可能です
  2. GitHub CLI を入れます。これと初期設定は設定済みの人はスキップ可能です
  3. ちゃんとインストールできてるかコマンドで確認します
  4. 認証を通します。どこで認証するかとかも聞かれるので選択します。基本的にデフォルトで問題ないと思いますが、ちゃんと確認しましょう
  5. Codespace 一覧を取得するのですが、おそらく scope 不足でエラーになると思います
  6. エラーメッセージに表示された通り、codespace のスコープを追加します
  7. もう一度、Codespace 一覧を取得すると今度は取得できると思います
  8. 最初にテストとして GitHub CLI 経由で SSH 接続します。こちらは SSH の設定ファイルとかを参照しないので、今までの設定がちゃんとできていればつながるはずです。つながったらすぐに抜けて大丈夫です
  9. 設定ファイルに書き込む内容を表示します。一覧が取得できていればこれもうまくいくはずです
  10. 最後にさっき表示した設定を SSH の設定ファイルに書き込みます。これで準備完了です
  11. あとは Cursor に拡張機能から SSH に設定されている Codespace を選べばつながります

つながらない場合は Tips で紹介している方法で解消するかもです
お疲れ様でした。これで解説は終わりです

Codespace の消し忘れに注意するのと、SSH の設定は基本的に 1 回限りなので不要なら削除するようにした方がいいと思います

Tips

ここからは、設定方法とか検証している最中に気づいた Tips を紹介します

拡張機能との違い

まず、Codespaces の拡張機能から接続した時と SSH 接続の違いですね
投稿者が気づいたものは、ポートフォワーディング周りですかね
ここはほぼ使えないですね。Codespaces の設定ファイルに書かれているものも表示されないし、自動検知とか動作しないですね
ただ、Codespaces の機能自体は生きているので、知っていればつなぐことできますし、設定もできます

SSH 関連不足

次に、対象の Codespace に SSH 関連が不足している場合ですが、ちゃんとエラーが出て対応方法を教えてくれました
追加機能で sshd があるので、それを設定ファイルに追加すれば問題なくつながりました

codespaces.auto

最後に、codespaces.auto について
設定ファイルを見ると鍵に codespaces.auto が指定されていると思います
これは接続時とかに自動的に生成されるのですが、なにかの条件で生成されなかったり、消しちゃったりすることがあると思います
その場合は、Codespace の設定を書き込んだあと、書き込まれた部分の IdentityFile に存在する鍵を設定し、GitHub CLI を使わず ssh ホスト名 で SSH 接続すると生成されると思います

まとめ

  • 編集時点では Cursor から Codespace の拡張機能で接続はできない
  • フォーラムに上がってるのでそのうち修正されるかも
  • SSH ならつながるのでそっちを使う
  • GitHub CLI を使いつつ設定するのが楽
  • ポートフォワーディング機能はほぼ使えない
  • SSH 関連が不足してたら追加機能を入れる
  • codespaces.auto は生成されるはずだが、されなかったら生成する方法もある

締め

最後まで見ていただき、ありがとうございました
気に入っていただけた方は、いいね、動画のチャンネル登録、高評価をよろしくお願いします！！

Discussion