在线VScode——Code-Server:使用宝塔面板可视化搭建
Nginx,谐音宁戚,本句诗反映了Nginx功能的强大。
前言
我之前也有说,这个code-server的搭建呢,属于我的2.0版。之前我是使用ip访问的,但是ip访问呢有很多弊端。首先是这个code-server的剪贴板共享功能必须在https下进行,虽然我之前用的时候也没感觉到复制粘贴的时候遇到过什么问题。其次呢是网站真的很慢很慢。我的服务器带宽只有1M,加载全新的code-server需要下载3M多的文件,解压有8.8M,全新加载的话要耗时很多时间。
在我考虑构建网站2.0的时候,我考虑要解决这些弊端。在搭建code-server的过程中,我参考了很多资料。在这里我要特别cue一位技术大佬,对很多问题有深入的理解,我和他几乎踩了相同的坑,没有他的这篇文章,我的code-server服务估计还是烂尾的状态。文章链接
他说的很简短,跟我的技术方法也不一样,但是确实帮助到我很多。我的这篇文章也就相当于他的宝塔版。
说到宝塔,在我配置网站的这段时间里确实发挥了很大的作用,很多操作在网页上点一点就行了,免去了修改配置文件的痛苦。
warning 注意
本文使用宝塔编译安装的LNMP环境,Nginx配置文件位置非常奇特。
安装code-server
来吧,展示!这是code-server的项目,需要从release里下载二进制版本,本文里我使用了deb安装包。
这里提一下,有能力的话一定要阅读一下英文文档,不仅会对code-server这个软件有更深的认识,在写下来的配置中不至于迷糊,而且对了解计算机常识也很有帮助。
通过宝塔的文件管理功能可以把deb文件上传到服务器的某一个地方,我选择了用户的主目录的code-server文件夹。要在这里安装code-server那自然是要用sudo dpkg -i code-server.deb
。
warning 注意
文件名需要更改。 实际上,输入code,再按tab就可以自动补全了。
安装好后就可以直接在终端中敲code-server启动了。启动之后是一个 日志的形式,所以不能再输入其他Linux命令了。再开一个ssh窗口就vans了。
在终端输入code-server --help可以看到帮助信息。实际上,这是一个通法,几乎所有的软件都能这样查询帮助,如果不愿意查看GitHub的话。以下是这个命令的输出内容。
root@ipangbo:~# code-server --help code-server 3.8.0 Usage: code-server [options] [path] Options --auth The type of authentication to use. [password, none] --password The password for password authentication (can only be passed in via $PASSWORD or the config file). --hashed-password The password hashed with SHA-256 for password authentication (can only be passed in via $HASHED_PASSWORD or the config file). Takes precedence over 'password'. --cert Path to certificate. A self signed certificate is generated if none is provided. --cert-host Hostname to use when generating a self signed certificate. --cert-key Path to certificate key when using non-generated cert. --disable-telemetry Disable telemetry. --disable-update-check Disable update check. Without this flag, code-server checks every 6 hours against the latest github release and then notifies you once every week that a new release is available. -h --help Show this output. --open Open in browser on startup. Does not work remotely. --bind-addr Address to bind to in host:port. You can also use $PORT to override the port. --config Path to yaml config file. Every flag maps directly to a key in the config file. --socket Path to a socket (bind-addr will be ignored). -v --version Display version information. --user-data-dir Path to the user data directory. --extensions-dir Path to the extensions directory. --list-extensions List installed VS Code extensions. --force Avoid prompts when installing VS Code extensions. --install-extension Install or update a VS Code extension by id or vsix. The identifier of an extension is `${publisher}.${name}`. To install a specific version provide `@${version}`. For example: 'vscode.csharp@1.2.3'. --enable-proposed-api Enable proposed API features for extensions. Can receive one or more extension IDs to enable individually. --uninstall-extension Uninstall a VS Code extension by id. --show-versions Show VS Code extension versions. --proxy-domain Domain used for proxying ports. -e --ignore-last-opened Ignore the last opened directory or workspace in favor of an empty window. -n --new-window Force to open a new window. -r --reuse-window Force to open a file or folder in an already opened window. -vvv --verbose Enable verbose logging. --link (beta) Securely bind code-server via Coder Cloud with the passed name. You'll get a URL like https://myname.coder-cloud.com at which you can easily access your code-server instance. Authorization is done via GitHub. --home Set a custom link for the 'Go Home' button in the Application Menu
希望你从这里看出来我是Ubuntu党^_^
鲁迅曾经说过,如果你看上面的代码有点乱,那是你的屏幕不够宽。
如果没有仔细看GitHub上的文档,那么这个help可能不好理解。这里我只说一下直接开淦需要的东西:
配置文件 配置文件在~/.config/code-server/config.yaml
我配置的配置文件中的内容:
bind-addr: 0.0.0.0:8080
auth: password
password: thisispassword
cert: /home/folder_of_certificate/cert.pem
cert-key: /home/folder_of_certificate/key.key
home: https://www.ipangbo.xyz
warning 警告
可以看出,有些关乎网络安全的内容只不过是tricks。 这不是本服务器的配置,也不推荐任何人这样写。 能看到这里的人,应该有能力看懂并且修改这些配置。 这里只是提供了一种格式。
解释:
- 绑定的地址:code-server原意是只允许指定的ip访问它,因此有些人会出现设置了code-server,输入地址却访问不了的问题。这是因为没有在这里设置允许所有ip访问。
0.0.0.0
表示所有ip。后面的端口号就是code-server会监听的端口。 - 验证方法:有password和none两种选择。我相信应该不会有人开放code-server给别人用吧,毕竟这玩意下面是终端。哦对了,下面的password其实还可以选择hashed-password。但是我按照文档生成哈希值后总提示密码错误,也就没有再用。不过无所谓,我们全程使用https加密,密码不是明文传输。
- 密码:我想不用多讲,值得注意的是字符串不用加引号。
- 证书:这一项和后面一项在申请SSL证书前先不用写,一整行都不用写。后面是证书的路径,用于在https中。可以使用和网站一样的证书,如何申请网站的证书在文章后面有。不过我一直不太清楚,浏览器传输到服务器是https加密的,这里设置证书意味着什么呢,聪明的读者请在评论里告诉我。
- 证书私钥:跟证书配对,懂得都懂。
- 主页:其实这个无关痛痒,设置的是点击菜单里的"GO HOME"选项链接到的网站,默认是项目的GitHub地址。
设置好这些后(vim的用法我想我不必多说),重启code-server。说明白点,ctrl+c结束进程,再输入code-server打开。这时候访问ip+端口号,等待一段时间,只要能看到主界面,code-server的安装阶段就完成了。
宝塔设置网站
使用ip+端口号的方式就能打开code-server了,但是这优雅吗?这不优雅,我希望年轻人还是耗子尾汁,好好反思,以后不用受用ip访问这样的苦。谢谢朋友们!
为什么叫受苦呢,第一,ip不好输入。虽然鲁迅曾经说过,“再小的个体,也要拥有自己的公网IP。”但是鲁迅还说过,“再小的个体,也要拥有自己的顶级域名。”有一个域名,不仅是身份和地位的象征,也让输入更加方便。第二,ip访问无法申请SSL证书,也就是没法使用https协议。前面也说了,没有https协议,code-server的功能就不完整。
我前一段时间买下了这个域名,白嫖了资本家的优惠券,价格很低。但是我没想到这个.xyz域名续费竟然要60+一年,虽然不多,但是毕竟我是学生,60+比很多更好的域名都要贵,xyz域名只是新买非常便宜。看了一下com域名续费贼便宜,下一年大概就迁移到新网址吧。
买下来了域名,接下来当然要把我们的域名解析到主机。有些人可能会想,直接解析到设置的端口号不就可以直接访问了吗。但是现实很残酷,A记录只能解析到ip,不能填写端口。我一时陷入了困境。先把几个二级域名解析到了主机ip。
但是事情迎来了转机,我发现如果你访问设置的二级域名而没有告诉宝塔面板这个二级域名属于哪个网站,那么宝塔会报错。
这就很神奇了朋友们,我设置的明明是解析到主机,难道二级域名不是我这个主机的别名吗?我直接访问二级域名和直接访问ip有区别吗?
于是我大胆猜测这两个事实,后来也印证了:
- 宝塔知道我输入了什么域名
- 宝塔根据我输入的域名决定我会看到什么网页
什么是反向代理
“要知道什么是反向代理,就先得知道什么是正向代理。”——鲁迅
我不用画图来解释,希望能够让人们都读懂。
懂点技术或者会玩网络游戏的中国人通常会对代理很熟悉。人们发送一个请求给代理服务器,跟代理服务器说,我想访问这个网站。代理服务器亲自访问了网站,并且传回给人们。如果人们直接访问网站很慢,但是人们到代理服务器的速度很快,代理服务器到网站的速度也很快,这就利用代理服务器完成了加速。在这个过程中,代理服务器模糊了人们的界限,网站只知道是代理服务器访问了网站,却不知道是哪位用户访问了网站。
反向代理是把这个过程反过来,人们访问一个反向代理服务器,反向代理服务器却模糊了它所代理的所有服务的界限,它根据人们输入的网址决定要给人们传送哪个服务的内容。值得注意的是,上文的服务既可以是不同的端口,也可以是不同的服务器。事实上,不同的端口也就可以当不同的服务器用了,只不过是运行在同一个服务器上的。
根据我的设想,整个宝塔的网站服务都是建立在Nginx的基础之上的。宝塔让Nginx直接监听了80端口,然后让Nginx通过网址决定了传送哪个端口上的内容。事实也确实是这样。宝塔Nginx主要的配置文件目录有两个,一个是/www/server/nginx/conf/nginx.conf
,另一个是/www/server/panel/vhost/nginx
这个文件夹,里面一个一个文件都是不同的网站的配置文件。那么事实上呢也不用去记这两个路径,宝塔的配置页面都能可视化地配置这些文件。这一段主要是阐述原理,不是教学。看其中一个配置文件:
root@ipangbo:/www/server/panel/vhost/nginx# cat 0.default.conf server { listen 80; server_name _; index index.html; root /www/server/nginx/html; }
这个文件名说明这是个默认的配置,Nginx监听了80端口,没设置域名,也就是匹配所有的域名,除了已经定义了的。到这里应该可以猜出来了,访问不存在的网站就会定向到服务器/www/server/nginx/html
这个目录的网站,而这个网站的页面就是上面哪个报错的页面。
其实上面那些没读懂也没关系,不过我自认为我说明白了。如果只是为了结果的话,跟着做就可以了,这些更深的没必要理解,甚至我的理解也不是很到位。
下面我们开始配置用域名访问。
首先确认得有一个解析到这台服务器ip的域名,顶级域名或者二级域名都可以。配置DNS解析我想在这里也不必说。
然后在宝塔创建网站。点击左栏网站-添加站点-如实填写域名-需要数据库等就勾选,不需要就不勾选-PHP版本建议最新,但不是8.0。
创建这个网站之后输入网址可以访问一个默认页面,这是阶段性成功的标志。
我们还没告诉宝塔这个网站要代理哪个端口,也就是要设置一个到code-server端口的反向代理。实际上,不在宝塔设置反向代理,宝塔自己也会设置一个默认的反向代理到刚才那个网站的根目录下。在宝塔设置反向代理,实际上是改变了代理的方向。
点击网站名进入站点修改页面,再进入反向代理,点击添加反向代理。
- 代理名称就是个备注,可以乱写。
- 目标url是ip+端口的形式。
- 如果不知道其他是什么,就不用填其他的了。
然后再点击配置规则,将以下规则直接复制进去。
location / { proxy_pass https://127.0.0.1:###port/; proxy_set_header Host $host; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; proxy_set_header Accept-Encoding gzip; }
除了###port那里需要修改成code-server的端口之外,其他都不要改动。如果你问我这个文件是什么意思,对不起,我也不知道。如果你问我这个文件是哪来的,别问,问就是官方文档。
点击确定,反向代理就设置好了。这时候再访问网站,是不是变成code-server了?
配置SSL证书
打开code-server后,右下角会如约弹出一个框,告诉你没有使用https,剪切板功能不能使用。
有的人可能看见了宝塔里的SSL证书。没错,那里有一个Let's Encrypt证书是免费的,但是它的有效期只有三个月的时间。其实这都不是重点,我在使用Let's Encrypt证书时出现了很多莫名其妙的问题。我这台服务器下有三个二级域名,先前是都装了Let's Encrypt证书,后来因为各种各样奇怪的毛病,两个域名都让我换成了其他品牌的证书,换掉证书就好了。所以我在这里还是推荐其他有效期在一年的证书。
腾讯,阿里都可以申请证书。腾讯的步骤稍微简单一点,这里以腾讯为例。
进入腾讯云SSL证书的控制台-点击我的证书-如实填写信息-建议选择DNS验证
DNS验证其实很简单,设置一种TXT记录即可,像之前设置A记录一样。
然后就可以下载证书了,解压压缩包之后会看到有适合Nginx的证书,.crt文件是证书,.key文件是私钥。这两个文件都可以拿记事本打开。
打开后,内容不用修改,直接全选复制到宝塔面板SSL设置的其他设置中。
warning 注意
在宝塔面板中,是左边填写私钥,右边填写证书,不要填反
保存之后,使用https://访问试一下吧。
warning 注意
如果还在调试期间的话,建议不要打开强制https,会导致很多问题。等所有都配置好后再打开强制https。
CDN加速
让我们打开调试工具,看看加载一次code-server需要多少流量。
一次加载,需要传输约3M的资源,如果只依靠云服务器的带宽的话,那么访问会非常缓慢。所以我们需要CDN加速。
CND叫做内容分发网络,意思就是CDN在全国有多个服务器,帮你把需要的资源缓存,用户访问网站的时候,实际上是访问的CDN,CDN没有缓存到的,就去问源服务器,也就是你买的云服务器去要。这个过程叫回源。
想一想,要达成这样的效果我们需要什么操作呢?
首先,用户访问网站,不是访问源服务器,而是访问CDN。这意味着我们的的DNS解析需要改到CDN服务器上。
其次,我们已经设置了服务器到浏览器的SSL证书,但是,如果用了CDN,就是相当于源服务器到CDN是加密的。CDN到浏览器这一段怎么加密呢?
这两步就是设置CDN的核心步骤。
那开始设置吧。首先先找到一家可靠的CDN服务商。有的人可能听说过百度云加速,确实它优惠力度很大。但是我们这个code-server有一项重要的协议百度云加速是不支持的。在这里很感谢上文提到的那位博主,他的一句话点明了百度云加速的问题所在。这个问题卡了我一天,无论我怎么刷新,关于那个协议的数据包就是加载不出来。最后才发现这项协议良心云(腾讯云)支持。于是我把code-server的CDN加速部署在了腾讯云。
然后就开始添加域名了,点击域名管理-添加域名-如实填写信息。其中的源站配置一定要注意,回源协议一定要选择协议跟随,否则上文提到的特殊协议会出问题。你会奇怪为什么我不说这个协议是什么呢,这里不是我不知道,只是不能说。另外下面的源站地址直接填写ip即可,不用加端口。
这里再插一个我跳过的坑。当时我接入腾讯云之前由于要排查问题原因,删掉了反向代理的配置文件,再重新编写的时候将https写成http了。这就造成了一个302重定向死循环。反向代理将请求代理到80端口,但是code-server强制要求https,让重新发送请求,反向代理的重新发送到请求又给了80端口。那天晚上我实在解决不了,就给腾讯云提交了工单,腾讯云的客服半夜12:40给我打电话询问我的情况。但是他们的值班技术可能还是有点不专业,可能不太熟悉反向代理。说我是回源地址填错了,应该填443端口。但是其实不是。也不怪他们,反向代理那里是我自己设置的问题。
设置好CDN后,网站就基本配置结束了。开启iPad编程吧。