FreeBSD で Visual Studio Code をつかう

# 概要

Visual Studio Code (以下VSCode)は FreeBSDをサポートしていませんが、FreeBSDの[Linuxバイナリ互換機能](https://docs.freebsd.org/ja/books/handbook/linuxemu/)で、VSCodeのサーバーを実行することができます。
この記事ではVSCodeサーバを起動しクライアントから使用する方法を2つ紹介します。

<dl>
  <dt>SSHでの接続</dt>
  <dd>ssh で接続する方法です。クライアントとサーバーが同じネットワークの時におすすめです</dd>
  <dt>リモートトンネルでの接続</dt>
  <dd>比較的簡単ですが、GithubかMicrosoftアカウントが必要です。インターネット経由での接続になります。</dd>
</dl>

以下のバージョンで動作確認しました。
サーバー側: FreeBSD 14.2 
クライアント側: VSCode 1.98.2 (Windows / Linux)

# SSHでの接続方法

クライアントからSSHで接続します。VSCodeのサーバー側は自動的にダウンロードされます。FreeBSDサーバーではsshdが動作している必要があります。
```mermaid
graph
    subgraph FreeBSDサーバー
        S[VSCode Server]
    end 
    subgraph クライアント
        C[VSCode] -->|ssh| S
    end
```

## SSH接続：FreeBSDサーバーの設定

Linux互換機能(Linuxulator)を有効化し、Rocky Linux 9 互換のパッケージを導入します。
root権限で行ってください。
``` 
pkg install linux-rl9-libsigsegv
service linux enable
service linux start
```

Windows版VSCodeを使用する場合、VSCodeを使いたいユーザーにて、.cshrcの最後に下記を追加します。非インタラクティブモードの時にshはLinux互換モードで実行されるようにします。
~/.cshrc
```sh
if (! $?prompt) then
        alias sh /compat/linux/usr/bin/sh
endif 
```
:::note warn
ログインシェルがcshを前提としています。場合によっては既存のスクリプトに影響あるかもしれません
:::

## SSH接続：クライアント側VSCodeでの操作

.ssh/configにFreeBSDサーバーの情報を追加します。別途秘密鍵、authorized_keyを設定してパスワード不要にすることもできます。
Windows: `%USERPROFILE%/.ssh/config`
Linux: `$HOME/.ssh/config`
```
HOST [構成名]
    user [ユーザー名]
    hostname [サーバー名]
    RemoteCommand /compat/linux/usr/bin/bash
```

VSCodeで Remote-SSH 拡張機能をインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/cc210414-4938-4902-bb9f-a669ce9d4a4c.png)

Ctrl+Shift+Pを押し「Remote-SSH: Settings」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/589c62c8-32f1-46b5-9589-65d086f89ee0.png)

Remote.SSH: Enable Remote Command にチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/aef969f2-7071-47e1-a602-b1e7407d2c46.png)

左下の [><] アイコンをクリックし、[ホストに接続する...]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/18faca53-788e-48f8-bc61-b651799104dd.png)

.ssh/configの内容から接続先が表示されます。FreeBSDサーバーを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/85de55dd-7bb2-45dc-97e1-fe4d917fe817.png)

(Linuxの場合)パスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/ad535acb-1121-4f53-a45f-bc1c0386504f.png)

(Windowsの場合)接続先のOSを聞かれるので、[Linux]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/dc93b7b5-7cdd-4f86-b1dc-86436a46a477.png)

(Windowsの場合)detailsをクリックして、パスワードを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/26c7bfff-a2ce-498f-9e2f-4cfa3198a17f.png)

接続が完了すると、左下に[SSH: サーバー名]と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/117fa9a4-365b-4c39-a157-ccaf9165930d.png)

次回以降、コマンドプロンプトから下記コマンドで接続し特定のフォルダを開くようにできます。
server1 のところは、.ssh/configに設定した構成名に変更します。
```bat
code --remote ssh-remote+server1 /home/test1
```

# リモートトンネルでの接続
Microsoftの開発トンネル機能を使用するものです。

```mermaid
graph 
    subgraph クライアント
        C[VSCode] 
    end
    subgraph FreeBSDサーバー
        S[VSCode Server]
    end 
    subgraph Microsoft 開発トンネル
        Cloud[vscode.dev]
    end 
    S -->|https| Cloud
    C -->|https| Cloud
```

## リモートトンネル：FreeBSD側の設定

Linux互換機能(Linuxulator)を有効化し、Rocky Linux 9 互換のパッケージを導入します。
root権限で行ってください。
```
pkg install linux-rl9-libsigsegv
service linux enable 
service linux start
```

VSCodeを使用したいユーザーでVSCodeのLinux CLI をダウンロードし、code tunnel を起動します。
```sh
curl -LOJ https://update.code.visualstudio.com/latest/cli-linux-x64/stable
tar zxvf vscode-cli-linux-x64-stable.tgz
./code tunnel
```

初回実行時はGithubかMicrosftアカウントの認証が必要です。ここではGithubでの例を説明します。

どちらのアカウントを使用するか聞かれますので、カーソルキーでGithubを選択しEnterを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/0881418d-7f8b-4a2b-87fc-803bd2b04d90.png)


ブラウザで https://github.com/login/device/ を開き、Githubアカウントでのログインをしたあと赤枠部分のコードを入力します。VSCodeから接続を承認するかということをきかれますので承認操作をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/b73949e1-ea1d-452d-82e0-634c90d06cb1.png)

承認操作をすると、サーバー名を入力するように求められます。変更なければそのままEnterで問題ありません。このサーバー名をクライアントから接続するときに使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/a67b2358-4a30-49ad-bf33-37317f9e9169.png)

表示されるURLにアクセスすることでブラウザから利用もできます。

## リモートトンネル：クライアント側の操作

VSCodeを起動し、左下の[><]をクリックし、tunnelを選択します。自動的に拡張機能がインストールされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/75f069b8-dddb-488e-847b-2fdd827dbdd5.png)

サーバー認証に使用したアカウントを選択します。今回はGithubを選択します。Githubへログインしていなければログイン画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/ca84d669-b5a5-428b-8aa1-4ede5dfffcc2.png)

接続できるサーバーが表示されますので、先ほどのサーバー名を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/81ba8399-c374-479d-a033-12e5f283ad52.png)

しばらくすると接続が完了します。左下にサーバー名が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236432/6e716f24-c3c4-486b-bc03-c6f3652bca71.png)

# 補足

- 現時点で、Windows版VSCodeでは、EnableRemoteCommand設定が効かないようです。今後のバージョンで動作が変更されるかもしれません

# 参考リンク

下記リンク先の情報をもとに、自身で確認して記事を作成しました。クライアントがMacOSの場合は確認していません。

https://group.miletic.net/en/blog/2024-06-14-how-to-run-visual-studio-vs-code-remote-over-ssh-on-freebsd-13-and-14/

https://github.com/morganwdavis/vscode-server-freebsd

https://qiita.com/informationsea/items/5c9f05c81a41fb885460

https://qiita.com/ttrace/items/0776f07bb3bde9183924