阿里云centos9stream安装宝塔+vscode（code-server）集成云端开发环境

一、 安装宝塔面板

官网 https://www.bt.cn/new/download.htm
题外话：虽然感觉现在宝塔没以前好用了，而且有centos7、8 mysql编译导致OOM服务器挂掉无法ssh登录的情况，但他还是远程管理服务器的好选择，提示宝塔只支持最新的centos9stream，重要数据一定要备份,最好是全新的系统，而且需要与vscode相辅相成防止ssh上不去，面板访问不了的情况

先说一下我的版本

[root@iZ7xv7q4im4c48qen2do2bZ project]# cat /etc/redhat-release 
CentOS Stream release 9

按照官方文档安装宝塔

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

注意一定要保存好登录地址、账号、密码，小白注意谨慎修改ssh和22端口

登录面板

在这里插入图片描述
先不急修改账号密码，也可以现在改，port和登录hash都是可以修改的，一定要记住不然登录不了。除了初始密码之外，其他配置都是存在sqlite里的。

https://ip:port/登录hash

二、安装vscode远程版(code-server)

官网 https://coder.com/docs/code-server/latest/install#fedora-centos-rhel-suse

按照官网安装

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

三、 配置https

前言：可以发现宝塔面板是默认开启https的，coder-server刚启动是http模式。
https也就是ssl模式好处主要在于可信安全，开启了信任之后附带不管是调用浏览器高级api，或者是安装 progressive web app (PWA)程序都是十分方便的。
code-server官方也有说怎么开启https，但是他着重说了从CA获取证书，自签证书说的比较简洁，下面我说一下我使用的nginx转发的自签证书https模式

Q:什么是证书
A:用于服务器公钥的信任链叫做证书,由计算机内置根证书签名出其他的证书链，具体知识感兴趣可以学习一下

step1 本地自签证书

官网 https://github.com/FiloSottile/mkcert

按照你的操作系统，下载mkcert[下载链接]，并修改可执行文件名为mkcert

# 这一步是生成根证书,并本地信任
mkcert -install
# 这一步使用刚刚生成的根证书签发新的证书，注意下面的域名以及ip都需要改成你服务器的域名和ip，相当于锁死证书的使用范围
mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1
# 我们获取到了两个证书，每一个证书包含了私钥和公钥，根证书在`mkcert -CAROOT`命令输出的目录，签发的子证书在当前目录
# 公钥为*.pem这个就是证书,私钥为*key.pem这个是给服务器加密用的

step2 使code-server监听套接字，socket模式

Q:为什么使用UDS（Unix Domain Socket）通信而不是TCP通信
我们可以发现在linux下诸如docker等都是使用/run/*.sock文件进行通信的，它的性能比端口通信(一般是TCP)性能更好，而且可以节约一个端口，并且不对外暴露，使得服务更安全。

  1. 修改code-server配置
# 根据官方文档配置文件在这里，如果你修改过或者文档过时了可以自己去看官网
vi ~/.config/code-server/config.yaml

config.yaml 修改如下,顺便修改你的密码

#https://github.com/coder/code-server/discussions/2104
socket: /tmp/vscode.sock
auth: password
password: '你的密码，为什么用单引号隔开是防止有些需要转移的符号'
cert: False

可以看到
a. 开启了socket通信，地址是 /tmp/vscode.sock
b. 自身不开启cert，https认证

  1. 重启code-server服务
systemctl restart code-server@root
# 因为我是用root用户启动的给了它最高权限，如果不是，可以用tab键补全
  1. 配置伴随脚本给nginx用户(如果是宝塔安装的nginx默认是www用户)授权
# 生成授权脚本,脚本会轮训5秒检查/tmp/vscode.sock的创建，并给宝塔安装的nginx默认用户www授权读写
cat << EOF > /root/.local/share/code-server/code-server-after.sh
#!/bin/bash
timeout=5;start_time=$(date +%s);end_time=$((start_time + timeout));while [ $(date +%s) -lt $end_time ];do if [ -e /tmp/vscode.sock ] ;then setfacl -m u:www:rwX /tmp/vscode.sock;echo 'give permission ok';exit 0;else sleep 0.5; echo 'wait vscode.sock create ...';fi;done;echo 'fail,not found vscode.sock';exit -1;
EOF 
# 创建跟随服务，跟随code-server的服务启动后一次性授权脚本
cat << EOF >  /usr/lib/systemd/system/code-server-after@.service
[Unit]
Description=code-server-after
Requires=code-server@.service
After=code-server@.service
BindsTo=code-server@.service

[Service]
Type=oneshot
#ExecStart=/bin/bash -c "sleep 5 && setfacl -m u:www:rwX /tmp/vscode.sock"
ExecStart=/root/.local/share/code-server/code-server-after.sh
User=%i
RemainAfterExit=True

[Install]
WantedBy=default.target
EOF

# 允许code-server自启动
systemctl enable code-server@root
# 允许code-server-after跟随code-server单次运行
systemctl enable code-server-after@
# 因为code-server服务已经重启过了，跟随服务现在需要手动启动一次
systemctl start code-server-after@
  1. 检查配置是否生效
[root@iZ7xv7q4im4c48qen2do2bZ project]# getfacl /tmp/vscode.sock 
getfacl: Removing leading '/' from absolute path names
# file: tmp/vscode.sock
# owner: root
# group: root
user::rwx
user:www:rwx
group::r-x
mask::rwx
other::r-x

可以看到tmp/vscode.sock是存在的，而且www用户是有读写执行权限的，到此vscode配置结束

step3 宝塔安装nginx并配置

  1. 安装nginx，进入软件商店安装即可
    在这里插入图片描述
    看到nginx默认用户为www
    在这里插入图片描述

  2. 创建默认网站
    在这里插入图片描述
    并使用之前mkcert创建的子证书，左边是私钥，有私钥标识，右边是公钥，有认证标识
    在这里插入图片描述
    如果有域名可以进行域名访问，如果没有域名可以修改host文件的方式定义本机域名,现在介绍本地host方式,这种方法只能在你的计算机生效。自行配置，比如我的是example.com映射到我的公网服务器。

    然后去验证一下https生效
    在这里插入图片描述
    可以看到是安全的
    在这里插入图片描述
    可以在chrome浏览器地址栏的小锁点开证书看到详细信息里是由根证书1签发的证书2，我们的网站是用的证书2，而证书1是安装在我的电脑的根信任证书目录里的。所以我们的电脑信任了这个网站。如果需要其他人的电脑也信任这个证书。一是需要导出根证书(即公钥，不要给私钥)让其他人放到他电脑的根证书里，二是根据是否有域名决定要不要修改host。

  3. 配置nginx,新建/www/server/panel/vhost/nginx
    在这里插入图片描述
    内容如下

map $http_upgrade $connection_upgrade {  
     default upgrade;  
     '' close;  
}
server
{
    # listen 8080;
    listen 8081 ssl http2;
    listen [::]:8081 ssl http2;
    # listen 443 ssl http2;
    # server_name vscode.cn;

    # server_name mydomain.com;
    
        #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    ssl_certificate    /www/server/panel/vhost/cert/biewang.cn/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/biewang.cn/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    
    

    location / {
    #   if ($scheme = http) {
    #           return 301 http://$host:8081$request_uri;
    #   }
      proxy_pass http://unix:/tmp/vscode.sock;
    #   proxy_pass http://localhost:8443;
    #   proxy_http_version 1.1;
      proxy_set_header Host $host;
      proxy_set_header Origin https://$host;
      proxy_set_header X-Real-IP        $remote_addr;
      proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header Proxy-Protocol $scheme;
    #   proxy_connect_timeout 500s;
    #   proxy_read_timeout 3600s;
    #   proxy_send_timeout 3600s;
      
    }
    
    # location ~.*\.(js|css|html|png|jpg)$ {
    #     expires    3d;
    # }
    
    access_log  /www/wwwlogs/vscode.log;
    error_log  /www/wwwlogs/vscode.error.log ;
}


server
{
    listen 8080;
    listen [::]:8080;
    server_name vscode.cn;
# https://github.com/coder/code-server/issues/4723
    location / {
     if ($scheme = https) {
              return 301 http://$host:8081$request_uri;
      }
      proxy_pass http://unix:/tmp/vscode.sock;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
    #   https://github.com/coder/code-server/issues/6023#issuecomment-1506560010
      proxy_set_header Origin https://$host;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For $remote_addr;
      
    }
    
    # location / {
    #     return 301 https://$host$request_uri;
    # }

    access_log  /www/wwwlogs/vscode-http.log;
    error_log  /www/wwwlogs/vscode-http.error.log;
}
# 注： 可以去掉我杂七杂八的注释，只是之前遇到坑的一些标注，我开了http和https两个端口，你可以选择性开启。注意https证书我复用了步骤二我创建的默认网站的证书。

在宝塔修改器里保存便即时生效。
在这里插入图片描述
https访问安全有效，可以点击地址栏的在这里插入图片描述
图标安装为一个应用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/99115.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

扬杰科技携手企企通，召开SRM采购供应链协同系统项目启动会

扬杰科技携手企企通，召开SRM采购供应链协同系统项目启动会

近日&#xff0c;中国功率半导体领先企业扬州扬杰电子科技股份有限公司&#xff08;以下简称“扬杰科技”&#xff09;与企企通召开SRM采购供应链协同系统项目启动会&#xff0c;双方项目团队成员一同出席本次会议。 会上&#xff0c;双方就扬杰科技采购供应链管理平台项目的目…
阅读更多...
Python操作文件的读取和写入，详解和案例介绍

Python操作文件的读取和写入，详解和案例介绍

Python文件IO操作是Python编程中非常重要的一部分&#xff0c;可以通过文件IO操作来读取和写入文件。文件IO操作提供了一种在程序中处理文件的方法&#xff0c;可以读取文件中的数据&#xff0c;也可以将数据写入到文件中。在本文中&#xff0c;我们将介绍Python中文件IO操作的…
阅读更多...
无涯教程-Android - RadioGroup函数

无涯教程-Android - RadioGroup函数

RadioGroup类用于单选按钮集。 如果我们选中属于某个单选按钮组的一个单选按钮,它将自动取消选中同一组中以前选中的任何单选按钮。 RadioGroup属性 以下是与RadioGroup控制相关的重要属性。您可以查看Android官方文档以获取属性的完整列表以及可以在运行时更改这些属性的相关…
阅读更多...
python基础教程：re模块用法详解

python基础教程：re模块用法详解

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一、正则表达式的特殊字符介绍 正则表达式 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ 素材、视频教程、完整代码、插件安装教程我都准备好了&a…
阅读更多...
KingbaseDTS数据库迁移工具人大金仓国产数据库同步工具Java版本使用方法

KingbaseDTS数据库迁移工具人大金仓国产数据库同步工具Java版本使用方法

KingbaseDTS数据库迁移工具人大金仓国产数据库同步工具Java版本使用方法 金仓数据库简介 人大金仓数据库管理系统 KingbaseES&#xff08;KES&#xff09; 是面向全行业、全客户关键应用的企业级大型通用数据库管理系统&#xff0c;适用于联机事务处理、查询密集型数据仓库、…
阅读更多...
构建个人博客_Obsidian_github.io_hexo

构建个人博客_Obsidian_github.io_hexo

1 初衷 很早就开始分享文档&#xff0c;以技术类的为主&#xff0c;一开始是 MSN&#xff0c;博客&#xff0c;随着平台的更替&#xff0c;后来又用了 CSDN&#xff0c;知乎&#xff0c;简书…… 再后来是 Obsidian&#xff0c;飞书&#xff0c;Notion&#xff0c;常常有以下困…
阅读更多...
Unity实现倒计时和获取系统时间

Unity实现倒计时和获取系统时间

一：创建UGUI 1.创建Canvas画布组件，调节Canvas画布的分辨率等其他设置。我们可以把视图设置为2D模式下。 2.创建Text文本组件，取名为Timer计时器，我们调整Text文本组件的大小，用锚点设置Text文本组件的位置，并且设置好Text文本组件的颜色。 3.我们再创建一个Text文…
阅读更多...
技术实践｜Hive数据迁移干货分享

技术实践｜Hive数据迁移干货分享

导语 Hive是基于Hadoop构建的一套数据仓库分析系统&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供完整的SQL查询功能。它的优点是可以通过类SQL语句快速实现简单的MapReduce统计&#xff0c;不用再开发专门的MapReduce应用程序&#xff0c;从而降低…
阅读更多...
简单聊聊Https的来龙去脉

简单聊聊Https的来龙去脉

简单聊聊Https的来龙去脉 Http 通信具有哪些风险Https Http SSL/TLS对称加密 和 非对称加密数字证书数字证书的申请数字证书怎么起作用 Https工作流程一定需要Https吗&#xff1f; Http 通信具有哪些风险 使用明文通信&#xff0c;通信内容可能会被监听不验证通信双方身份&a…
阅读更多...
WebGL：开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗

WebGL：开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗

一、WebGL发展史 2006 年&#xff0c;WebGL 的发展史可以追溯到 2006 年左右&#xff0c;当时 Mozilla Foundation 的一个开发人员 Vladimir Vukićević 开始尝试在 Firefox 浏览器中嵌入 OpenGL&#xff0c;为 JavaScript 提供底层图形库的支持。随后&#xff0c;这个项目引…
阅读更多...
开启EMQX的SSL模式及SSL证书生成流程

开启EMQX的SSL模式及SSL证书生成流程

生成证书 首先&#xff1a;需要安装Openssl 以下是openssl命令 生成CA证书 1.openssl genrsa -out rootCA.key 2048 2.openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 3650 -subj "/CCN/STShandong/Ljinan/Oyunding/OUplatform/CNrootCA" -out ro…
阅读更多...
js中?.、??、??=的用法及使用场景

js中?.、??、??=的用法及使用场景

上面这个错误&#xff0c;相信前端开发工程师应该经常遇到吧&#xff0c;要么是自己考虑不全造成的&#xff0c;要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情&#xff0c;下面就介绍ES6一些新的语法来方便…
阅读更多...
前端三大Css处理器之Less

前端三大Css处理器之Less

Less是Css预处理器之一&#xff0c;分别有Sass、Less、Stylus这三个。 Lesshttps://lesscss.org/ Less是用JavaScript编写的&#xff0c;事实上&#xff0c;Less是一个JavaScript库&#xff0c;他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数…
阅读更多...
【SpringBoot系列】 测试框架之@SpringBootTest的使用

【SpringBoot系列】 测试框架之@SpringBootTest的使用

SpringBootTest的详细介绍 SpringBootTest 是 Spring Boot 测试框架中的注解&#xff0c;用于标识一个测试类&#xff0c;以指示该类是一个 Spring Boot 应用程序的测试类。它允许你在测试环境中加载整个 Spring Boot 应用程序上下文&#xff0c;测试应用程序的各种组件、服务…
阅读更多...
​放弃数据库，改用Kafka！

​放弃数据库，改用Kafka！

长期以来&#xff0c;数据库一直充当着记录系统&#xff0c;它们以可靠且持久的方式存储和管理关键数据&#xff0c;也赢得了大多数公司的信赖。 但时代在变。许多新兴趋势正在影响当今数据的存储和管理方式&#xff0c;不得不让一些技术决策者们重新考虑数据存储究竟还有哪些…
阅读更多...
Docker Compose 安装使用 教程

Docker Compose 安装使用 教程

Docker Compose 1.1 简介 Compose 项目是 Docker 官方的开源项目&#xff0c;负责实现对 Docker 容器集群的 快速编排 。从功能上看&#xff0c;跟 OpenStack 中的 Heat 十分类似。 其代码目前在 https://github.com/docker/compose 上开源。 Compose 定位是 「定义和运行多个…
阅读更多...
C# VS调试技巧

C# VS调试技巧

一.按照条件调试步骤 ①在需要代码执行的行打断点 ②触发此断点&#xff0c;让代码执行到此处 ③鼠标滑至在断点处&#xff0c;点击设置 ④设置断点条件&#xff0c;如下图所示 二、多线程调试技巧 ①在需要代码执行的行打断点 ②触发此断点&#xff0c;让代码执行到此处…
阅读更多...
Sharding-JDBC分片策略

Sharding-JDBC分片策略

Sharding-JDBC分片策略 包含分片键和分片算法&#xff0c;由于分片算法的独立性&#xff0c;将其独立抽离。真正可用于分片操作的是分片键 分片算法&#xff0c;也就是分片策略。目前提供5种分片策略。 一个好的分片策略好的分片键好的的分片算法 1. 标准分片策略 对应Stan…
阅读更多...
如何在访问一个页面时，将访问时刻的时间显示在页面上

如何在访问一个页面时，将访问时刻的时间显示在页面上

1.如何在访问一个页面时&#xff0c;将访问时刻的时间显示在页面上 GetMapping("/append") public ModelAndView append() {ModelAndView mvnew ModelAndView("expense/append");String date LocalDate.now().toString();mv.addObject("date",d…
阅读更多...
百度文心一言GPT免费入口也来了！！！

百度文心一言GPT免费入口也来了！！！

文心一言入口地址&#xff1a;文心一言能力全面开放 文心一言是百度全新一代知识增强大语言模型&#xff0c;文心大模型家族的新成员&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。 文心一言的技…
阅读更多...
最新文章

Copyright @ 2022~2023