【玩转Lighthouse】在浏览器中使用VS Code

用户7589661 • 2023-01-02 • 云技术社区 • 274 阅读

code-server 是一个可以在远程服务器上运行 VS Code 的工具，允许从web端使用VS Code。本文将介绍如使用 docker 安装 code-server 。

Run VS Code on any machine anywhere and access it in the browser.

code-server

亮点

在任何(安装了浏览器的)设备上编写具有一致开发环境的代码
使用云服务器加速测试、编译、下载等
在旅途中保持电池寿命；所有密集型任务都在您的服务器上运行

要求

需要一台可以运行code-server的机器。您可以使用现有的物理机，也可以使用云服务器，推荐腾讯云Lighthouse，稳定好用。最低要求：

1 GB 内存
2个CPU核心

可以使用任何 Linux 发行版，但本文档假定您使用的是在腾讯云Lighthouse 托管的 Debian。

环境必须启用 WebSockets，因为 code-server 使用 WebSockets 在浏览器和服务器之间进行通信(后面在介绍如何使用域名访问时，会讲到如何在 nginx 反向代理开启 WebSockets )。

安装docker

卸载旧版本

Docker的旧版本被称为docker，docker.io或docker-engine。如果已安装，需要先卸载：

$ apt remove docker docker-engine docker.io containerd runc

安装方式

可以根据需要以不同的方式安装 Docker Engine：

大多数用户设置Docker的存储库并从中安装，以便于安装和升级任务。这是推荐的方法，

一些用户下载DEB软件包并手动安装，并完全手动管理升级。这在一些情况下很有用，比如在没有互联网接入的气隙系统上安装Docker。
在测试和开发环境中，一些用户选择使用自动便捷脚本来安装Docker。

本文将介绍如何从Docker的存储库安装 Docker Engine。

设置存储库

更新apt软件包索引并安装软件包，以允许apt通过HTTPS使用存储库：

$ apt update

$ apt install \\
    ca-certificates \\
    curl \\
    gnupg \\
    lsb-release

添加Docker的官方GPG密钥：

$ curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

使用以下命令设置稳定版的存储库。要添加nightly或test存储库，请在下面的命令中的单词stable之后添加nightly或test（或两者）。

$ echo \\
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/debian \\
  $(lsb_release -cs) stable" | tee /etc/apt/sources.list.d/docker.list > /dev/null

安装Docker Engine

更新 apt 包管理器索引，安装最新版的 docker-ce、docker-ce-cli 和 containerd.io：

$ apt update

$ apt install docker-ce docker-ce-cli containerd.io

验证docker安装

通过运行hello world映像，验证Docker引擎是否已正确安装。

$ docker run hello-world

看到以下输出则说明安装已完成：

root@debian[15:10:13]{~}docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
2db29710123e: Pull complete 
Digest: sha256:bfea6278a0a267fad2634554f4f0c6f31981eea41c553fdf5a83e95a41d40c38
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/

此命令下载测试映像并在容器中运行。当容器运行时，它打印一条消息并退出。

运行code-server容器

之前的步骤已经让我们成功在 Debian 上安装了 Docker，现在，我们只需要拉取code-server的官方镜像然后在本地运行就可以了：

$ docker run -itd --name code-server -p 127.0.0.1:8080:8080 codercom/code-server:latest

以上命令将在宿主机拉取最新code-server镜像，启动一个 code-server 容器，并把主机8080端口映射到容器8080。写本文时最新版本是4.3.0，但由于我从4.2.0升级之后遇到了点小问题，所以建议不安装latest：

$ docker run -itd --name code-server -p 127.0.0.1:8080:8080 codercom/code-server:4.2.0

这里实名表扬下，腾讯云拉镜像确实快哈。

可选参数：

-v "$HOME/.config:/home/coder/.config"//能够直接在宿主机直接修改容器内 coder-server 的配置文件，添加此参数前需要确保已在当前用户home目录下创建.config目录，使用mkdir -p ~/.config

-v "$PWD:/home/coder/project" //将当前目录复制到容器/home/coder/project目录下

看到以下回显，证明容器成功运行啦：

[root@debian ~/compose-2]# docker run -itd --name code-server-test -p 127.0.0.1:8080:8080 codercom/code-server:4.2.0
Unable to find image 'codercom/code-server:4.2.0' locally
4.2.0: Pulling from codercom/code-serve
5492f66d2700: Pull complete 
8189ef3eb52f: Pull complete 
e26e6ff41173: Pull complete 
e5236eeab34c: Pull complete 
e17b9c8ff80f: Pull complete 
2d4723beb3a7: Pull complete 
b01ce8032e3e: Pull complete 
3b18f4b72bb6: Pull complete 
4f4fb700ef54: Pull complete 
Digest: sha256:944e31d8a0f58a0d2121034c9646bea437042e0ce88d7e72213f1913c6e8fa12
Status: Downloaded newer image for codercom/code-server:4.2.0
11bdeee7b0fa6c24555bd862f25e15ccf99ea0487a90467515593f729381bf49

使用ss -ntl命令，能够看到本地8080端口已有进程在监听。再curl请求一下本地8080端口，看到重定向，说明容器内的code-server服务也已经正常运行啦。

[root@debian ~/compose-2]# curl 127.0.0.1:8080
Found. Redirecting to ./login

使用nginx反向代理

这是code-server的私有化部署，登录code-server也需要使用密码的，所以我们先配置域名解析和https，没有域名的话可以先注册，然后申请 ssl 证书，这里有免费的证书可以申请。nginx中添加如下配置：

    server {
        listen 80;
        listen [::]:80;
        server_name example.com;
        location / {
            return 301 https://example.com$request_uri;
        }
    }
    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name example.com;
        ssl_certificate /path/to/your/pem;
        ssl_certificate_key /path/to/your/key;
        ssl_session_timeout 1d;
        ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
        ssl_session_tickets off;
        ssl_protocols TLSv1.3;
        ssl_prefer_server_ciphers off;
        add_header Strict-Transport-Security "max-age=63072000" always;
        ssl_stapling on;
        ssl_stapling_verify on;
        location / {
            proxy_pass http://127.0.0.1:8080$request_uri;
        }
        error_page  404              /404.html;
        location = /404.html {
            root   /home/wwwroot/error_page;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /home/wwwroot/error_page;
        }
    }

这里推荐一个工具，一个SSL 配置生成器，选择好服务器软件、系统环境和希望的配置兼容程度，即可自动生成配置。但此时访问会出现问题，原因是 code-server 使用 WebSockets 在浏览器和服务器之间进行通信，因此我们还需要修改一下配置。

添加 websockets 支持

在以上配置文件中加入：

proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection "Upgrade";

WebSocket 和 HTTP 协议不同，但是 WebSocket 中的握手和 HTTP 中的握手兼容，它使用 HTTP 中的 Upgrade 协议头将连接从 HTTP 升级到 WebSocket，当客户端发过来一个 Connection: Upgrade 请求头时，Nginx 是不知道的，所以，当 Nginx 代理服务器拦截到一个客户端发来的 Upgrade 请求时，需要显式来设置 Connection 、Upgrade 头信息，并使用 101（交换协议）返回响应，在客户端和代理服务器、后端服务器之间建立隧道来支持 WebSocket。

访问code-server

以上步骤都正确完成后就可以通过https加域名来访问code-server啦：

登录code-server

根据提示，我们输入以下命令获取密码：

$ docker exec -it code-server-test cat /home/coder/.config/code-server/config.yaml

这里的code-server-test是容器名，看到以下结果：

[root@debian ~/compose-2]# docker exec -it code-server-test cat /home/coder/.config/code-server/config.yaml 
bind-addr: 127.0.0.1:8080
auth: password
password: 0afbb1d92c8e31076c0349ae
cert: false

输入密码即可登录：

success

之后就可以开启你的个性化之旅啦~