Connection: via IPv4
Your IP : 3.230.119.106
In English

Visual Studio CodespacesのSelf-hosted 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の公式版とも言えるでしょう。

Visual Studio Codespaces

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

セットアップ手順

セットアップには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/

    Planを作る

  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を紐づけます。ブラウザが開くのでログインしてください。
        コマンドパレット_Azure_Sign_In

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

        MSアカウントのサインイン

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

        VSCodeを開くダイアログ

      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 maindeb [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でログインするとアクセスできるようになっています。

    Codespaces環境一覧

This post was last modified on 2020年6月5日 3:23 PM

おきん

http://twpf.jp/okin_p http://profile.hatena.ne.jp/okin_p/ 名前:おきん やってること:Android向けTwitterclient開発(途中)など(やってない) 主なガジェット:Xperia XZ1 Compact,iPad mini5その他 種別:猫 over IPv6 パソコンやガジェットについて書いていく…予定。

Share
Published by
おきん

Recent Posts

最近買ったもの LG style3 L-41A

メインのスマートフォンを買い換…

1週間 ago

ESXiのssh(シェル)からHDDの温度だけ取得する

ESXi6.7でsshを使って…

1か月 ago

Linodeでunixbench

System Benchmar…

4か月 ago

楽天モバイル(MNO)のUN-LIMITを契約してみた

楽天モバイル(MNO)のUN-…

5か月 ago

This website uses cookies.