More than 3 years have passed since last update.

Github Codespacesでブラウザ上に自宅と同期したVSCode環境が構築できた

Last updated at 2022-07-08Posted at 2021-08-05

[2021/08/12追記]　ついにGithub Team / Github Enterprise Cloudで正式リリースとなりました！無料ティアはなかったのですが、まだ個人向けが発表されていないので引き続きプレビュー版が有効になっている個人プランのユーザは無料で使い続けることができます。

以前、Visual Studio Onlineが登場したときに一通り遊んでみた記事を書きましたが、今回はそのVisual Studio Onlineが統合されたGithub Codespacesのベータ版が有効になっていたので使ってみることにしました。

リモートワークがずっと続いていることもあり、最近のメイン開発環境はWindowsのデスクトップ機+WSL2の環境を使っています。時々困るのがたまに家から出ると開発ができないという点です。VPNを張って自宅とつないでもいいのですが回線速度によっては快適じゃなかったので、今回のCodespacesを使って出先とメイン環境で継続して開発ができるかチャレンジしてみようと思います。結論：iPad Proからも使えてめっちゃ快適でした

まずはサインアップ

Github Codespacesは現在ベータ版ですが、申し込むと割と使えるようです。僕のアカウントもすでに使えるようになっていました。

ここから申し込むとすでに有効になっていました。

リポジトリを選択してスタート

Codespacesを開始するには何らかのリポジトリを選ぶ必要があります。これから作成するプロジェクトで試してみたい場合は、事前にリポジトリを作成しておきましょう。今回は手元のPHP(Docker)プロジェクトで試してみます。

こんなかんじでサクッとCodespacesが立ち上がります。普段黒いテーマにしているのでテーマが変えられるか試します。ついでに日本語環境もできるか試してみましょう。

カラーテーマは設定から変更できて（Github Dark defaultはだめだったけど、普通のDarkはできた）日本語拡張もあるのですが・・・

Install in browserになってますね。インストールはできましたがまだConfigure display languageメニューがなかったので日本語UIは対応していないようです。

ちなみに、結構動作速度が速いな、と思ったのですが、今回割り当てられているインスタンスは、vCPU 4コア、メモリ8GBのインスタンスのようでした。リージョンはシンガポールでした。そりゃ快適ですね。なおマシンタイプは将来的に選べるようです。

さっそくDockerを起動

さて、気を取り直して開発していきましょう。まずはDockerを起動して動作確認です。

# codespace ➜ /workspaces/docswell (dev ✗) 
$ docker-compose build
$ docker-compose up -d
$ docker-compose exec web composer install

標準でDockerもdocker composeもインストール済みなのでスムーズに起動しました。あれ、そういえばどこで動作確認するんだろう、と思いきや右下のパネルで教えてくれます。
動作確認には専用のサブドメインを用いることで起動したコンテナのforwarded portと接続可能になるようです。すごーい

https://{username}-{reponame}-{codespaceid}-{PORT}.githubpreview.dev/

というドメインです。-{PORT}.githubpreview.dev以外の部分はエディタと同じなので覚えやすいですね。

そして、普通に起動しました。どーん

ほかのリポジトリからコードを取得する

CSSが当たってないなと思い確認すると、yarnがこけてました。フロントは別リポジトリになっていたので取得できなかったようです。

調べてみたところ、Codespacesで他のプライベートリポジトリにアクセスするには2つの方法があるようです。

HTTP経由で取得する（かんたん）

GithubのSettingsにいって、リポジトリに許可を与えるだけです。すべてに与えることも選択することも可能です。
https://github.com/settings/codespaces

そのままだと反映されないようなので、いちど左下のCodespaceボタンからコマンドパレットを呼び出しし「現在のCodespacesを中断する」で停止し、その後再度Startすれば反映されます。

SSH経由で取得する

SSHキーを生成して登録してみます。Codespaces上のファイルは、Githubによって認証された自分しかアクセスできない場所なので、個人利用においてはリポジトリアクセスの秘密鍵を置いても安全と考えてよいでしょう。ただし、ベータ期間中いつストレージがクリアされるかわからないので、必要に応じてバックアップを取りましょう。

$ ssh-keygen -t rsa -b 4096 -C "ku-suke@example.com"
$ ssh-add ~/.ssh/id_rsa
Identity added: /home/codespace/.ssh/id_rsa (ku-suke@example.com)

$ cat ~/.ssh/id_rsa.pub
# この公開鍵をgithubにセットする

# ためしにcloneしてgithubのfingerprintを受け入れる
$ git clone ssh://git@github.com/ku-suke/docswell-player.git
略
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes