どのようにサーバー上でVSコードを実行する!


VSのコードは、Web開発のための私のお気に入りのエディタです.統合された端末、偉大なプラグインの生態系、デバッガ、優れたtypescriptのサポートは、それが完璧になります.その1つの理由私はローカル開発に戻ってくる.走っている間vim ターミナルで仕事を遠隔で、私はちょうど生産的ではないvim .
もちろん他のオプションもあります.クラウド開発はかなり大きい.ブラウザ上で完全にリモートで作業することは解放です.私のプロジェクトは、常に私のマシンからuntethered働いて準備ができています.しかし、クラウドエディタはそれぞれ独自の欠点を持っている.最終的には、端末に入り、サービスを開始して停止し、ローカルマシンからできることをすべてやりたい.リモートサーバーに直接コード対Vsコードを実行する方法があれば、両方の世界で最高です.
さて、今ある!ありがとうcode-server コーダによって.コム

cdr / code-server
ブラウザでコード
コードサーバー
ランVS Code 任意のマシンの任意の場所で、ブラウザでそれをアクセスします.

ハイライト

  • 至る所でコード
  • 一貫した開発環境であなたのChromebook、タブレットとラップトップのコード.
  • Linuxマシンで開発し、任意のデバイスからのWebブラウザを拾う.

  • サーバ
  • テスト、コンパイル、ダウンロードを高速化する大きな雲のサーバーを活用してください.
  • すべての集中的なタスクは、サーバー上で実行すると、外出先でバッテリ寿命を維持します.
  • あなたが横たわっている予備のコンピュータを利用して、それを完全な開発環境に変えてください.
  • 始める
    フルセットアップとウォークスルーのために./doc/guide.md .
    クイックインストール
    私たちはscript Linux、MacOS、およびFreeBSD用のコードサーバーをインストールします.
    できればシステムパッケージマネージャを使用します.
    インストールプロセスをプリントアウトするには
    curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

    Now to actually install:

    curl

    Getting started

    To get started, you'll need to log into your remote development server. This can be something like a Droplet from Digital Ocean, an AWS Lightsail instance, or any other cloud or internet connected server one would want to use. ssh access is needed.

    One could then log into the remote server and either run code-server in docker or just use one of their binary releases. I used the the binary distribution for my purposes

    https://github.com/codercom/code-server/releases

    Here is an example of how that might go

    mkdir ~/code-server
    wget -qO- LINK_TO_DESIRED_BINARY \
      | tar xvz --strip-components=1 -C ~/code-server
    
    The code-server バイナリにはいくつかのオプションが付属しています.この文書の時点で、私のシステム上で相対パスを与えたとき、アプリケーションには若干の障害があったようです.それで、私はbashでそれのまわりで超簡単なラッパーを書きましたcode そして、~/bin どちらが私PATH 変数.vim ~/bin/code
    #!/usr/bin/env bash
    abs=$(realpath .)
    req=$1
    if [[ ! $1 =~ ^\/ ]];
    then
      req="$abs/$1"
    fi;
    
    if [[ ! -d $req ]];
    then
      echo "ERROR: path does not exist"
      echo "$req"
      exit;
    fi;
    
    ~/code-server/code-server $req --no-auth
    
    chmod +x ~/bin/codeこのスクリプトは起動するcode-serverno-auth オプション.The no-auth オプションは、組み込みの暗号化機能とパスワード認証ページを無効にします.私はむしろプロキシサーバまたはSSHトンネルを通してトラフィックを暗号化したいので、私はこれをします.また、プロキシを接続するWebサーバーを使用してページをパスワードで保護することもできます.
    今すぐサーバーを起動するには、私は単にどのように私はVSコードを直接と同様のプロジェクトを開きます.code /path/to/projectこれはポートを介してコード対サーブを開始します8443 . そこに接続する2つの方法がありますSSHのトンネルを介して、またはWebサーバーを使用して逆プロキシ.

    SSHトンネリング/ポート推進
    SSHを使用して、ローカルクライアントにサーバーからリモートポートを転送できます.ここではどのようにフォーマットポートに見えるでしょう8443 サーバーからローカルマシンに.
    ssh -N -L 0.0.0.0:8443:localhost:8443 login@your-server \
      2> /dev/null
    
    このコマンドはあなたにリモートシェルを与えません、それはちょうどポート推進をします.今すぐあなたのブラウザと訪問を開くことができますhttp://localhost:8443 . 見よ!あなたは今あなたのブラウザからサーバー上で実行し、VSコードを使用している!

    かなり信じられないことは、端末にもアクセスできることです!これは非常に強力なものです-ので注意してください!
    つの最後の部分は、ポートのような特権のないポート上の他の実行中のサービスをプロキシにすることです3000 or 8080 . 一つの方法は、別の端末を開いて別の接続を行うことです.
    ssh -N -L0.0.0.0:3000:localhost:3000 login@your-server \
      2> /dev/null
    
    またはプロキシ
    ssh -N \
      -L 0.0.0.0:8443:localhost:8443 \
      -L 0.0.0.0:3000:localhost:3000 \
      login@your-server \
      2> /dev/null
    

    Webサーバの逆プロキシ
    注意:このオプションは、暗号化とパスワード保護を自分で処理したい場合です.
    
    BE SURE TO ENCRYPT AND PASSWORD PROTECT PUBLIC URLS.
    
    
    Webサーバ経由で逆プロキシを正しく設定することは、より関与するプロセスです.私は、あなたがこの仕事をするために必要なものの概要だけを提供します.
  • SSL証明書があることを確認してください.使用することができますcertbot 暗号化しましょう.
  • ポート8443と希望のURL間の逆プロキシを作成するWebサーバーを構成します.プロキシのWebSocketトラフィックを確認してください.
  • パスワードはURLへのアクセスを保護する
  • 私の場合、ポートのような開発目的のために実行するプロキシサービスも欲しいです3000 or 8080 .

    アパッチ
    適切なモジュールがロードされるようにする必要があります
    sudo a2enmod rewrite
    
    それから、構成はこのように始まる何かであるかもしれません
    <VirtualHost ip_address:443>
      # Enable Modules
      RewriteEngine On
      SSLEngine On
    
      # Configure basics
      ServerName your.address
      ServerAdmin [email protected]
    
    
      # Proxy Traffic
      RewriteCond %{HTTP:Upgrade} =websocket
      RewriteRule /(.*)           ws://localhost:8443/$1 [P,L]
      RewriteCond %{HTTP:Upgrade} !=websocket
      RewriteRule /(.*)           http://localhost:8443/$1 [P,L]
    
      # Require Password
      AuthUserFile /path/to/.htpasswd
      AuthGroupFile /dev/null
      AuthName "Title"
      AuthType Basic
      require valid-user
    
      # Use SSL
      Include /etc/letsencrypt/options-ssl-apache.conf
      SSLCertificateFile /etc/letsencrypt/live/yourwebsite.com/fullchain.pem
      SSLCertificateKeyFile /etc/letsencrypt/live/yourwebsite.com/privkey.pem
    
      SSLProtocol all
      SSLCipherSuite HIGH:MEDIUM
      # And so on...
    
    

    金研
    私はこれを試していないcode-server Nginxではまだ.nginxは特にこれに適しています.ここでいくつかのリファレンスを参照してください.
    暗号化トラフィックと逆プロキシw/ウェブソケット
    https://gist.github.com/steve-ng/ed6de1fa702ef70bd6ce
    パスワード保護
    https://www.digitalocean.com/community/tutorials/how-to-set-up-password-authentication-with-nginx-on-ubuntu-14-04

    その他のオプション

    レットcode-server 暗号化を扱う
    もう一つのオプションは--no-auth オプションとletcode-server それをしなさい.これがデジタル海で働くというより多くの情報のためのリソースです
    https://github.com/codercom/code-server/blob/master/doc/admin/install/digitalocean.md

    コーダーを使う.コム
    私は、そのコーダーに言及しなければなりません.COMには、このためのクラウドサービスがあります.
    https://www.coder.com

    概要
    クラウド上のランニングvsコードは、ワークステーションから開発者を解凍します.つは、プラグインをインストールし、自分の好みに合わせてエディタを構成し、可能な限り直接動作します.環境は常に、準備ができている.