[Outdated] Visual Studio CodespacesのSelf-hosted Codespacesをセットアップする

Warning! この記事の内容は最早機能していないです。code-serverを使うcode-serverを使うかGitHub Codespacesの利用を検討して下さい。

---

Visual Studio CodespacesのSelf-hostedについて公式のトップページから飛ぶには少々深いところに情報があるので自分用にまとめておきます。

概要 Codespacesとは

Visual Studio Codespacesは、Microsoftが提供するブラウザ上で動くVisual Studio Code(以下VSCode)のサービス名称です。Azure上で従量課金の仮想マシンを動かすか、自前のサーバーで構築した環境を登録することができます。

そしてSelf-hosted Codespacesは、自前のサーバー等に設置したVisual Studio Codespacesの環境です。

つまり以前Qiitaでガイドを書いたcode-serverの公式版とも言えるでしょう。

このサービスのすばらしい点は、公式であること、自前のサーバーにインターネットから直接的なアクセスを必要としないこと、さらにセットアップはそこまで難しくないことです。

セットアップ手順

セットアップにはAzureの設定を済ませたMicrosoft Accountが必要です。

1. Azureの無料アカウントを作成します。この時のMicrosoftアカウント(以下MSアカウント)は普段使っているもので大丈夫です。なければ作成します。(ここでは作成の手順を省略します。)
   → https://azure.microsoft.com/ja-jp/free/
2. 開始するを押すとMSアカウントでログインが促され、従量課金の環境に紐づけるプランを設定します。従量課金になるAzure上の仮想マシンを使った環境を設定しなければ課金されることはないので、安心してください。
   → https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/

   

3. Self-hosted Codespacesを入れたいマシンにセットアップします
   1. GUIがあり、VSCodeがすでに動いているマシンでセットアップする場合
      → https://docs.microsoft.com/en-us/visualstudio/online/how-to/self-hosting-vscode
      1. https://marketplace.visualstudio.com/items?itemName=MS-vsonline.vsonlineまたはVSCodeの拡張機能検索からcodespaces等で検索し、Visual Studio Codespacesプラグインをインストールします。

         

      2. https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-accountまたはVSCodeの拡張機能検索からazure account等で検索し、Visual Studio Azure Accountプラグインをインストールします。
      3. Ctrl+Shift+Pでのショートカットまたは画面上部のメニューバーのView→Command Paletteでコマンドパレットを呼び出します

         

      4. Azure: Sign Inを入力してAzureのMSアカウントとVSCodeを紐づけます。ブラウザが開くのでログインしてください。

         

          

      5. 再びコマンドパレットからCodespaces: Register Self-hosted Codespaceを入力して登録に進みます。
         ※ ガイドではCodespaces: Register Self-hosted Environmentになっていますが現在では名称が変更になっていました。(2020/05/22)
      6. ブラウザが起動してMSアカウントでのログインを求められるので、ログインしてください。また、サインインするか聞かれたら続行してください。

         

      7. 今度はVSCodeを呼び出すダイアログが出てくるのでokしてください。

         

      8. 拡張機能がURIを開くことを許可し、右下のダイアログからワークスペースとしてホームディレクトリを指定したら完了です。
   2. VPSやServer系Linux等CLIで使用していてVSCodeも動いていない場合
      → https://docs.microsoft.com/en-us/visualstudio/online/reference/vsonline-cli
      1. 基本的にはhttps://docs.microsoft.com/en-us/visualstudio/online/reference/vsonline-cli#installationのガイド通りです。今回はUbuntu Server 18.04.4での作業例を示します
      2. Install via aptより
         sudo curl https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
sudo add-apt-repository https://packages.microsoft.com/ubuntu/18.04/prod/
sudo apt-get update
sudo apt-get install vso -y
      3. もし
         N: Skipping acquire of configured file 'main/binary-i386/Packages' as repository 'https://packages.microsoft.com/ubuntu/18.04/prod bionic InRelease' doesn't support architecture 'i386'
         のように出て気になる場合は/etc/apt/sources.listの最後から2行目にある
         deb https://packages.microsoft.com/ubuntu/18.04/prod/ bionic maindeb https://packages.microsoft.com/ubuntu/18.04/prod/ bionic mainをdeb [arch=amd64] https://packages.microsoft.com/ubuntu/18.04/prod/ bionic main
         に変更することで回避できます
      4. vso start -vで環境の登録を開始します[2020-05-22 00:32:24.900 CLI I] vso v1.0.1998.63218 (pid: 7372)
[2020-05-22 00:32:25.200 CLI I] Authenticating...
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXXXXX to authenticate.
         のように表示されるでしょう。
      5. 表示に従ってhttps://microsoft.com/deviceloginを開いてコードを入力します。
      6. いくつかの質問に回答します
         Enter an environment name or blank to use [code]:
         環境名は既定でコンピュータ名になっています。変えたい場合はここで入力します。Would you like us to run 'loginctl enable-linger' to enable services to run even when you're not logged on? [Y/n]
         ログインしていない場合でもアクセスできるようにするかどうか聞かれます。linuxの場合はこのあとsudoの認証が要求されます。
      7. [2020-05-22 00:32:55.674 CLI I] Waiting for environment to become available...
[2020-05-24 00:33:12.722 CLI I] All done! Connect: https://online.visualstudio.com/environment/xxxx-xxxxx-xxxxxxxxxxxx
         完了です
4. 登録した環境はhttps://online.visualstudio.com/environmentsでログインするとアクセスできるようになっています。