Linux服务器部署Web版VSCode，在window下使用浏览器在linux环境下编写代码
<p>最近尝试了一下在Linux服务器上部署VSCode，也就是code-server，然后在windows电脑上通过浏览器访问打开在线编辑器编写代码，以下记录一下部署过程。</p><h2>1、在linux服务器上安装code-server</h2>
<p>a、进入到home目录下</p>
<p>b、创建vscode目录</p>
<p>c、进入vscode目录</p>
<p>d、使用wget命令下载code-server压缩包，我这里安装的是4.9.1版本</p>
<p>e、使用tar命令解压压缩包</p>
<div class="cnblogs_code">
<pre>cd /<span style="color: rgba(0, 0, 0, 1)">home
mkdir vscode
cd vscode
wget https:</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">github.com/coder/code-server/releases/download/v4.9.1/code-server-4.9.1-linux-amd64.tar.gz</span>
tar -xvf code-server-<span style="color: rgba(128, 0, 128, 1)">4.9</span>.<span style="color: rgba(128, 0, 128, 1)">1</span>-linux-amd64.tar.gz</pre>
</div>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327104112530-739456362.png"></p>
<h2> 2、解压完成后，进入bin目录，执行以下命令</h2>
<p>a、进入code-server-4.9.1-linux-amd64/bin目录</p>
<p>b、执行 ./code-server 命令</p>
<div class="cnblogs_code">
<pre>cd code-server-<span style="color: rgba(128, 0, 128, 1)">4.9</span>.<span style="color: rgba(128, 0, 128, 1)">1</span>-linux-amd64/<span style="color: rgba(0, 0, 0, 1)">bin
.</span>/code-server</pre>
</div>
<p>c、第一次执行完 ./code-server 命令后，会在用户目录/.config/code-server下生成一个 config.yaml的配置文件，如图：</p>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327104536955-113091453.png"></p>
<p>d、先使用Ctrl+C组合键退出code-server服务，使用 vi /root/.config/code-server/config.yaml 命令打开配置config.yaml文件，根据需要修改ip、端口和登录密码：</p>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327104726939-437048376.png"></p>
<p>e、由于我这里是配置的8081端口，所以需要服务器放开8081端口，可以在自己的阿里云或者腾旭云服务控制后台的安全组添加8081端口，并设置策略为允许，如下图：</p>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327105604266-1946369409.png"></p>
<p>f、进入/home/vscode/code-server-4.9.1-linux-amd64/bin 目录下，执行 ./code-server 命令，启动code-server服务</p>
<p> g、此时在自己的window电脑上就可以通过:服务器ip:8081 来访问web版的vscode了，效果如下图：</p>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327110017008-573096801.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/1048036/202403/1048036-20240327110244545-1285742782.png"></p>
<p> 第一次访问需要输入之前在config.yaml配置文件里设置的登录密码（123456），就可以愉快的在浏览器下写代码了</p>
<h2>3、设置code-server服务保持后台在线</h2>
<p>但是到这里还有一个问题，当前这种运行是在前台运行的，不是在后台运行的，如果运行这个code-server的话，就需要保持code-server一直在前台运行，我们的服务器就不能做其他操作了，这时我们需要使用systemctl管理来运行code-server，把code-server变成一个系统服务，可以在后台运行。操作如下：</p>
<p>a、使用cd命令进入 /etc/systemd/system/ 目录下</p>
<div class="cnblogs_code">
<pre>cd /etc/systemd/system/</pre>
</div>
<p>b、使用touch命令新建一个code-server.service文件</p>
<div class="cnblogs_code">
<pre>touch code-server.service</pre>
</div>
<p>c、使用vim编辑code-server.service为如下内容</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">
Description</span>=code-<span style="color: rgba(0, 0, 0, 1)">server
After</span>=<span style="color: rgba(0, 0, 0, 1)">network.target
Type</span>=<span style="color: rgba(0, 0, 0, 1)">exec
ExecStart</span>=/home/vscode/code-server-<span style="color: rgba(128, 0, 128, 1)">4.9</span>.<span style="color: rgba(128, 0, 128, 1)">1</span>-linux-amd64/bin/code-<span style="color: rgba(0, 0, 0, 1)">server
Restart</span>=<span style="color: rgba(0, 0, 0, 1)">always
User</span>=<span style="color: rgba(0, 0, 0, 1)">root
WantedBy</span>=<span style="color: rgba(0, 0, 255, 1)">default</span>.target</pre>
</div>
<p>ExecStart是code-server指令所在的地址，咱们的刚刚运行code-server的时输入的linux指令<code>code-server</code>后所执行的就是/home/vscode/code-server-4.9.1-linux-amd64/bin/code-server这个可执行文件</p>
<p> </p>
<p><strong>以后就可以以下命令启动、重启、停止或卸载code-server服务了：</strong></p>
<p>启动code-server：</p>
<div class="cnblogs_code">
<pre>sudo systemctl start code-server</pre>
</div>
<p>重启code-server：</p>
<div class="cnblogs_code">
<pre>sudo systemctl status code-server</pre>
</div>
<p>停止code-server：</p>
<div class="cnblogs_code">
<pre>sudo systemctl stop code-server</pre>
</div>
<p>卸载code-server(卸载之前先停止code-server)</p>
<div class="cnblogs_code">
<pre>rm -rf /home/vscode<span style="color: rgba(0, 0, 0, 1)">
rm </span>-rf ~/.local/share/code-<span style="color: rgba(0, 0, 0, 1)">server
rm </span>-rf ~/.config/code-server<br>rm -rf /etc/systemd/system/code-server.service</pre>
</div><br><br>
来源：https://www.cnblogs.com/libo0125ok/p/18098540
頁:
[1]