LoginSignup
2
2

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

Posted at

要約

  • リモートからブラウザで自分の VSCode にアクセスしたくなり VSCode Server (code serve-web) を用いて環境を構築した
  • ブラウザでアクセスする点では serve-web と vscode.dev は近しいが (おそらく) extension に制限がない、ローカルのファイルにはアクセスできない、など使い勝手は大分異なる
  • codercom/code-server に近しいと思われるが純正の serve-web を選択した
  • serve-web をリモートに公開する際の注意点としては、
    • 引数に --host を付加する
      • 付加しないとリモートからアクセスできない
    • 引数に --without-connection-token を付加する
      • 代わりの認証の仕組みが必要
    • HTTPS でアクセスする
  • 使用時の注意点としては、
    • 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 認証の設定を行う
  • ブラウザでアクセスできることを確認する
    • vscode1.png
  • 適宜プロキシの設定を加えた後に、 Live Server も使えることを確認する
    • live1.png
  • 以上です
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2