要約
- リモートからブラウザで自分の VSCode にアクセスしたくなり VSCode Server (code serve-web) を用いて環境を構築した
- ブラウザでアクセスする点では 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 も使えることを確認する
- 以上です