検証環境や開発環境を立てる際、リモートからSSH繋いだり、ファイルの転送にWinSCPやFileZilla使ったり…と、接続やファイルのやり取りにいろんなアプリケーションや手順を踏む必要があってめんどくさい！ということがよくあります。
最近、VS Code Serverを開発環境のLinuxにインストールしてブラウザからアクセスするのがめちゃくちゃ捗っているので、構築手順をまとめておきます。
前提
以下手順の環境は、Ubuntu 22.04を利用しています。とはいえ、他のLinux OSでも同様の手順で問題ないと思います。
Visual Studio Code Serverのインストールと設定
以下コマンドで、VS Code Serverをインストールします。
curl -fsSL https://code-server.dev/install.sh | sh
デフォルトの設定ファイルを作成するため、以下コマンドを実行します（2024/10/18追記）
sudo systemctl enable --now code-server@<実行したいユーザ>
設定ファイルを編集し、外部からのアクセス許可 および 接続時のパスワードを設定します。上記コマンドで実行したユーザのホームディレクトリ配下にできるので、必要に応じてコマンドは修正してください。（2024/10/18追記）
vi ~/.config/code-server/config.yaml
以下を参考に編集します。
bind-addr: 0.0.0.0:1234 ←0.0.0.0にすることで外部からのアクセスを許可、デフォルトポート8080だと他のアプリケーションと被る場合があるので適当に変更 auth: password password: [初期パスワード] ←デフォルトだとランダムな長い文字列が入っているので修正 cert: false
systemdサービスとして登録されるので、自動起動設定 および 初回起動をしておきます。
自分の場合は、外部からアクセスできない環境で使用するのでrootで実行しています。（そのほうがすべてのファイルにGUI操作でアクセスできるので利便性は高い一方、セキュリティリスクは青天井になるので、実行ユーザやパスワード設定などはしっかり考慮しましょう。）
※自動起動設定
systemctl enable code-server@[実行ユーザ]
※初回起動（その他、必要に合わせてrestart, stopなど）
systemctl start code-server@[実行ユーザ]
この時点で、http://[マシンのIPアドレス]:1234/にアクセスすると、code-serverにアクセスできます。設定ファイル内で指定したパスワードを入力するとログインできます。（おそらく、ユーザ毎に設定ファイルを用意してポート分けてやれば、複数ユーザが同時に自分のホームディレクトリ配下をベースにアクセスして〜ということができるはず。自分の場合はお一人様サーバなのでやらないけれど。）
エクステンション マーケットプレイスの設定
このままの状態でも、ブラウザからファイル操作やターミナル操作ができるのですが、エクステンションマーケットプレイスから何かしら機能を追加しようとしたときに、ローカルアプリケーション（Win/Mac等）版のVisual Studio Codeでは出てきたはずのエクステンションが検索しても出てこない！という罠に陥ります。
そのため、以下のファイルを編集して、マーケットプレイスの検索サイトを登録します。
vi /usr/lib/code-server/lib/vscode/product.json
最終行一歩手前のところに、下記を追記します。
,
"extensionsGallery": {
"serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
"cacheUrl": "https://vscode.blob.core.windows.net/gallery/index",
"itemUrl": "https://marketplace.visualstudio.com/items"
}
最終行の “}” の手前のところに挿入します。
code-serverを再起動して適用します。
systemctl restart code-server@[実行ユーザ]
すると、検索結果にローカルアプリケーション版と同様のエクステンションの検索結果が出る様になりました！
