平板电脑或低性能电脑流式使用完整IDE的解决办法

本文介绍了GitHub开源应用Code-Server的配置与使用方法。

前言

如果你也像我一样学习或者从事计算机行业，然后需要频繁出门使用IDE，但是手边只有不方便带出门的游戏本、iPad或者其他品牌的平板电脑以及低性能无法胜任IDE工作的笔记本电脑，那么这篇博客可以带给你一个全新的方向。基于GitHub开源项目code-server（网址：https://github.com/abhishekkrthakur/colabcode），在你的服务器或者租赁服务器上部署Docker，稍加配置之后便可以在任意浏览器上访问你所指定的网址，并且使用网页版的Visual Studio Code文本编辑器来完成你的代码。

有想要询问的？请查看文章末尾的Q&A板块。

正文

一、前期准备

你需要有一台能够连接上公网的服务器（无论是云服务器还是自建服务器还是内网穿透都可以），性能几乎没有要求，RAM建议最低4GB，硬盘容量最低2GB。至于带宽方面则几乎没有要求，低带宽只有在初始化界面会有所卡顿（卡顿时间取决于带宽究竟低到何种程度），以及在上传或者拉取所编写好的代码的时候需要等待，其余时候则几乎不占用带宽。

二、安装

Linux终端

本段以 Ubuntu 24.04 / 22.04 LTS 为例，但也适用于其他主流发行版。建议服务器配置至少1核CPU和1GB内存。

1、官方一键脚本安装

首先，通过SSH连接到你的服务器。然后执行以下命令：

curl -fsSL https://code-server.dev/install.sh | sh

这个命令会下载安装脚本并用sh执行。安装脚本会自动检测你的操作系统，下载对应版本的 code-server，并设置好systemd服务。当看到类似以下的输出时，说明安装成功：

* Installing code-server for systemd (x86_64) *
deb package has been installed. To have systemd start code-server now and restart on boot:
  sudo systemctl enable --now code-server@$USER

随后登陆你的IP+端口号来配置和使用Code-Server。

2、手动下载二进制包安装

如果你希望安装特定版本，或者你的服务器架构比较特殊，手动安装会是更灵活的选择。

首先，前往 code-server 的 GitHub releases 页面，找到你想安装的版本。例如，安装 4.9.1 版本：

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

解压完毕之后，进入bin目录即可启动：

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

3、使用Docker部署

如果你熟悉Docker，使用容器化部署可以更好地隔离环境和管理依赖。

首先，确保服务器上已安装Docker和Docker Compose。然后，创建一个docker-compose.yml文件：

services:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    environment:
      - PASSWORD=your_strong_password   # 请替换为你的密码
      - PUID=1000                        # 你的用户ID
      - PGID=1000                        # 你的组ID
    volumes:
      - ./project:/home/coder/project    # 代码目录
      - ./config:/home/coder/.config      # 配置目录
    ports:
      - "8080:8080"                       # 映射端口
    restart: unless-stoppedservices:
  code-server:
    image: codercom/code-server:latest
    container_name: code-server
    environment:
      - PASSWORD=your_strong_password   # 请替换为你的密码
      - PUID=1000                        # 你的用户ID
      - PGID=1000                        # 你的组ID
    volumes:
      - ./project:/home/coder/project    # 代码目录
      - ./config:/home/coder/.config      # 配置目录
    ports:
      - "8080:8080"                       # 映射端口
    restart: unless-stopped

在包含该文件的目录下，执行以下命令启动：

docker-compose up -ddocker-compose up -d

宝塔面板

1、登陆到你的实例，在左边边栏中找到Docker。

2、在Docker页面应用商店搜索codeserver，点击下载。

3、配置你的codeserver，大部分参数都不用修改，只需要记住你的访问端口和初始password即可。如果你有域名的话，可以使用子域名来替代你的访问IP和端口，只要记得在DNS服务商里解析域名到服务器IP就可以了。

4、在浏览器中打开你的服务器IP加上codeserver的端口或者你的指定子域名，输入初始password之后即可登陆codeserver，等待初始化完毕，随后就可以开始coding了！

三、调试与进阶（Linux端）

无论你采用哪种安装方式，安装完成后，都需要进行基本配置。

1、初次运行与配置文件生成

如果是通过脚本或二进制包安装，你可以手动先运行一次code-server，它会自动生成默认的配置文件后退出：

code-server
# 使用 Ctrl+C 停止服务

2、修改配置文件

配置文件默认位于 ~/.config/code-server/config.yaml 。使用文本编辑器打开它：

nano ~/.config/code-server/config.yamlnano ~/.config/code-server/config.yaml

你会看到类似这样的内容：

bind-addr: 127.0.0.1:8080
auth: password
password: 此处为自动生成的随机密码
cert: false

为了可以从外部访问，我们需要修改两个地方：

· bind-addr: 将 127.0.0.1:8080 改为 0.0.0.0:8080，这样它就会监听所有网络接口。
· password: 将自动生成的随机密码改为一个你自己设置的强密码。

修改后的文件看起来像这样：

bind-addr: 0.0.0.0:8080
auth: password
password: MySuperStrongPassword123!
cert: false

保存文件并退出（在nano中是 Ctrl+X，然后按 Y 确认，再按 Enter）。

3、配置防火墙

为了让外部能访问到8080端口，你需要在服务器的防火墙上放开这个端口。如果你的服务器使用了ufw ：

sudo ufw allow 8080/tcp
sudo ufw reload

如果你使用的是云服务商（如阿里云、腾讯云、AWS等），还需要在它们的安全组控制台中添加一条入方向规则，允许TCP协议的8080端口访问。

4、将code-server作为系统服务运行

如果直接运行code-server，一旦关闭SSH终端，服务就会停止。推荐使用systemd将其作为后台服务管理。用一键脚本安装通常会自动创建好服务。

你可以通过以下命令管理服务：

sudo systemctl start code-server@$USER

sudo systemctl enable code-server@$USER

sudo systemctl status code-server@$USER

sudo systemctl restart code-server@$USER

如果系统没有自动创建服务文件，你可以手动在/etc/systemd/system/目录下创建一个code-server.service文件，内容可参考官方文档或社区示例。

5、访问你的云端VS Code

一切就绪后，打开你的浏览器，在地址栏输入：

http://<你的服务器公网IP>:8080

系统会提示你输入密码。输入刚才在config.yaml中设置的密码，点击”Submit”。

恭喜！你现在已经在浏览器中成功运行了VS Code。接下来，你可以像使用本地VS Code一样，安装插件、打开终端、编写和运行代码了。

6、进阶：使用Nginx反向代理并配置HTTPS

目前我们通过IP和端口直接访问，这种方式不够安全，而且难以记忆。更专业的做法是使用Nginx反向代理，并配置HTTPS加密通信。

这部分内容较为复杂，但却是生产环境部署的必备步骤，包括安装Nginx、配置SSL证书等，可以参考相关文档进行操作。

Q&A

一、为什么选择使用自建网页版IDE而不使用Microsoft官方网页版？

官方网页版vs code只能查看和编辑代码，而不能调试、编译与运行代码，从这一点就无法满足许多工况，也从未实现完整IDE的功能。

前言

正文