服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - [code-server]可在浏览器中运行最强编辑器 VS Code!

[code-server]可在浏览器中运行最强编辑器 VS Code!

2021-06-19 00:11开源前哨小秋 编程技术

code-server 是一个基于 VS Code 的在线编辑器,在任何地方的任何机器上运行 VS Code 并在浏览器中访问它,实现任何设备通过浏览器即可访问 VS Code,进而实现远程在线开发。

[code-server]可在浏览器中运行最强编辑器 VS Code!

简介

 

code-server 是一个基于 VS Code 的在线编辑器,在任何地方的任何机器上运行 VS Code 并在浏览器中访问它,实现任何设备通过浏览器即可访问 VS Code,进而实现远程在线开发。

它的亮点是:

  • 为用户提供了一致的代码开发环境;
  • 基于服务器加速测试、编译、下载;
  • 延长个人电脑的电池寿命,将密集型任务转移到服务器上运行;

官方建议服务器至少要有 1 GB 内存和 2 核。

[code-server]可在浏览器中运行最强编辑器 VS Code!

项目地址是:

https://github.com/cdr/code-server

下载安装

 

脚本安装

官方提供了一个脚本来为 Linux、macOS 和 FreeBSD 安装 code-server。

首先尝试打印安装过程中的详细内容,这个过程不会进行安装:

  1. curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

真正安装:

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

独立安装

官方提供了独立的压缩安装文件,下载对应服务器的版本,解压缩即可使用。

  1. // 完成后访问 http://127.0.0.1:8080,密码保存在 ~/.config/code-server/config.yaml 配置文件中
  2.  
  3. mkdir -p ~/.local/lib ~/.local/bin 
  4.  
  5. curl -fL https://github.com/cdr/code-server/releases/download/v$VERSION/code-server-$VERSION-linux-amd64.tar.gz \
  6.  
  7. | tar -C ~/.local/lib -xz 
  8.  
  9. mv ~/.local/lib/code-server-$VERSION-linux-amd64 ~/.local/lib/code-server-$VERSION 
  10.  
  11. ln -s ~/.local/lib/code-server-$VERSION/bin/code-server ~/.local/bin/code-server 
  12.  
  13. PATH="~/.local/bin:$PATH"
  14.  
  15. code-server 
  16.  
  17. # Your password is in 

Docker 安装

  1. # 这将启动一个 code-server 容器并通过 http://127.0.0.1:8080 访问
  2.  
  3. mkdir -p ~/.config 
  4.  
  5. docker run -it --name code-server -p 127.0.0.1:8080:8080 \ 
  6.  
  7. -v "$HOME/.config:/home/coder/.config" \ 
  8.  
  9. -v "$PWD:/home/coder/project" \ 
  10.  
  11. -u "$(id -u):$(id -g)" \ 
  12.  
  13. -e "DOCKER_USER=$USER" \ 
  14.  
  15. codercom/code-server:latest 

访问配置

官方强烈建议不要在公网暴露不需要认证或加密的 code-server,在默认情况下,code-server 会使用密码验证,密码从配置文件(~/.config/code-server/config.yaml)中获取。它只监听 localhost 的请求以避免将自己暴露出去。如果想从不同的地方安全地使用 code-server,则可以采用以下方法。

SSH 转发

官方推荐这种方法,因为不需要任何额外的设置,只需要在远程机器上有一个 SSH 服务。缺点是无法在没有 SSH 客户端的设备上访问,如 iPad。

首先,通过 ssh 进入实例并编辑 code-server 配置文件以禁用密码身份验证:

  1. # 将 “auth: password” 替换为 “auth: none” 
  2.  
  3. sed -i.bak 's/auth: password/auth: none/' ~/.config/code-server/config.yaml 

重启:

  1. sudo systemctl restart code-server@$USER

本地计算机运行以下命令,将本地端口 8080 转发到远程实例:

  1. # -N disables executing a remote shell 
  2.  
  3. ssh -N -L 8080:127.0.0.1:8080 [user]@<instance-ip> 

现在就可以在本地计算机通过 http://127.0.0.1:8080 访问 code-server

使用 Let's Encrypt

  1. 首先需要购买一个域名,推荐 Google Domains
  2. 将 code-server 实例IP与域名绑定
  3. 安装 nginx:
  1. sudo apt update 
  2.  
  3. sudo apt install -y nginx certbot python3-certbot-nginx 

     4. 将以下内容放到 /etc/nginx/sites-available/code-server 文件中:

  1. server { 
  2.  
  3. listen 80
  4.  
  5. listen [::]:80
  6.  
  7. server_name mydomain.com; 
  8.  
  9. location / { 
  10.  
  11. proxy_pass http://localhost:8080/;
  12.  
  13. proxy_set_header Host $host; 
  14.  
  15. proxy_set_header Upgrade $http_upgrade; 
  16.  
  17. proxy_set_header Connection upgrade; 
  18.  
  19. proxy_set_header Accept-Encoding gzip; 
  20.  
  21.  

mydomain.com 是你使用的域名。

5. 启用配置

  1. sudo ln -s ../sites-available/code-server /etc/nginx/sites-enabled/code-server 
  2.  
  3. sudo certbot --non-interactive --redirect --agree-tos --nginx -d mydomain.com -m me@example.com 

其中 me@example.com 使用你自己实际的电子邮件。访问 https://your-domain-name 即可访问 code-server。

6. 以上 3 到 5 可使用 Caddy 替代,详细说明参考官网。

使用自签名证书

建议将次作为最后的手段,因为自签名证书不适用与 iPad,并可能导致其他奇怪的问题。

首先 ssh 进入 code-server 服务器并编辑配置文件以使用随机生成的自签名证书:

  1. # Replaces "cert: false" with "cert: true" in the code-server config. 
  2.  
  3. sed -i.bak 's/cert: false/cert: true/' ~/.config/code-server/config.yaml 
  4.  
  5. # Replaces "bind-addr: 127.0.0.1:8080" with "bind-addr: 0.0.0.0:443" in the code-server config. 
  6.  
  7. sed -i.bak 's/bind-addr: 127.0.0.1:8080/bind-addr: 0.0.0.0:443/' ~/.config/code-server/config.yaml 
  8.  
  9. # Allows code-server to listen on port 443
  10.  
  11. sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node 

重启:

  1. sudo systemctl restart code-server@$USER

FAQ

使用 code-server 时会遇到一些问题。比如与 VS Code 的差异?如何禁用遥测?如何调试代码服务器?这些问题都可以在官方 FAQ 文档中找到:

  1. https://github.com/cdr/code-server/blob/main/docs/FAQ.md#how-should-i-expose-code-server-to-the-internet

原文链接:https://mp.weixin.qq.com/s?__biz=MzAxMDM0MzQ4Mg==&mid=2451065398&idx=1&sn=df5ae6dfb2bc7f6be6e2723422edced8&chksm=8cbd2f63bbcaa6755270670fb8272630ee378787dc93dea1a5133d86115141cb22533ec42b1e&mpshare=1&

延伸 · 阅读

精彩推荐
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5972021-03-08
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5232021-06-21
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04