要約

リモートからブラウザで自分の VSCode にアクセスしたくなり VSCode Server (code serve-web) を用いて環境を構築した
- (参考) VSCode Serverがなくなって本体に統合されていた
ブラウザでアクセスする点では serve-web と vscode.dev は近しいが (おそらく) extension に制限がない、ローカルのファイルにはアクセスできない、など使い勝手は大分異なる
codercom/code-server に近しいと思われるが純正の serve-web を選択した
serve-web をリモートに公開する際の注意点としては、
- 引数に --host を付加する
  - 付加しないとリモートからアクセスできない
- 引数に --without-connection-token を付加する
  - 代わりの認証の仕組みが必要
- HTTPS でアクセスする
  - HTTP でアクセスすると Unauthorized client refused. が発生する
使用時の注意点としては、
- Ctrl+W などブラウザに取られるショートカットを使用したい場合は他のキーを割り当てる必要がある
- "User Settings" や "Keyboard Shortcuts (keybindings.json)" がファイルに残らない様子
  - ブラウザ間で設定を共有したい場合はプロファイルのエクスポート＆インポートが使える
- Live Server 使えた

手順

前の記事に従い Docker や認証に使用する Nginx Proxy Manager の準備を行う
ココから Linux の CLI(x64) を取得する (code)
ダウンロードした code と同じディレクトリ (vscode とする ) に以下のような Dockerfile を作成する

FROM node:latest

ENV HOME=/home/vscode
WORKDIR ${HOME}

ADD code /usr/bin/code
RUN chmod 500 /usr/bin/code

# 必要なものを適宜追加
RUN npm install -g typescript

# --hostを指定しないと外部からアクセスできない、portはcommand(CMD)で外から渡す
ENTRYPOINT ["/usr/bin/code", "serve-web", "--accept-server-license-terms", "--without-connection-token", "--host", "0.0.0.0", "--port"]

ビルドする

docker build --rm=true -t=vscode vscode

以下のような docker-compose.yml を作成して docker compose up -d

version: '3.8'
services:
  app:
    image: 'jc21/nginx-proxy-manager:latest'
    restart: unless-stopped
    ports:
      - '80:80'
#      - '81:81'
      - '443:443'
    volumes:
      - ./data:/data
      - ./letsencrypt:/etc/letsencrypt
# ここから Quick Setup に無い定義
    depends_on:
      - vsnode
  vsnode:
    image: 'vsnode'
    restart: unless-stopped
    command: '8000'
    volumes:
      - ./vscode:/home/vscode

前の記事に従い HTTPS や Basic 認証の設定を行う
ブラウザでアクセスできることを確認する
適宜プロキシの設定を加えた後に、 Live Server も使えることを確認する
以上です

コンテナ上の VSCode にリモートからブラウザでアクセスする (または vscode.dev 的なものをセルフホストする話 )

要約

手順