基于树莓派部署 code-server
code-server 是 vscode 的服务端程序,通过部署 code-server 在服务器,可以实现 web 端访问 vscode。进而可以达到以下能力:
- 支持跨设备(Mac/iPad/iPhone 等等)编程,同时保证多端编程环境统一。
- 支持在 web 端提交 git 代码。
- 解放背包重量。
至于将 code-server 部署在树莓派上相比云端服务器好处是综合成本低,后续若要更换云服务器,只需更改内网映射端口即可,迁移会十分便捷。
树莓派上部署 code-server
参考 code-server 官网,在树莓派上其推荐使用 yarn 的方式来进行安装 code-server。
此外前置安装提到 node.js 版本需要与所下载的 VSCode's Electron 所依赖的版本一致
。笔者下载的 code-server 版本为 code-server_3.12.0_arm64.deb,其需要 node.js 14.x 版本。执行如下命令进行前置安装:
sudo apt-get install -y \
build-essential \
pkg-config \
python3
npm config set python python3
按照 yarn 官网 所述,在 Debian / Ubuntu 系统中安装 yarn:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn
yarn --version // 1.22.15
执行 sudo vim .bashrc
,将 yarn 全局安装命令的执行路径写入 .bashrc 文件。
export PATH="$PATH:`yarn global bin`"
source ~/.bashrc # 使之生效
参照 code-server 官网安装教程,执行以下命令安装 code-server:
yarn global add code-server
code-server --version # 3.12.0
笔者使用 npm install -g code-server 无法成功安装,最终使用 yarn global add code-server 安装成功。
编辑 .config/code-server/config.yaml
sudo vim .config/code-server/config.yaml
bind-addr: 127.0.0.1:5555
auth: password
password: xxxxxxxxx
cert: false
# 启动 code-server
code-server
在 frpc.ini
中添加以下配置:
frpc.ini 与 pm2 的完整配置说明可以参考内网穿透章节。
[vscode-server-frp-muyunyun-cn-5555]
type = tcp
local_ip = 127.0.0.1
# code-server 服务运行在树莓派本地的 5555 端口上
local_port = 5555
# 对外运行在服务器端云主机 5555 端口上
remote_port = 5555
使用 pm2 重启 frpc 服务:
cd /opt/frp_0.37.0_linux_arm64
pm2 restart start_frpc.sh
此时在 frps 服务器端(云主机)中通过 lsof -i:5555
可以看到服务端端口 5555 已经被 frps 服务占据。
同时在公网中可以看到 code-server 服务已成功运行
使用 pm2 守护运行 code-server 以让相关服务遇到意外(比如断电后)能自动重启:
cd /opt/frp_0.37.0_linux_arm64
sudo touch start_code_server.sh
sudo chmod 777 start_code_server.sh
sudo echo "code-server" > start_code_server.sh
pm2 start /opt/frp_0.37.0_linux_arm64/start_code_server.sh
pm2 save
笔者在域名解析处新增 code 主机记录以语义化访问 code-server 服务,此时访问 http://code.muyunyun.cn:5555 与访问 http://frp.muyunyun.cn:5555 效果是相同的。
支持 HTTPS 协议访问
访问 HTTP 下的 code-server 服务,发现不能完整使用插件、剪切板等功能模块。
根据控制台报错信息,推测这些模块依赖了 service work,查阅 Setting up to play with service workers 得知, service work 确实必须在 Https 协议中使用。
因此若要完整地使用 code-server 服务,需要配置 HTTPS 协议,配置过程记录在 HTTPS 域名配置 章节中,其介绍了给域名获取免费的 Https 证书并让 Https 生效的过程。
支持在 HTTPS 协议中访问 WebSocket
在配置完 HTTPS 服务后,访问 HTTPS 链接发现还是无法在 web 端正常使用 vscode,排查发现 code-server 使用 WebSocket 以保持长连接,因此需要在 nginx 配置文件中增加对 WebSocket 配置。
执行 vim /etc/nginx/conf.d/www.muyunyun.cn.conf
进行编辑,完整的 nginx 配置如下:
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
upstream code_muyunyun_cn {
server 127.0.0.1:5555;
}
server {
server_name code.muyunyun.cn;
listen 80;
listen [::]:80;
rewrite ^(.*)$ https://$host$1 permanent;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name code.muyunyun.cn;
root /usr/share/nginx/html/code.muyunyun.cn;
location / {
proxy_pass http://code_muyunyun_cn;
proxy_set_header Host $host:443;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# support websocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
ssl_certificate "/etc/nginx/ssl/code.muyunyun.cn/fullchain.cer";
ssl_certificate_key "/etc/nginx/ssl/code.muyunyun.cn/code.muyunyun.cn.key";
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
重新加载 nginx 配置后,此时已经可以在 web 端使用上 code-server 的能力。
在 web 端中提交 git 代码
登入树莓派端,执行如下命令生成 ssh 密钥:
# 以 github 为例
ssh-keygen -t rsa -C "youremail@example.com" -f ~/.ssh/github
然后将 ~/.ssh/github.pub 公钥中的内容复制到剪贴板,拷贝到 GitHub ssh 的 Key 文本框中。
经验证,至此已经可以在 web 中提交代码到 github。
基于树莓派部署 code-server的更多相关文章
- 运维监控-基于yum的方式部署Zabbix Server 4.0 版本
运维监控-基于yum的方式部署Zabbix Server 4.0 版本 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如何选择zabbix版本 1>.打开zabbix官方 ...
- 基于树莓派的智能家居项目的设想与实现 Hestia
注:本人内容的准确性仅限于笔者写该篇文章时的情况,不保证后续与实际项目代码一致.实时内容还请关注Github项目托管页面:https://github.com/GenialX/hestia-serve ...
- [系统集成] 基于Kubernetes 部署 jenkins 并动态分配资源
基于kubernetes 部署 jenkins master 比较简单,难点是为 jenkins 动态分配资源.基于kubernetes 为 jenkins 动态分配资源需要实现下述功能: 资源分配: ...
- 部署Win Server 2012十项注意
博文来自 http://server.zol.com.cn/351/3511746.html Windows Server 2012是微软公司在2012年推出的面向中小企业应用一款全新的服务器操作系统 ...
- 微软ASP.NET网站部署指南(2):部署SQL Server Compact数据库
1. 综述 对于数据库訪问,Contoso University程序要求以下的软件必须随程序一起部署.由于不属于.NET Framework: SQL Server Compact (数据库引擎) A ...
- DIY一个基于树莓派和Python的无人机视觉跟踪系统
DIY一个基于树莓派和Python的无人机视觉跟踪系统 无人机通过图传将航拍到的图像存储并实时传送回地面站差点儿已经是标配.假设想来点高级的--在无人机上直接处理拍摄的图像并实现自己主动控制要怎么实现 ...
- Cas(02)——部署Cas Server
部署Cas Server Cas应用都需要有一个Cas Server.Cas Server是基于Java Servlet实现的,其要求部署在Servlet2.4以上版本的Web容器中.在此笔者将其部署 ...
- kubernetes(14):k8s基于NFS部署storageclass实现pv自动供给
k8s基于NFS部署storageclass实现pv自动供给 https://www.cnblogs.com/Smbands/p/11059843.html https://www.jianshu.c ...
- 部署Ambari Server实战案例
部署Ambari Server实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.准备三台虚拟机(需要自行安装jdk环境) 1>.角色分配 NameNode节点: h ...
随机推荐
- .NET 5 全自动分表组件,.NET 分表方案 ,分表架构与设计
一.疑问&目的 1.1 分表使用场景 (1)可扩展架构设计,比如一个ERP用5年不卡,到了10就卡了因为数据太多了,这个时候很多人都是备份然后清空数据,这个工作大并且麻烦,以前的数据很难在使用 ...
- jQuery常用验证
1.文本框不能为为空 if ($("#RushStartTime").val() == "") { alert("请输入该产品.."); $ ...
- linux 内核源代码情景分析——i386 的页式内存管理机制
可以看出,在页面目录中共有210 = 1024个目录项,每个目录项指向一个页面表,而在每个页面表中又共有1024个页面描述项. 由图看出来,从线性地址到物理地址的映射过程为: 1)从CR3取得页面目录 ...
- oracle修改CHARACTERSET
[oracle@vm10-84-32-2 ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Thu Jun 11 1 ...
- Linux系统编程之进程概念
注:本文部分图片来源于网络,如有侵权,请告知删除 1. 什么是进程? 在了解进程概念之前,我们需要先知道程序的概念. 程序,是指编译好的二进制文件,这些文件在磁盘上,并不占用系统资源. 进程,指的是一 ...
- 基于 OSPF 路由的邻居邻接关系发现实践
1.实验目的 理解 OSPF 邻居关系和 OSPF 邻接关系的含义及差别 观察 OSPF 邻居邻接关系的建立过程 观察 OSPF 链路状态数据库的同步过程 2.实验原理 OSPF 网络中,路由器在发送 ...
- 从0到1使用Kubernetes系列(六):数据持久化实战
本文是从 0 到 1 使用 Kubernetes 系列第六篇,上一篇<从 0 到 1 使用 Kubernetes 系列(五):Kubernetes Scheduling>介绍了 Kuber ...
- Spring一套全通—工厂
百知教育 - Spring系列课程 - 工厂 第一章 引言 1. EJB存在的问题 2. 什么是Spring Spring是一个轻量级的JavaEE解决方案,整合众多优秀的设计模式 轻量级 1. 对于 ...
- Git撤销、回滚操作
git的工作流 工作区:即自己当前分支所修改的代码,git add xx 之前的!不包括 git add xx 和 git commit xxx 之后的. 暂存区:已经 git add xxx 进去, ...
- webpack 打包样式资源
webpack 打包样式资源 webpack.config.js配置文件内容为: // 用来拼接绝对路径的方法 const {resolve} = require('path') module.exp ...