--- title: "[Outdated] Visual Studio CodespacesのSelf-hosted Codespacesをセットアップする" id: "2901" type: "post" slug: "visual-studio-codespaces%e3%81%aeself-hosted-codespaces%e3%82%92%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e3%81%99%e3%82%8b" published_at: "2020-05-24T04:40:29+00:00" modified_at: "2021-10-13T17:06:24+00:00" url: "https://www.okin-jp.net/archives/2901" markdown_url: "https://www.okin-jp.net/archives/2901.md" excerpt: "MacのWindowsAppからxrdpにrdp接続するとusキーボードになってしまうので調査 Continue reading" taxonomy_category: - "Microsoft" - "Server" - "その他" taxonomy_post_tag: - "VPS" - "VSCode" - "VSCodespaces" - "サーバー" --- Warning! この記事の内容は最早機能していないです。code-serverを使う[code-serverを使う](https://qiita.com/okinjp/items/52425f100e04e98590de) か[GitHub Codespaces](https://github.co.jp/features/codespaces) の利用を検討して下さい。 Visual Studio CodespacesのSelf-hostedについて公式のトップページから飛ぶには少々深いところに情報があるので自分用にまとめておきます。 ## 概要 Codespacesとは Visual Studio Codespacesは、Microsoftが提供するブラウザ上で動くVisual Studio Code(以下VSCode)のサービス名称です。Azure上で従量課金の仮想マシンを動かすか、自前のサーバーで構築した環境を登録することができます。 そしてSelf-hosted Codespacesは、自前のサーバー等に設置したVisual Studio Codespacesの環境です。 つまり以前[Qiita](https://qiita.com/okinjp/items/52425f100e04e98590de) でガイドを書いたcode-serverの公式版とも言えるでしょう。 [https://www.okin-jp.net/wp-content/uploads/2020/05/18243d87d2a8f8bf9923bc0d0b2ebf6a.png](https://www.okin-jp.net/wp-content/uploads/2020/05/18243d87d2a8f8bf9923bc0d0b2ebf6a.png) Visual Studio Codespacesこのサービスのすばらしい点は、公式であること、自前のサーバーにインターネットから直接的なアクセスを必要としないこと、さらにセットアップはそこまで難しくないことです。 ## セットアップ手順 セットアップにはAzureの設定を済ませたMicrosoft Accountが必要です。 1. Azureの無料アカウントを作成します。この時のMicrosoftアカウント(以下MSアカウント)は普段使っているもので大丈夫です。なければ作成します。(ここでは作成の手順を省略します。) →[https://azure.microsoft.com/ja-jp/free/](https://azure.microsoft.com/ja-jp/free/) 2. 開始するを押すとMSアカウントでログインが促され、従量課金の環境に紐づけるプランを設定します。従量課金になるAzure上の仮想マシンを使った環境を設定しなければ課金されることはないので、安心してください。 → [https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/](https://visualstudio.microsoft.com/services/github-codespaces/) [https://www.okin-jp.net/wp-content/uploads/2020/05/95a1cb9e102e774be2a7b81462e76768.png](https://www.okin-jp.net/wp-content/uploads/2020/05/95a1cb9e102e774be2a7b81462e76768.png) Planを作る 3. Self-hosted Codespacesを入れたいマシンにセットアップします 1. GUIがあり、VSCodeがすでに動いているマシンでセットアップする場合 → [https://docs.microsoft.com/en-us/visualstudio/online/how-to/self-hosting-vscode](https://web.archive.org/web/20210106160952/https://docs.microsoft.com/en-us/visualstudio/codespaces/how-to/self-hosting-vscode) 1. [https://marketplace.visualstudio.com/items?itemName=MS-vsonline.vsonline](https://marketplace.visualstudio.com/items?itemName=MS-vsonline.vsonline) またはVSCodeの拡張機能検索からcodespaces等で検索し、Visual Studio Codespacesプラグインをインストールします。 [https://www.okin-jp.net/wp-content/uploads/2020/05/0333ff46d87f2d951e68014e7282f25d.png](https://www.okin-jp.net/wp-content/uploads/2020/05/0333ff46d87f2d951e68014e7282f25d.png) 拡張機能をインストールする 2. [https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azure-account) またはVSCodeの拡張機能検索からazure account等で検索し、Visual Studio Azure Accountプラグインをインストールします。 3. Ctrl+Shift+Pでのショートカットまたは画面上部のメニューバーのView→Command Paletteでコマンドパレットを呼び出します [https://www.okin-jp.net/wp-content/uploads/2020/05/99fb2ec555fe7376c6512be57ddc5a77.png](https://www.okin-jp.net/wp-content/uploads/2020/05/99fb2ec555fe7376c6512be57ddc5a77.png) コマンドパレットの開き方 4. `Azure: Sign In`を入力してAzureのMSアカウントとVSCodeを紐づけます。ブラウザが開くのでログインしてください。 [https://www.okin-jp.net/wp-content/uploads/2020/05/2f34ef973afb8f070b80ad1ffd8db8d7.png](https://www.okin-jp.net/wp-content/uploads/2020/05/2f34ef973afb8f070b80ad1ffd8db8d7.png) コマンドパレット_Azure_Sign_In 5. 再びコマンドパレットから`Codespaces: Register Self-hosted Codespace`を入力して登録に進みます。 ※ ガイドでは`Codespaces: Register Self-hosted Environment`になっていますが現在では名称が変更になっていました。(2020/05/22) 6. ブラウザが起動してMSアカウントでのログインを求められるので、ログインしてください。また、サインインするか聞かれたら続行してください。 [https://www.okin-jp.net/wp-content/uploads/2020/05/8169d7d1c9b45e7519ee427a9f7fec7a.png](https://www.okin-jp.net/wp-content/uploads/2020/05/8169d7d1c9b45e7519ee427a9f7fec7a.png) MSアカウントのサインイン 7. 今度はVSCodeを呼び出すダイアログが出てくるのでokしてください。 [https://www.okin-jp.net/wp-content/uploads/2020/05/80935317c3b28edcc17e40beed07242a.png](https://www.okin-jp.net/wp-content/uploads/2020/05/80935317c3b28edcc17e40beed07242a.png) VSCodeを開くダイアログ 8. 拡張機能がURIを開くことを許可し、右下のダイアログからワークスペースとしてホームディレクトリを指定したら完了です。 2. VPSやServer系Linux等CLIで使用していてVSCodeも動いていない場合 → [https://docs.microsoft.com/en-us/visualstudio/online/reference/vsonline-cli](https://web.archive.org/web/20201028121904/https://docs.microsoft.com/en-us/visualstudio/codespaces/reference/vsonline-cli) 1. 基本的には[https://docs.microsoft.com/en-us/visualstudio/online/reference/vsonline-cli#installation](https://web.archive.org/web/20201028121904/https://docs.microsoft.com/en-us/visualstudio/codespaces/reference/vsonline-cli) のガイド通りです。今回は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](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](https://online.visualstudio.com/environments) でログインするとアクセスできるようになっています。 [https://www.okin-jp.net/wp-content/uploads/2020/05/220b4d9f5fb6b98993ba3c2e8109047a.png](https://www.okin-jp.net/wp-content/uploads/2020/05/220b4d9f5fb6b98993ba3c2e8109047a.png) Codespaces環境一覧 ![おきん(blog)](https://secure.gravatar.com/avatar/90fa8845304183a491e9f3bfa0a6a44e46e25882407e4aa652815d725d55bd8c?s=100&r=g) [おきん(blog)](https://www.okin-jp.net/archives/author/oops-okin) [https://mi.okin-jp.net/@okin_p](https://mi.okin-jp.net/@okin_p) (Misskey) [https://fi.okin-jp.net/@okin_p](https://fi.okin-jp.net/@okin_p) (Firefish) [https://si.okin-jp.net/@okin_p](https://si.okin-jp.net/@okin_p) (Mastodon) [https://fedifile.net/@okin_p/profile/](https://fedifile.net/@okin_p/profile/) [https://twpf.jp/okin_p](https://twpf.jp/okin_p) [http://profile.hatena.ne.jp/okin_p/](http://profile.hatena.ne.jp/okin_p/) 名前：おきん やってること：面倒なことをPHPにやらせる、IPv6でなにかする、車で移動する 主なガジェット：Google Pixel 4a (5G) ,iPhone XS(ジャンク), iPad mini5, その他 種別：IPv6 Single stack 猫 パソコンやガジェットについて書いていく…予定。 [https://twitter.com/okin_p](https://twitter.com/okin_p) [https://si.okin-jp.net/@okin_p](https://si.okin-jp.net/@okin_p) ### *関連記事* ### コメントを残す[コメントをキャンセル](/archives/2901#respond) このサイトはスパムを低減するために Akismet を使っています。[コメントデータの処理方法の詳細はこちらをご覧ください](https://akismet.com/privacy/) 。