GitHub Codespaces と Visual Studio Code を使ったリモートでの開発環境構築

はじめに

私が普段使っている、PC のローカルストレージが一杯になってしまいました。(スクリーンショットは不要なアプリや、コンテナのイメージファイル、ダウンロードやごみ箱のファイル、などを削除した後でこの状態です。)

写真や動画で容量が一杯なら外部ディスクという選択肢もありましたが、開発に必要なアプリケーションやライブラリで一杯になっていると思われます。それでいて新しい PC を買いたくありません。これ以上ローカルに開発ツール等をインストールすることもできないので、仕方ないですがこれからは際にローカル開発ではなく GitHub Codespaces を使ったリモートでのコンテナ開発に慣れていこう、と思い立ったのがこの記事を書いたきっかけになります。本記事では、GitHub Codespaces と Visual Studio Code を使ったリモートでの開発環境構築をするための手順をまとめました。

GitHub Codespaces とは

GitHub Codespaces は、GitHub が提供するクラウドベースの開発環境サービスです。Web ブラウザや Visual Studio Code からアクセス可能で、コードの編集、ビルド、デバッグが可能です。Visual Studio Code の拡張機能の利用や、リモートからのコーディングも可能で、GitHub の連携により、シームレスな開発ができます。

GitHub Codespaces 拡張機能をインストール

Visual Studio Code から、以下の拡張機能をインストールしてください。

Visual Studio Code で GitHub にログインする

Visual Studio Code のアクティビティバーでリモートエクスプローラーのアイコンを押した後、「REMOTE EXPLORER」で「GitHub Codespaces」を選択し、「Sign in to GitHub」を押してください。

モダールが表示されるので、「Allow」を押します。

Organization に所属している場合は、以下のような画面が表示されるので「Authorize」を押します。

GitHub for VS Code が追加の権限を求めてくるので、「Authorize Visual-Studio-Code」を押します。

GitHub への認証が求められるので、「Use GitHub Mobile」を押します。スマホを使った認証の代わりに、「Use your authenticator app」や「Use your password」でも可能です。

認証が無事終わると、Visual Studio Code にリダイレクトされます。

Visual Studio Code で GitHub Codespaces を作成する

「Create Codespace」のボタンが表示されます。

「Create Codespace」のボタンを押すと、プライベートリポジトリを含めて、自分のリポジトリ一覧が表示されます。試しに、任意のリポジトリを選択します。

ブランチが表示されるので、任意のブランチを選択します。

GitHub Codespace のインスタンスのスペックが表示されるので、任意のスペックを選択します。

その後、GitHub Codespace を Visual Studio Code で作成することができました。

Visual Studio Code で GitHub Codespaces を開く

GitHub Codespaces から接続を切った状態で、リモートエクスプローラーのアイコンを押して画面を表示します。「GITHUB CODESPACES」から先ほど作成した GitHub Codespaces を右クリックで選択して、「Connect to Codespace」を選択すると、GitHub Codespaces を開くことができます。

新規 GitHub Codespaces 用の GitHub リポジトリを作成する

リモートでのコンテナ開発環境を構築するため、新規リポジトリを作成します。

「Repository name」に任意のリポジトリ名を入力したあと、「Create repository」のボタンを押します。

この画面が表示されれば、GitHub でリポジトリを作成できました。この状態だとリポジトリの中身は空になっているので、.devcontainer.json をインポートするために「Import code」を押します。

「Your old repository's cloe URL」に https://github.com/yus04/devcontainer-template.git を入力して、「Bigin import」を押します。

インポートが完了しました。

リポジトリを確認すると、.devcontainer ができていることを確認できました。

新規 GitHub Codespaces を作成する

GitHub リポジトリを作成できたので、ここでようやく GitHub Codespaces を作成することができます。Visual Studio Code で「Create Codespace」を押して、先ほど作成したリポジトリを選択します。その後、任意のブランチとインスタンスのスペックを選択します。

GitHub Codespaces の作成に少し時間がかかるので、5 分程待機します。

待機しているとと、GitHub Codespaces のセットアップが完了します。念のため GitHub Copilot、 GitHub Copilot Chat、 Azure CLI、 Azure Developer CLI など .devcontainer で定義されているツールが入っているかを確認すると、正しくインストールされていることを確認できました。これにて無事、開発環境構築を終えられました。

おわりに

本記事では、GitHub Codespaces を使ったリモートでの開発環境の手順を紹介しました。GitHub Codespaces の拡張機能のインストールから、リポジトリの作成、開発環境用の .devcontainer の作成など、最初は色々と準備に時間がかかると思いますが、一度セットアップしてしまうと、2 回目以降の環境構築は楽にできると思います。今後の開発では GitHub Codespaces を使っていくことで、開発をするときにローカルストレージが足りない問題を解決できるといいなと思います。