<p>VSCodeのJune2022 Updateが正式に公開されました。<br>
本稿では、アップデートと同時に公開されたVisual Studio Code Serverの使い方について解説します。</p>
<p>※2022-08-12 Private Previewにあたったのでトンネリング機能についての説明を追加しました</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7081c7615186-20220710.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<p>VSCode Serverの概要については、下記記事を閲覧ください。<br>
（窓の杜）<a href="https://forest.watch.impress.co.jp/docs/news/1423348.html" target="_blank" rel="nofollow noopener noreferrer">https://forest.watch.impress.co.jp/docs/news/1423348.html</a><br>
（公式）<a href="https://code.visualstudio.com/blogs/2022/07/07/vscode-server" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/blogs/2022/07/07/vscode-server</a></p>
<p>Code Serverは将来的にVSCodeの<strong>code(1)に統合</strong>されることを念頭に設計された機能で、ChromeなどのWebブラウザーをVSCodeのフロントエンドとして利用します。<br>
これまでもブラウザーの中で完結するVSCodeとして<a href="https://vscode.dev" target="_blank" rel="nofollow noopener noreferrer">vscode.dev</a>や<a href="https://github.dev" target="_blank" rel="nofollow noopener noreferrer">github.dev</a>を利用できましたが、<code>code-server</code>はあくまでコンピューター上で実行されているのでLanguage serverなどの外部プロセスを利用する拡張なども利用できます。<br>
また、vscode.devからローカルのサーバにアクセスが可能になる<strong>トンネリング機能</strong>をサポートしているため、サーバーを開発用のDockerにインストールして別のマシンのvscode.devからアクセスするといったことが可能になります。<br>
トンネリング機能のみPrivate Previewとしてアクセスをリクエストする必要がありますが、ローカルにサーバーを建てるだけであればwaitlistに登録することなく利用できます。</p>
<h2 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h2>
<p>基本的にすべての手順は下記ページにあります。正確な情報が知りたい場合、こちらを参照してください。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__55348de34c5af" src="https://embed.zenn.studio/card#zenn-embedded__55348de34c5af" data-content="https%3A%2F%2Fcode.visualstudio.com%2Fblogs%2F2022%2F07%2F07%2Fvscode-server" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://code.visualstudio.com/blogs/2022/07/07/vscode-server" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://code.visualstudio.com/blogs/2022/07/07/vscode-server</a></p>
<p>下記スクリプトをダウンロード後実行するだけで、インストールが完了します。<br>
途中、管理者権限を要求されます。インストール先→<code>/usr/local/bin/code-server</code></p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">wget</span> -O- https://aka.ms/install-vscode-server/setup.sh <span class="token operator">|</span> <span class="token function">sh</span>
</code></pre></div><p><code>code-server</code>コマンドにPATHが通っていることを確認してください。</p>
<h3 id="%E3%82%A2%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> アンインストール</h3>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">$ <span class="token function">sudo</span> code-server uninstall
</code></pre></div><p>また、<code>~/.vscode-server</code>・<code>~/.vscode-cli</code>ディレクトリが生成されています。任意で削除してください。</p>
<h2 id="%E8%B5%B7%E5%8B%95%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E8%B5%B7%E5%8B%95%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 起動方法</h2>
<p>トンネリングサービスはまだ一般に公開されていませんのでサーバーをローカルにのみ公開する方法を紹介します。</p>
<p><code>$ code-server serve-local</code><br>
ライセンスに同意するかのプロンプトが出るので、同意してください。軽く読んだ限りだと、アプリケーションの画像などを公開することを制限するような文言は見られませんでした。<br>
<code>--accept-server-license-terms</code>オプションをつけると、ライセンスに同意したものとしてサーバーが起動します。</p>
<p>ログに下記のようなメッセージが表示されます。URLにローカルからアクセスするとVSCodeを利用できます。<br>
<code>Web UI available at http://localhost:8000/?tkn=0e6b04be-fdf2-4392-b2bf-07ffd7d90143</code></p>
<h3 id="%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%B3%E3%83%8D%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B" aria-hidden="true"></a> トンネリングサービスを利用する</h3>
<p>PrivatePreviewはGithubのユーザーネームに基づいて管理されます。応募すると、利用できるようになるタイミングでメールが届きます。<br>
この状態で、<code>$ code-server</code>コマンドを実行するとGithubへのログインURLが表示されるのでアクセスしてください。</p>
<p>Githubでログインが完了するとコンピュータの名前を決めることができるようになるので、好きな単語を打ち込むかEnterキーを押すとトンネリングが開始されます。</p>
<p>ログに表示されたURLからアクセスするか、下記URLにアクセスするとトンネリングを利用できるようになります。</p>
<div class="code-block-container"><pre><code>https://insiders.vscode.dev/+ms-vscode.remote-server/[任意の名前]
</code></pre></div><h4 id="%E5%90%8D%E5%89%8D%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%90%8D%E5%89%8D%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B" aria-hidden="true"></a> 名前を変更する</h4>
<div class="code-block-container"><pre><code>code-server rename --name [任意の名前]
</code></pre></div><h3 id="%E7%B5%82%E4%BA%86">
<a class="header-anchor-link" href="#%E7%B5%82%E4%BA%86" aria-hidden="true"></a> 終了</h3>
<p><code>Ctrl-C</code>でサーバーを終了できます。カーソルの描画がおかしくなる場合は<code>reset</code>コマンドを実行してください。<br>
その他のコマンドは<code>$ code-server -h</code>から確認できます。</p>
<h2 id="%E5%B0%8F%E6%8A%80">
<a class="header-anchor-link" href="#%E5%B0%8F%E6%8A%80" aria-hidden="true"></a> 小技</h2>
<p>WindowsのChromeではCtrl-Wなどのキーがブラウザーに取られてしまいます。<br>
Chromeの「ショートカットを作成」→「ウィンドウで開く」機能を利用すると、ほとんどのショートカットを利用できるようになるほか、画面を広く使うことができるため活用してください。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a4947cd1faa2-20220710.png" alt loading="lazy" class="md-img"></p>
<p>以上</p>


VS Code Serverの使い方

トンネリングサービスを利用する

Discussion