【转载】Vscode网页版Linux搭建教程

da11

Vscode网页版Linux搭建教程

转载地址：https://zhuanlan.zhihu.com/p/379632978、http://ccchin.qicp.vip/2022/12/20/vscode-server/、https://blog.csdn.net/zlcx6/article/details/125299802、https://blog.csdn.net/weixin_42434700/article/details/124248410

前言
上课想练练数据结构与算法？或者就是想玩玩儿Vscode？或者有一个自己的服务器，但是觉得没有利用到极致？那么这篇文章将带你搭建一个在线版的Vscode，利用浏览器实现全平台使用Vscode，管你什么手机，Pad，电脑，板砖，咳咳，整就完了！！！
文章中所有的超链接都是很不错的资源，建议都要仔细看看，为了不让文章那么太长，所以我用了不少超链接。
本文搭建环境：开源项目code-server，一台服务器（至少一核2G才能有比较流畅的效果）



（一）运行效果




这个Vscode在线版是运行在我买的阿里云学生机的9999端口的，毕竟9.9一月，对于学生党很友好，我的个人博客也搭在上面的，性能一般，但是也很够用了。

（二）基础配置
1 - 下载code-server到服务器上
进到服务器的SSH中，这个只要你买了服务器应该都可以用SSH的，服务器还没买的，建议百度下各种公有云，这里不再赘述。

从官网下载code-server包

1. wget https://github.com/cdr/code-server/releases/download/v3.10.2/code-server-3.10.2-linux-amd64.tar.gz

复制代码

这一步下载速度可能会很慢（外网），甚至中途失败，可以考虑挂代理，代理同不赘述。

2 - 解压安装试运行（运行部分可以先不弄，下一步的更好用）
解压
tar -xvzf code-server-3.10.2-linux-amd64.tar.gz

可以改个名
mv code-server-3.10.2-linux-amd64 code-server



运行试下（建议先看下参数列表）（不建议使用root启动，应该以其他用户启动）

1.cd code-server

2.export PASSWORD="你想设置的密码"

3../code-server --port 9999 --host 0.0.0.0 --auth password


–port 9999 指定端口，缺省时为 8080
–host 0.0.0.0 允许公网访问，缺省时为 127.0.0.1，只能本地访问
–auth password 指定访问密码，可通过 export 命令设置，参数为 none 时不启用密码



可以看一下参数列表
./code-server --help





运行后，打开 Chrome 访问“服务器公网IP:端口”，效果图：




（三）高级配置
1.我们都知道Linux是可以写shell脚本的，那么为了简化以上操作，也为了让其根据我们意愿后台运行或者终止，我们着手写两个脚本，start.sh和shut.sh(脚本是要写在code-server目录的奥)
脚本执行目标

start.sh 目的
开启code-server，后台运行该进程
记录当前进程的PID，也专门记录一个日志log文件便于以后查看
将PID存到文件里面


start.sh
#! /bin/bash
export PASSWORD="412523"
nohup ./code-server --port 9999 --host 0.0.0.0 --auth password > test.log 2>&1 &
echo $! > save_pid.txt


shut.sh目的
读文件中的PID
杀死进程

shut.sh
#! /bin/bash
kill -9 'cat save_pid.txt'


2.VSCode server服务自启动


因为VSCode server不能使用root用户启动, 故不能使用 /etc/rc.local来启动. 可以使用 crontab来设置其自启动. 使用 crontab -e打开crontab配置文件, 在其末尾另起一行加入:

@reboot ./xxx/start.sh(第一步编写的start脚本)


（四）Ios端/IpadOS端的最佳使用方式
本来配置完以上，我们用任何设备，只要用浏览器就可以使用了，但是Ios端和IpadOS端有一个可以更加沉浸体验的软件，推荐给大家





以下是使用方法：











选好点Save就可以了，访问效果就如第一步运行效果的图。


（五）安全性问题，使用Nginx代理且增加https证书
因为VSCode server最初是以http的方式访问的，有些https功能没有权限使用，且涉及安全传输原因，需要增加https证书。但又因为VSCode server使用的协议比较特殊，不同以往Nginx代理只需要proxy_pass即可，VSCode server使用的是wss协议，所以配置文件有所变更，如下：

    server {
      listen 80;
      listen 443 ssl;
      server_name www.aaa.com; # 按实际域名添加

      # 证书地址（根据喜好选择文件夹）
      ssl_certificate /www/wwwcertificate/xxx.crt; # 按实际文件名填
      # 证书key地址
      ssl_certificate_key /www/wwwcertificate/xxx.key;
      ssl_session_timeout 5m;
      ssl_protocols TLSv1.2 TLSv1.3;
      #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_pass http://localhost:28888;  # 本地服务的ws连接端口
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connetion $conn_upgrade;
        }
    }



wss协议主要涉及到的配置是

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connetion $conn_upgrade;


这两行配置的意思是将http协议升级为ws协议。




题外话：使用Vscode网页版进行C#项目的开发必须安装的核心插件--netcore(dotnet)

环境
CentOS Linux release 7.9.2009 (Core)
dotnet-sdk-6.0
服务器配置：2核4G

安装方式
下载rpm源码

1. rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm
   

复制代码

安装
yum install dotnet-sdk-6.0 -y

验证
[root@controller DataMagicCube]# dotnet --version
6.0.201