feature image

2022年11月27日 | ブログ記事

Chromebook&VSCode Server(プレビューアクセスなし)で開発環境を作る

この記事はアドベントカレンダー2022の3日目の記事です。

TL;DR

自宅のデスクトップPC上でローカルモードで起動しているVSCode Serverに、出先でChromebookから接続して開発を行えるようにしました。

背景(読み飛ばしてOK)

この夏、長らく愛用していたMacBook Proが主にバッテリー周りを中心に挙動が不安定になってしまったので、PCを新調することにしました。
快適な開発のために強いマシンが欲しい&PCゲームをしたいということでWindowsのデスクトップPCを選択。
WSL2(以下WSL)上に開発環境を構築し、Steamと原神をインストールして無事最高な環境が完成しました。

しかしデスクトップPCである以上、かつてのMacBook Proのように外に持ち出せません。
情報工学徒たるもの、PCを持たずに外出するということはありえません。[1]
外でコーディングをしたくなったとき、ちょっとサーバーを覗きたくなったとき、一体どうするのでしょうか?
最近はスマホやタブレットでコーディングやSSH接続をするアプリなども存在はしていますが、普通に作業をするにはかなりつらいです。

ということでノートPCも買わざるを得ないのですが、デスクトップPCにお金を使ってしまったのであまり予算がない、開発環境はデスクトップPC上の1つだけに集約しておきたい、などの個人的な条件がありました。

そんな最中、VSCode Serverがプレビュー版としてリリースされました。
これによりChromeが動くノートPCさえあれば、安全&簡単にデスクトップPC上の開発環境にアクセスして開発作業が行えます。
Chromeさえ動けばいいわけなので、ノートPCは数万円のChromebookで十分です。
さあ、これで完璧! あとはVSCode Serverのプレビューアクセスが付与されるのを待つだけ――!

が、2ヶ月待ってもプレビューアクセスが付与されません。
夏休みが終わると対面授業が始まります。PCなしでの受講などとてもできません。[2]

ということで、プレビューアクセスなしでも使えるローカルモードを使用した構成を独自で構築することにしました。


  1. 諸説あります ↩︎

  2. 系や授業によります ↩︎

使用するChromebook

購入したChromebookはこれです。

ASUS Chromebook C425
ASUS Chromebook C425TAは、大きめでタッチ対応の14型ディスプレイと打ちやすい英字キーボードを備え、インテル® Core™ プロセッサーと最大8GBのメモリを搭載しているので、快適に作業することができます。

メモリ8GB、ストレージ64GBという、Pixel 7以下のミニマムで可愛らしいスペックです。

今回の構成はChromeが快適に動作するスペックであれば問題ありません。
おそらくメモリ4GBでも可能かと思われます。

以下の条件を満たしていたのでこのChromebookを選択しました。

キーボードがUS配列であることはかなり優先度が高い条件としていたのですが、日本で市販されているものではかなり種類が限られているらしく他に数種類しか選択肢がありませんでした。

VSCode Server

Visual Studio Code Server
Using Visual Studio Code Server

2022年11月27日現在、まだプレビューとしてのリリースのみが行われており、code-server CLIというcode CLIとは独立したCLIとして提供されています。

現在コマンド名であるcode-serverで調べると、別のcode-serverの記事も多くヒットします。

coder/code-server: VS Code in the browser

このcode-serverはCoder社が開発している別物です。
VSCode Serverが公式でリリースされる以前から提供されていた、VSCode Serverのローカルモードと似たようなことができるツールですが、MicrosoftのExtention Marketplaceが使用できないなどの違いがあります。
https://coder.com/docs/code-server/latest/FAQ#why-cant-code-server-use-microsofts-extension-marketplace

VSCode Serverのリリース以前の記事はだいたいこれについてのものなので、情報を混同しないように注意しましょう。

WSLへのインストール

wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

https://code.visualstudio.com/blogs/2022/07/07/vscode-server#_getting-started

ローカルモードでの起動

code-server serve-local

デフォルトではポート8000で立ち上がります。
実行後に表示されるhttp://localhost:8000/?tkn={トークン文字列}をブラウザで開くと、見慣れたVSCodeの画面が確認できます。

VSCode Serverの画面

Tailscale

外からのデスクトップPCへの接続はVPNを介して行いたいので、簡単にVPN接続ができるツール Tailscaleを使用します。

Tailscale
Tailscale is a zero config VPN for building secure networks. Install on any device in minutes. Remote access from any network or physical location.

東工大の学内で使用する人へ

東工大WifiではP2Pを用いた通信が制限されており、検知された場合はアカウントの停止などの処置が取られることがあります。[1]
https://www.noc.titech.ac.jp/service/policy_violation.shtml

TailscaleではP2P通信が使用されているため、この制限の対象となる可能性があります。
How Tailscale works · Tailscale

Tailscaleを学内で使用したい場合はテザリングをするか、学内で飛んでいる他のWifiを使うようにしましょう。
学内ネットワークの利用 - GIR 日本語


  1. 制限の本来の対象はP2Pベースのファイル交換ソフトウェアですが、他のP2Pベースのソフトウェアも検知の対象となる可能性があるため極力使用を避けましょう ↩︎

WSLでのセットアップ

Tailでのアカウントを作成した後、WSLへのインストールを行います。
Tailscale quickstart · Tailscale

curl -fsSL https://tailscale.com/install.sh | sh

tailscaleを起動し、ブラウザで認証を行います。

sudo tailscale up --operator={WSLでのユーザー名}

起動に成功すると、以下のコマンドで端末に対して割り振られたプライベートIPアドレスを確認できます。

tailscale ip -4

IPアドレスの割り当てと接続の状況はadmin consoleでも確認することができます。

Tailscaleのadmin console

本来はTailscaleの機能で既にhttp://{TailscaleでのIPアドレス}:8000でVSCode Serverにアクセスできるようになっているはずなのですが、VSCode Server側でアクセス元の制約をかけているのか接続ができません。
なので、SSH接続をして8000番をポートフォワーディングすることにします。

Tailscale SSH

Tailscaleが提供しているSSH用の機能です。

Tailscale SSH
Use Tailscale SSH to manage the authentication and authorization of SSH connections on your tailnet.

これを用いることで、SSH用にポートを開けたりすることなくSSH接続が可能になります。

WSL上でTailscaleのSSHサーバーを起動します。

tailscale up --ssh

TailscaleのSSHサーバーが起動している端末は、admin console上で緑のSSHラベルが表示されます。

Tailscaleのadmin console (SSHサーバー起動後)

Chromebookからアクセスする

ChromebookへのTailscaleの導入

TailscaleはChromebook用のバージョンは提供されていませんが、Androidアプリはリリースされています。
Chromebookでは多くのAndroidアプリが使用でき、それはTailscaleも例外ではありません。

PlayストアからTailscaleをインストールします。

Tailscale - Playストア

Tailescaleアプリを起動し認証を行います。
その後、上部のトグルでStoppedからActiveに変更します。

Tailscaleアプリ (Stopped)
Tailscaleアプリ (Active)

これでChromebookからTailscaleのVPNネットワークへの接続ができるようになりました。

ChromebookからSSH接続をする

SSH接続にはChromeの拡張機能を使用します。

Secure Shell
Terminal emulator and SSH and SFTP client.

Chrome上の拡張機能のボタンから、Connection Dialogを開きます。

Secure Shellの拡張機能の選択肢

以下のようにWSLのユーザー名とTailscaleのIPアドレス、SSH引数を入力して接続をクリックします。

Secure ShellのConnection Dialog

ブラウザで認証を行うと、8000番をポートフォワーディングした状態でのSSH接続が確立します。

ChromebookでVSCode Serverを開く

http://localhost:8000を開くとVSCode Serverに接続できます。

Chromebookで開いたVSCode Serverの画面

これで晴れて、ChromebookからWSL上の開発環境にアクセスしての開発が行えるようになりました!

このままブラウザ上の1ページとして使用するとブラウザのショートカットキーの衝突が発生するので、PWAとして使用するのがおすすめです。

ショートカットキーの割り当ての変更(USキーボード用)

USキーボードのChromebookでは、日本語↔英語などの入力ソースの切り替えにCtrl + Spaceを使用します。
これがVSCode Server上での候補をトリガーというコマンドのキーバインドと衝突しているため、エディタ上で入力ソースの切り替えができないという問題がありました。

このコマンドのキーバインドの割り当ての変更、またはこのショートカットの削除を行うことをオススメします。

キーボードショートカット設定 (変更前)
キーボードショートカット設定 (変更後)

VSCode Serverを常時起動させる

現状では、WSL上でcode-server serve-localが実行されている間はChromebookから接続して開発を行える、という状態です。
都度そのコマンドを実行するのは面倒なので、以降ではデスクトップPCが起動している間は常にVSCode Serverが立ち上がっているようにしていきます。

systemdで動かす

最近WSLでsystemdに対応したので、VSCode Serverもsystemdで動かすことにします。
systemdを有効化していない人は、この記事に従って有効化してください。

Systemd support is now available in WSL!
Systemd support is now available in WSL! The Windows Subsystem for Linux (WSL) can now run systemd inside of your WSL distros, empowering you to do more with your Linux workflows on your Windows machine. This post will cover: What is systemd?

/etc/systemd/system/code-server.serviceを作成します。

/etc/systemd/system/code-server.service[Unit]
Description=VSCode Server

[Service]
ExecStart=code-server serve-local --without-connection-token
Restart=always
Type=simple
User={WSLのユーザー名}

[Install]
WantedBy=multi-user.target

--without-connection-tokenはトークンによる認証なしでVSCode Serverへの接続を許可するオプションです。
今回はTailscaleで既に認証を行っているので、利便性の観点でこのオプションを使用しています。

設定を読み込んで起動します。

sudo systemctl daemon-reload
sudo systemctl start code-server
sudo systemctl enable code-server

これで、WSLが起動している間はVSCode Serverが立ち上がり続けるようになりました。

WSLの自動起動

通常、WSL上でデーモンが稼働していてもターミナルを閉じてしまうとWSL自体が終了してしまうようです。

Windowsの起動時にWSLが自動で起動し、またターミナルの使用の有無に関わらず起動し続けるようにします。

WSLの常時起動により、ある程度のリソースを使用し続けることになります。
この設定をするかはPCのスペックと相談して決めましょう。

my-auto-start.vbsを作成します。現時点ではWindowsのどのディレクトリに配置しても構いません。

my-auto-start.vbsDim WShell
Set WShell = WSCript.CreateObject("WScript.Shell")
WShell.Run "wsl.exe", 0
Set WShell = Nothing

Windowsキー + Rキーで立ち上がるファイル名を指定して実行shell:startupを入力してOKボタンを押します。

ファイル名を指定して実行

立ち上がったエクスプローラーで開かれたディレクトリにmy-auto-start.vbsを移動させ、Windowsを再起動します。

以降、Windowsを起動する度にWSLもバックグラウンドで起動されるようになります。
これにより、TailscaleによるWSLへの接続も、VSCode Serverへの接続もいつでも行うことができます。

参考:
WSLのApache/MySQL(MariaDB)をWindows起動時に自動起動させる [WSL/Ubuntu環境]

この環境の感想

標準的な開発作業は問題なく行えました。
ポートフォワーディングの対象を追加することでWebアプリのデバッグも問題なく行えます。

ちょうどRustの入門もしたかったのでこの環境で試したのですが、公式のチュートリアルもrustlingsも問題なく進められました。

とはいえ、一部不便な箇所がありました。
まず、PDFのビュアーが使用できませんでした。

VSCode ServerでのPDFビュアー

このビュアーは別のポートで立ち上げたものを読み込んで表示する仕様になってたりするんですかね。そのポートをポートフォワーディングしない限りは表示できなさそうです。
http-serverでPDFがあるディレクトリを対象にHTTPサーバーを立てて、そのポートをポートフォワーディングしてブラウザで表示する、といった対処をしました。

そしてこれはローカルモードかに関わらずVSCode Server全体のことなのですが、通常のVSCodeの機能・拡張が全て使えるわけではありません。
VSCode Webがベースなので、Dev ContainersなどのVSCode Webに未対応の機能・拡張機能はほぼ同様に使用できません。

おわりに

この環境を使い始めて1週間後にプレビューアクセスが付与されました。

プライベートプレビューの対象に追加されたお知らせ

が、未だにこのブログのローカルモードのVSCode Server + Tailscaleの構成を使っています。

vscode.devを使っての本来のモード、現状ファイルやディレクトリを開く処理が結構重いんですよね。
サクサク挙動のVSCode Serverを使うことに慣れてしまったので、その重さがストレスで乗り換えることができませんでした。

まだプレビュー版である以上これから改善される可能性は大いにあると思うので、それを期待したいと思います。

アドベントカレンダーの次回の担当は@Rasです。

oribe icon
この記事を書いた人
oribe

お絵かきする時間が欲しい

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2022年12月19日
2020春ハッカソン参加記 4班『外郎集め』【AdC 2022 25日目】
kashiwade icon kashiwade
2022年12月15日
明日香......好きだ............
mera icon mera
2022年12月12日
Unityで†リアルタイムな†AR文字認識ゲームが作れなかった話(tesseractを使用)
Hinaruhi icon Hinaruhi
2022年12月5日
VRChatの環境を構築しよう!外部ツールやゲーム内設定まとめ
pikachu icon pikachu
2022年12月5日
Storybook使ってみた
mehm8128 icon mehm8128
2022年12月22日
ドイツのカップ麺を制覇してみた
toruthi icon toruthi
記事一覧 タグ一覧 Google アナリティクスについて