『原创』『教程』搭建在线VSCode,部署Code-Server并配置反向代理实现域名访问
Brains - 灵感乌托邦

『原创』『教程』搭建在线VSCode,部署Code-Server并配置反向代理实现域名访问

六六丶
2021-11-26 / 23 评论 / 3,620 阅读 / 正在检测是否收录...
广告

前言

最近学习web开发,一边看视频一边练习,码代码、记笔记,实属有些不亦乐乎

但是无奈本子配置不高,每次同时打开vscode+Chrome,本子风扇呼呼作响不说,手里还像捧着个暖宝宝,实在不快

突然想起之前看到过的开源vscode—— code-server ,索性自己也来搭建一个web版的vscode

成果展示

image.png

教程开始

一、下载code-server源代码

其实codeserver有很多种安装方式,但是我这里使用的是通过宝塔进行本地安装

Docker安装虽然简单,但是后期维护和修改会很难受,所有我就采用本地安装吧

二、运行code-server

1、上传下载的文件到服务器

直接将下载好的文件上传到自己的服务器,当然你也可以先使用宝塔添加一个网站

kzs1pahh.png

然后上传到该网站对应的目录下

kzs1pzwm.png

2、解压文件

kzs1qgmo.png

3、运行code-server

直接在解压的文件夹内点击终端

kzs24fj0.png

进入终端

kzs1sxym.png

然后在终端输入以下代码直接启动

./bin/code-server --host 0.0.0.0 --port 8080

如图所示就是已经完成配置.

kzs1yvrg.png

进入浏览器,输入服务器公网ip,加上刚才我们指定的端口号进入,显示欢迎界面输入密码进入

4、修改密码

在第一次开启code-server时,会在服务器 根目录-root-.config-code-server下生成一个配置文件

kzs21cy8.png

打开后可以修改 host:端口密码 ,这里建议把host改为 0.0.0.0 以能够使用外网访问

kzs225kh.png

如果不想使用密码,在 启动命令 中加 --auth none 即可无需密码进入。

kzs22x4o.png

成功访问。

到这里,我们就基本完成了 code-server 的部署。

存在的问题

虽然我们已成功部署了 code-server 服务,但有几个问题仍然不可避免!

  1. 我们使用 终端 连接的方式启动 code-server,一旦断开连接,那么 code-server 就不可以再使用了
  2. code-server 自签的证书被浏览器提示不安全
  3. 域名 + 端口的访问方式实在是太麻烦,而且还会暴露端口,不安全

优化 code-server 服务

一、问题1

1、创建开启脚本

直接在code-server同目录下创建一个 start.sh 文件,打开将以下代码复制进去

2、创建关闭脚本

创建一个 stop.sh 文件,将以下代码复制进去

kill -9 'cat save_pid.txt'  # 关闭这个进程,关闭code-server服务

这样一来我们就得到了开启和关闭的脚本文件

3、启动开启脚本

在同目录文件夹下打开终端输入以下代码,就可以直接启动code-server并保持后台

./start.sh

启动后不会有反馈,可以直接关闭当前终端,然后会发现同目录下生成了 run.log 文件

打开 run.log 即可看到运行日志

二、问题2

该步骤结合第三步,先添加一个站点,设置好域名,不需要任何环境,php 版本设置为纯静态,然后在面板的 SSL 中申请 Let’s Encrypt 免费 SSL 证书即可。

三、问题3

这里我们改变默认端口进行访问,并且使用 Nginx 反向代理

修改端口:我们可以选择合适的端口开启 code-server,如: ./code-server --port 28865

1、创建反向代理

点击刚才在宝塔 添加的网站-反向代理-添加反向代理

kzs263uz.png

输入你的 代理名称、目标URL

kzs26s6w.png

此时你就可以直接使用你的域名进行访问了,但是可能会报错 Error: WebSocket close with status code 1006

kzs27sjy.png

别急,这是正常现象,因为你的Nginx没有使用WebSocket代理

2、修改反向代理的配置文件

点击反向代理里的 配置文件 进行修改

kzs29j4k.png

在如下位置加入以下代码

然后再返回你的域名,你会发现可以正常访问了

kzs2atoh.png

结语

虽然code-server还达不到vscode的强大,但是已经可以方便很多了,至少对我来说,我的渣本再也不会呼呼作响了。

439
打赏
gzh

评论 (23)

取消
  1. 头像
    Wood
    Windows 10 · Google Chrome

    感谢教程

    回复 待审 垃圾
  2. 头像
    lsq
    Windows 10 · Google Chrome

    无论在什么时候,在这世间的角落都会有一些人逆着光而来,将温暖洒落人间。

    回复 待审 垃圾
  3. 头像
    TOP
    MacOS · Google Chrome

    在这样一个世界里,生活的真实性被所谓的清晰概念完全掩盖。经验的本质被剥夺殆尽,取而代之的却只是空有的名称,而这些名称进而有取代了现实。

    回复 待审 垃圾
    1. 头像
      博主
      Windows 10 · Google Chrome
      @ TOP

      感谢!

      回复 待审 垃圾
  4. 头像
    a
    Windows 10 · Google Chrome

    快乐,至少比富裕要好。

    回复 待审 垃圾
  5. 头像
    无书
    Windows 10 · QQ Browser

    走在未知的道路上,不能停也不能回头。

    回复 待审 垃圾
  6. 头像
    hero
    Windows 10 · Google Chrome

    独自莫凭栏,无限江山,别时容易见时难。5666666666666666666666666666666

    回复 待审 垃圾
  7. 头像
    Max
    Windows 10 · Google Chrome

    桃李不言,下自成蹊。

    回复 待审 垃圾
  8. 头像
    baymin
    Windows 10 · Google Chrome

    伤口只要闭上眼就会消失吗?悲鸣只要听不见就不存在了吗?就算能逃到世界的边缘,也无法逃避自己内心的声音。

    回复 待审 垃圾
  9. 头像
    小北
    Windows 10 · Google Chrome

    博主部署完成后可以安装中文扩展并启用吗,我安装启用后并没有将全局都修改为中文表情

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 7 · Google Chrome
      @ 小北

      我就是直接安装的中文插件,能够正常使用,除了设置里个别没有中文,基本都是中文,你安装后清除浏览器缓存试试

      回复 待审 垃圾
  10. 头像
    小北
    Windows 10 · Google Chrome

    每个人都只能活在无法违抗的潮流之中,只有一种命运,是每个人都平等拥有的,那就是死。

    回复 待审 垃圾
  11. 头像
    61581615
    Windows 10 · Google Chrome

    寄一份心情给久违的青春,想念那个敢爱敢gan恨的人,相信忠于感觉会快乐一些,宁可受伤不肯说谎言。

    回复 待审 垃圾
  12. 头像
    rail
    MacOS · Google Chrome

    感谢博主!

    回复 待审 垃圾
  13. 头像
    feixiangsnail
    Android · Google Chrome

    真正的惩罚是会留在心和记忆里面的。

    回复 待审 垃圾
  14. 头像
    MacOS · Google Chrome

    没有调查就没有发言权。

    回复 待审 垃圾
  15. 头像
    牛牛
    Windows 10 · Google Chrome

    太腻欧拉

    回复 待审 垃圾
  16. 头像
    Sweet
    Windows 10 · QQ Browser

    画图

    回复 待审 垃圾
  17. 头像
    www.72715.net
    Windows 10 · FireFox

    来学习一下看看

    回复 待审 垃圾
  18. 头像
    www.ypvps.com
    Android Pie · QQ Browser

    谢谢分享,马上试试,哈哈

    回复 待审 垃圾
    1. 头像
      六六丶 作者
      Windows 10 · Google Chrome
      @ www.ypvps.com

      相互学习QQ

      回复 待审 垃圾
  19. 头像
    e萌萌e
    Android · Google Chrome

    感谢博主分享

    回复 待审 垃圾
  20. 头像
    666666666666
    Windows 10 · Google Chrome

    支持支持支持

    回复 待审 垃圾
文章目录