code-server リモート vscode Web ページをデプロイし、ブラウザーでコードを記述します!

参考資料 https://developer.aliyun.com/article/876967#slide-7

この記事は、 Mu

1.コードサーバーとは？

これは、vscode ソフトウェアを Linux システム (Windows と同じ vscode クライアント) にインストールするためのものではないことに注意してください。

オープンソースウェアハウス https://github.com/coder/code-server

code-server はコミュニティプロジェクト (マイクロソフトの公式ではありません) であり、その機能は、公式と同様に、Linux ホスト (クラウドサーバー) のブラウザーでアクセスできる vscode ページを展開することです。vscode.dev

Microsoft の公式 vscode Web バージョン https://vscode.dev/

ブラウザの api を介してコンピュータ上のローカルファイルにアクセスでき、現時点ではブラウザは vscode クライアントです。

コードサーバーは同じで、Linux サーバー上のファイルにアクセスし、その機能は vscode プラグインに似ているため、ブラウザーを使用して、vscode クライアントをダウンロードすることなく、任意のコンピューターまたはタブレットでリモート開発を実行remote sshできます。またはsshソフトウェア！

画像-20230309223145036

1.1 公式 vscode サーバー?

Microsoft には公式の vscode-server があり、公式 Web サイトからダウンロードできます。テストしたところ、トンネルであり、vscode.devサブドメイン名を介したアクセスがホストに転送されることがわかりました。

画像-20230309230334118

ここでのテストでは、Microsoft のサーバーにまったく接続できないことがわかりました。vscode-server のドキュメンテーションページには中国語すらありませんし、Microsoft のサーバーもあるため、中国では使用されないことが予想されます。

2. インストール

2.1 インストールパッケージのダウンロード

この記事の執筆時点で23-03-09、code-server の最新バージョンはです4.10.1。次のコマンドを使用して、Linux でインストールパッケージを取得できます。

wget https://github.com/cdr/code-server/releases/download/v4.10.1/code-server-4.10.1-linux-amd64.tar.gz

上記のコマンドにアクセスできない場合は、github のリリースでインストールパッケージを手動でダウンロードできます。

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

私のシステムは、x86 アーキテクチャである amd64 です。linux amd64パッケージは、インストール用のgithub にもあります

$ uname -a
Linux 1c2261732150 5.10.120 #0 SMP Fri Jan 6 08:05:47 2023 x86_64 x86_64 x86_64 GNU/Linux

Raspberry Pi などのデバイスを使用している場合は、uname -aシステムアーキテクチャを確認し、対応するパッケージをダウンロードしてください。

githubのリリースダウンロードが遅いので、以下のサイトで高速化できます（Thunderでダウンロードすると速度がでます）

https://doget.nocsdn.com/#/

ダウンロードが完了したら、圧縮されたパッケージを xftp でサーバーに転送します

2.2 解凍

次のコマンドを使用して、ダウンロードしたばかりの圧縮パッケージを解凍します

tar -zxvf code-server-4.10.1-linux-amd64.tar.gz

解凍したフォルダーの短い名前を vsc に変更します。

mv code-server-4.10.1-linux-amd64 vsc

このフォルダに cd します

cd vsc

ls -l、基本ファイルは次のとおりです

total 792
drwxr-xr-x   8 muxue muxue   4096 Mar  4 12:26 .
drwx------   6 muxue muxue   4096 Mar  9 22:42 ..
drwxr-xr-x   2 muxue muxue   4096 Mar  4 12:26 bin
drwxr-xr-x   3 muxue muxue   4096 Mar  4 12:26 lib
-rw-r--r--   1 muxue muxue   1084 Mar  3 17:13 LICENSE
drwxr-xr-x 243 muxue muxue  12288 Mar  4 12:26 node_modules
-rw-r--r--   1 muxue muxue 480100 Mar  4 12:26 npm-shrinkwrap.json
drwxr-xr-x   5 muxue muxue   4096 Mar  3 17:13 out
-rw-r--r--   1 muxue muxue   5235 Mar  4 12:24 package.json
-rwxr-xr-x   1 muxue muxue   4877 Mar  3 17:13 postinstall.sh
-rw-r--r--   1 muxue muxue   3056 Mar  3 17:13 README.md
drwxr-xr-x   3 muxue muxue   4096 Mar  3 17:14 src
-rw-r--r--   1 muxue muxue 180977 Mar  3 17:13 ThirdPartyNotices.txt
drwxr-xr-x   2 muxue muxue   4096 Mar  3 17:14 typings
-rw-r--r--   1 muxue muxue  76688 Mar  4 12:26 yarn.lock

bin フォルダーに直接移動します。必要な実行可能ファイルはその中にあります

$ ls
code-server

これがcode-server必要な実行可能ファイルです

2.3 コードサーバーの起動

export PASSWORD="配置一个密码"
code-server --port 8888 --host 0.0.0.0 --auth password

上記のコマンドは、開始後、ポート 8888 で Web サービスを作成します。ip:8888この時点で使用する方法で、コードサーバーサービスにアクセスできるはずです。

[2023-03-09T14:52:07.081Z] info  Wrote default config file to ~/.config/code-server/config.yaml
[2023-03-09T14:52:07.516Z] info  code-server 4.10.0 ac1fba8bde0c3f29bf6bc27d3d7d75cb2390a7c2
[2023-03-09T14:52:07.517Z] info  Using user-data-dir ~/.local/share/code-server
[2023-03-09T14:52:07.532Z] info  Using config file ~/.config/code-server/config.yaml
[2023-03-09T14:52:07.532Z] info  HTTP server listening on http://0.0.0.0:8888/
[2023-03-09T14:52:07.532Z] info    - Authentication is enabled
[2023-03-09T14:52:07.532Z] info      - Using password from $PASSWORD
[2023-03-09T14:52:07.532Z] info    - Not serving HTTPS

以下のページが表示されたらインストール成功です！先ほど設定したパスワードを入力すると、vscode のような code-server を使用できます!

画像-20230309225342649

2.4 設定ファイル

.config/code-server初めて起動すると、フォルダーがユーザーパスの下に生成されます。config.yaml

$ ls .config/code-server
config.yaml

このファイルを開くと、code-server パスワードと https アクセスを設定できます。残りの構成項目には注意を払っていません。github のドキュメントにアクセスできます。

bind-addr: 127.0.0.1:8080
auth: password
password: 64f1881b805917a449d80874
cert: false

デフォルトのパスワードは非常に長いので、自分のパスワードに変更してください。ここで、デフォルトのバインドされた IP とポートを変更して、コードサーバーを起動することもできます。手動で指定する必要はなく、直接実行するだけです。

./code-server

2.5 tmux バックグラウンド実行中

コードサーバーを実行しているnohupには少し問題があるため、tmuxを使用してください

このソフトウェアをお持ちでない場合は、最初にインストールしてください

sudo yum install tmux

新しいセッションを作成します。これは bash から独立したシェルページであることがわかります。現在の bash が終了しても、code-server は終了しません。

tmux new -s vscode_online

新しいセッションを開いた後、vsc の bin ディレクトリに入り、code-server を起動、コマンドは変更なし

./code-server

画像-20230310082417260

次に、現在の bash を直接閉じます。この時点で、code-server のバックグラウンド操作が実現されています。

# 接入会话
tmux a -t vscode_online

# 结束会话
tmux kill-session -t vscode_online

3. いくつかの質問

3.1 nginx 転送で 1006 エラーが発生する

nginx 転送を使用しているときにこの問題が発生しました

画像-20230309221146320

個人的な推測ですが、これはおそらく私がconfig.yaml設定したcode-serverhttpsが原因です

cert: false # 关闭https

cert を false に戻し、もう一度テストしてみてください。この問題がまだ残っていることを確認してください。

実際、nginx を転送する場合は、code-server https を構成する必要はありません。

デフォルトの http のままにします

後で、nginx の転送設定に問題があることがわかりました. 正しい転送設定は次のとおりです.

location / {
	proxy_pass   http://127.0.0.1:8888;
	proxy_set_header Host $host;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection upgrade;
	proxy_set_header Accept-Encoding gzip;
}

nginx https の完全な構成ファイルを以下に示します。

server {
    listen 443 ssl;
    server_name  www.example.com;  # 域名
    # 注意证书文件位置，是从/etc/nginx/下开始算起的
    ssl_certificate cert/example.com.crt; 
    ssl_certificate_key cert/example.com.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    client_max_body_size 1024m;

    location / {
       	proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
        # 当下是直接用yum安装的nginx，可以直接用本地ip访问
        # 如果是docker安装的nginx，需要改为公网ip
        proxy_pass http://127.0.0.1:8888;
    }
}
# 强制重定向http -> https
server {
    listen 80; # 监听80端口
    server_name  www.example.com;  # 域名
    #把http的域名请求转成https
    return 301 https://$host$request_uri; 
}

3.2 C/C++ プラグイン

code-server はサードパーティのプロジェクトであるため、一部の公式プラグイン (pylance など) は code-server プラグインストアで直接見つけることはできません。

Microsoft の vscode 公式 Web サイトにアクセスして、プラグインの VSIX ファイルをダウンロードし、ローカルファイルを使用してインストールする必要があります。

https://marketplace.visualstudio.com/VSCode

画像-20230309230141057

ただし、pylance はこの方法ではまだインストールできません。一部のプラグインは公式の vsc でしかインストールできないようです

3.3 ローカルファイル

vscoderemote-sshプラグインを使用してサーバーに接続した場合、ユーザーディレクトリの下に 2 つのフォルダーが作成されます。

.vsc
.vscode-server

これら 2 つのフォルダーは vscode プラグインによって生成されremote-ssh、この記事でインストールするコードサーバーとは関係ありません。

3.4 tmux 共通ステートメント

tmux new　　创建默认名称的会话（在tmux命令模式使用new命令可实现同样的功能，其他命令同理，后文不再列出tmux终端命令）

tmux new -s mysession　　创建名为mysession的会话

tmux ls　　显示会话列表

tmux a　　连接上一个会话

tmux a -t mysession　　连接指定会话mysession

tmux rename -t s1 s2　　重命名会话s1为s2

tmux kill-session　　关闭上次打开的会话

tmux kill-session -t s1　关闭会话s1

tmux kill-session -a -t s1　　关闭除s1外的所有会话

tmux kill-server　　关闭所有会话

【Linux】ブラウザでコードを書こう！コードサーバーのリモート vscode Web ページをデプロイする

1.コードサーバーとは？

1.1 公式 vscode サーバー?

2. インストール

2.1 インストールパッケージのダウンロード

2.2 解凍

2.3 コードサーバーの起動

2.4 設定ファイル

2.5 tmux バックグラウンド実行中

3. いくつかの質問

3.1 nginx 転送で 1006 エラーが発生する

3.2 C/C++ プラグイン

3.3 ローカルファイル

3.4 tmux 共通ステートメント

おすすめ

【Linux】ブラウザでコードを書こう！コードサーバーのリモート vscode Web ページをデプロイする

1.コードサーバーとは？

1.1 公式 vscode サーバー?

2. インストール

2.1 インストール パッケージのダウンロード

2.2 解凍

2.3 コードサーバーの起動

2.4 設定ファイル

2.5 tmux バックグラウンド実行中

3. いくつかの質問

3.1 nginx 転送で 1006 エラーが発生する

3.2 C/C++ プラグイン

3.3 ローカルファイル

3.4 tmux 共通ステートメント

おすすめ

2.1 インストールパッケージのダウンロード