[Forward Content] 在Linux服务器上部署Web版VS Code
Tofloor
poster avatar
流浪的加菲
deepin
2024-03-28 10:09
Author

最近尝试了一下在Linux服务器上部署VSCode,也就是code-server,然后通过浏览器访问打开在线编辑器编写代码,以下记录一下部署过程。

(什么样的场景下才需要浏览器访问服务端的VSCode来编程,难道本地电脑不能安装吗?🤧 )

一、在linux服务器上安装code-server

具体操作步骤如下:

  1. 进入到home目录下
  2. 创建vscode目录
  3. 进入vscode目录
  4. 使用wget命令下载code-server压缩包,我这里安装的是4.9.1版本
  5. 使用tar命令解压压缩包
cd /home
mkdir vscode
cd vscode
wget https://github.com/coder/code-server/releases/download/v4.9.1/code-server-4.9.1-linux-amd64.tar.gz
tar -xvf code-server-4.9.1-linux-amd64.tar.gz

企业微信截图_12c3069d-689d-4289-a840-9b8aa76b9ac6.png

二、解压完成后,进入bin目录,执行以下命令

进入code-server-4.9.1-linux-amd64/bin目录

cd code-server-4.9.1-linux-amd64/bin

执行 ./code-server 命令

./code-server

第一次执行完 ./code-server 命令后,会在用户目录/.config/code-server下生成一个 config.yaml的配置文件,如图:

企业微信截图_57db8408-2a1e-4c65-80f1-aca68277638e.png

先使用Ctrl+C组合键退出code-server服务,使用 vi /root/.config/code-server/config.yaml 命令打开配置config.yaml文件,根据需要修改ip、端口和登录密码:

企业微信截图_aba7b456-8b88-4676-98d0-3fa67143e57c.png

由于我这里是配置的8081端口,所以需要服务器放开8081端口,可以在自己的阿里云或者腾旭云服务控制后台的安全组添加8081端口,并设置策略为允许,如下图:

企业微信截图_f4c6d149-949b-4e25-917f-bfcbe4104ad6.png

进入/home/vscode/code-server-4.9.1-linux-amd64/bin 目录下,执行 ./code-server 命令,启动code-server服务。此时,在自己本地电脑上就可以通过:服务器ip:8081 来访问web版的vscode了,效果如下图:

企业微信截图_c663d5fd-011f-4251-951b-c08c93a3dd26.png

第一次访问需要输入之前在config.yaml配置文件里设置的登录密码(123456),就可以愉快的在浏览器下写代码了
企业微信截图_8fde3ea6-624f-425b-a1b6-fd8dfc9366b9.png

三、设置code-server服务保持后台在线

但是到这里还有一个问题,**当前这种运行是在前台运行的,不是在后台运行的,如果运行这个code-server的话,就需要保持code-server一直在前台运行,我们的服务器就不能做其他操作了,这时我们需要使用systemctl管理来运行code-server,把code-server变成一个系统服务,可以在后台运行。**操作如下:

使用cd命令进入 /etc/systemd/system/ 目录下

cd /etc/systemd/system/

使用touch命令新建一个code-server.service文件

touch code-server.service

使用vim编辑code-server.service为如下内容

[Unit]
Description=code-server
After=network.target

[Service]
Type=exec
ExecStart=/home/vscode/code-server-4.9.1-linux-amd64/bin/code-server
Restart=always
User=root

[Install]
WantedBy=default.target

ExecStart是code-server指令所在的地址,咱们刚刚运行code-server的时输入的linux指令 code-server后所执行的就是 /home/vscode/code-server-4.9.1-linux-amd64/bin/code-server 这个可执行文件。

like 以后就可以以下命令启动、重启、停止或卸载code-server服务了:

启动code-server:

sudo systemctl start code-server

重启code-server:

sudo systemctl status code-server

停止code-server:

sudo systemctl stop code-server

卸载code-server(卸载之前先停止code-server)

rm -rf /home/vscode
rm -rf ~/.local/share/code-server
rm -rf ~/.config/code-server
rm -rf /etc/systemd/system/code-server.service

本文转载自:博客园

原文作者:web喵神

原文链接:Linux服务器部署Web版VSCode,在window下使用浏览器在linux环境下编写代码

Reply Favorite View the author
All Replies
流浪的加菲
deepin
2024-03-28 10:15
#1

什么样的场景下才需要浏览器访问服务端的VSCode来编程confused

Reply View the author
pzm9012
Moderator
2024-03-28 10:29
#2

安卓上的Code FA就是利用类似的方法实现的

Screenshot_2024-03-28-10-30-13-454_com.nightmare.code.jpg

Reply View the author
DebuggerX
deepin
2024-03-28 10:46
#3
流浪的加菲

什么样的场景下才需要浏览器访问服务端的VSCode来编程confused

之前地铁通勤,单趟在路上接近两个小时,经常会突然有点小的代码想法,就可以用手机网页登录自己的code-server验证一下。

不过code-server在很多手机浏览器上输入有各种问题,不知道现在是不是好一些。所以后来我还是直接在手机上容器出debian环境做这些事情了,还可以用更习惯的idea写代码,舒服很多。

现在开车上下班,也就不再折腾这些玩意了。

Reply View the author
流浪的加菲
deepin
2024-03-28 11:16
#4
DebuggerX

之前地铁通勤,单趟在路上接近两个小时,经常会突然有点小的代码想法,就可以用手机网页登录自己的code-server验证一下。

不过code-server在很多手机浏览器上输入有各种问题,不知道现在是不是好一些。所以后来我还是直接在手机上容器出debian环境做这些事情了,还可以用更习惯的idea写代码,舒服很多。

现在开车上下班,也就不再折腾这些玩意了。

不觉得手机屏幕太小了吗?😂

Reply View the author
乾豫恒益
deepin
2024-03-28 13:50
#5

左边一个代码机器人,右边一个代码机器人,这大抵是写代码癌的晚期了。

连上下班这么细碎的时间都要用起来,头发啊,头发啊,还没抗议吗?

Reply View the author
流浪的加菲
deepin
2024-03-28 13:53
#6
乾豫恒益

左边一个代码机器人,右边一个代码机器人,这大抵是写代码癌的晚期了。

连上下班这么细碎的时间都要用起来,头发啊,头发啊,还没抗议吗?

我想,有的人是真的享受敲代码的快乐,一天不写浑身难受那种shamed

Reply View the author
兆兆嘟嘟嘟
deepin
2024-03-28 21:21
#7

这种方式写的代码会保存到哪里?

Reply View the author