centos搭建code-server配置HTTPS登录页自定义实现步骤

目录
  • 自定义登录页面
    • 功能预览
  • 一、Code-Server
  • 二、安装及运行
  • 三、系统配置
  • 四、HTTPS配置
  • 五、登录页面自定义

自定义登录页面

注:本版本基于4.11.0,在此之前版本,在centos上会出现CPU占用一直100%的情况,当前版本已经搭建两个月,综合下来比较稳定 通过搭建Code-Server,拥有一个自己自定义话的IDE,上图预览

功能预览

一、Code-Server

  • Code-Server是一款网页版的IDE,相当于VSCode网页版(vscode.dev/ ),搭建完成后可以随时随地访问自己的代码
  • 主要用途是让用户可以在任意设备和平台上使用基于web的IDE来进行编程工作。通过Code-Server可以使用浏览器访问远程服务器上的IDE,而无需在本地安装软件和配置开发环境。这对于不方便或不允许本地安装IDE和开发环境的时候来说非常有用,也可以帮助远程团队共享开发环境。Code-Server还支持许多功能,如代码高亮显示、调试、IntelliSense和托管Git存储库等
  • 发行地址:github.com/cdr/code-se…

二、安装及运行

  • 操作系统:CentOS Linux 7.8
  • coder-server:4.11.0版本
  • 下载code-server压缩文件
wget https://github.com/coder/code-server/releases/download/v4.11.0/code-server-4.11.0-linux-amd64.tar.gz
  • 解压到个人路径
tar -zxvf code-server-4.11.0-linux-amd64.tar.gz -C /opt/
mv code-server-4.11.0-linux-amd64 code-server

  • 进入到安装目录中
cd /opt/code-server
  • 通过export运行

    • PASSWORD:指定密码(明文密码)
    • --port 8426:指定端口信息
    • --host 0.0.0.0:开启外网访问
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0
  • 启动日志如下
[2021-07-28T07:20:20.077Z] info  code-server 4.11.0 4e8cd09ef0412dfc7b148b7639a692e20e4fd6dd
[2021-07-28T07:20:20.078Z] info  Using user-data-dir ~/.local/share/code-server
[2021-07-28T07:20:20.094Z] info  Using config file ~/.config/code-server/config.yaml
[2021-07-28T07:20:20.094Z] info  HTTP server listening on http://0.0.0.0:9999
[2021-07-28T07:20:20.094Z] info    - Authentication is enabled
[2021-07-28T07:20:20.094Z] info      - Using password from $PASSWORD
[2021-07-28T07:20:20.094Z] info    - Not serving HTTPS
  • 可以通过&进行后台运行
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0 &
  • 关闭可以直接通过kill命令
netstat -tnlp | grep 8426
kill pid
  • 上述运行当终端退出时会同时退出code-server,故需要在启动脚本的时候增加nohup,终端退出不中断进程
export PASSWORD="xxxx" && nohup ./bin/code-server --port 8426 --host 0.0.0.0 &
  • 访问 http://ip:8426 ,输入启动时配置的密码即可进入登录页(注意看到此时是通过http进行访问)

三、系统配置

  • 从启动日志中看到使用了配置文件内容: Using config file ~/.config/code-server/config.yaml,查看此文件内容如下
bind-addr: 127.0.0.1:8426
auth: password
password: <密码信息>
cert: false
  • 可以看到启动配置了默认密码信息,修改配置文件
vim ~/.config/code-server/config.yaml
bind-addr: 0.0.0.0:8426
auth: password
password: 密码(这里的密码需要先通过上面export启动后生成的密文密码,也可以不用配置,使用export导出密码)
cert: false
  • 重启code-server,通过下面命令启动
export PASSWORD="xxxx" && nohup ./bin/code-server &

四、HTTPS配置

默认情况下是通过http访问,此时并不安全,例如密码和敏感文件信息可能被拦截到,所以最好是配置https,加强安全 配置https需要SSL证书,阿里云可以申请免费的20个证书

  • 在阿里云SSL整数出申请免费证书,审核通过之后下载Apache证书文件,下载完成后压缩包内有三个文件(注意是Apache

    • xxxx.key
    • xxxx_chain.crt
    • xxxx_public.crt

  • 在~/.local/share/code-server下创建cert文件夹,存储位置和名称可以任意,按照自己的需要进行更改
# pwd
/root/.local/share/code-server/cert
# ll
total 12
# 将下载的证书文件上传到此处
-rw-r--r-- 1 root root 1679 Jul 22 14:58 www.codecoord.com_chain.crt
-rw-r--r-- 1 root root 1675 Jul 22 14:58 www.codecoord.com.key
-rw-r--r-- 1 root root 2147 Jul 22 14:58 www.codecoord.com_public.crt
  • 在code-server配置文件文件中增加证书配置

    • vim /root/.config/code-server/config.yaml
    • cert及cert-key位置根据自己证书位置进行配置
bind-addr: 0.0.0.0:8426
auth: password
password: <你的密码>
cert: /root/.local/share/code-server/cert/www.codecoord.com_public.crt
cert-key: /root/.local/share/code-server/cert/www.codecoord.com.key
  • 重启code-server,然后通过https成功访问
export PASSWORD="xxxx" &amp;&amp; nohup ./bin/code-server &amp;

五、登录页面自定义

  • 默认的登录页面如下,整体界面比较素,可以修改主页然后自定义一个酷炫的登录,如文章开图所示

2. 在code-server/src/browser/pages下就是登录页面的代码信息,就是普通的html的css

3. 修改login.html,login.css文件,根据自己的需要修改 4. login.html代码示例(核心就是form表单提交,然后增加了回车登录,多余的代码全部删除了,图片等信息根据自己的需要替换)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>码坐标-IDE权限认证</title>
  <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" rel="external nofollow"  rel="external nofollow"  />
  <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" rel="external nofollow"  rel="external nofollow"  />
  <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" rel="external nofollow"  />
  <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" rel="external nofollow"  />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" rel="external nofollow"  />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/login.css" rel="external nofollow"  />
  <meta id="coder-options" data-settings="{{OPTIONS}}" />
</head>
<body>
  <div class="center-container login-container">
    <div>
      <form id="loginForm" method="post">
        <input id="base" type="hidden" name="base" value="{{BASE}}" />
        <input id="href" type="hidden" name="href" value="" />
        <input required autofocus class="password" id="password" type="password" placeholder="请输入授权口令" name="password"
          onkeydown="validPass()" autocomplete="off" />
      </form>
    </div>
  </div>
  <script>
    const el = document.getElementById("href")
    if (el) {
      el.value = location.href
    }
    function validPass() {
      var event = arguments.callee.caller.arguments[0] || window.event;
      if (event.keyCode == 13) {
        let loginForm = document.getElementById("loginForm")
        let password = document.getElementById("password").value
        if (!password) {
          return
        }
        loginForm.submit()
      }
    }
  </script>
</body>
  • login.css代码示例,不需要的已经全部删除了
body {
  background-image: url(../media/hacker.jpg);
  background-size: cover;
}
.password {
  background-color: rgb(244, 247, 252);
  border: 1px solid #ddd;
  box-sizing: border-box;
  color: black;
  padding: 10px;
  width: 600px;
  height: 50px;
  font-size: 1rem;
  position: relative;
  top: -3rem;
}
input:focus {
  outline: none;
}
  • 重新登录刷新页面,恭喜你,拥有了一个自己IDE,可以在此IDE里面搞一个自己的代码仓库,随时随地coding

以上就是centos搭建code-server及配置HTTPS、登录页自定义的详细内容,更多关于centos搭建code-server配置HTTPS的资料请关注我们其它相关文章!

(0)

相关推荐

  • centos8中使用yum安装 nginx的详细过程

    目录 centos8中怎样使用yum安装 nginx yum 直接安装 使用vim编辑 nginx基本命令 centos8中怎样使用yum安装 nginx centos8 安装 nginx yum 直接安装 centos8和centos7安装nginx有点点不一样,centos8 自带了nginx 1.14.1 ,我们先升级到新稳定版1.20.1 在etc目录下创建repo源文件 cd /etc/yum.repos.d touch nginx.repo 使用vim编辑 vim nginx.rep

  • Centos 7.9安装MySQL8.0.32的详细教程

    目录 第一步.下载压缩包 第二步,解压压缩包,并复制到安装目录 第三步.编辑配置文件 第四步.确定一些相关的目录 第五步.初始化数据库 第六步.启动数据库,连接并修改 root 密码 第六步.守护 MySQL 进程 第七步.验证 第一步.下载压缩包 下载社区版的 MySQL,根据需求下载对应版本,其中有最小安装版本.具体各个版本的区别,可以上网查询,链接MySQL :: Download MySQL Community Server 第二步,解压压缩包,并复制到安装目录 进入到压缩包所在的文件夹

  • centos7安装zabbix 5.0的详细过程

    目录 环境说明 安装前配置 安装postgresql 数据库安装配置 修改postgres密码 设置zabbix账户及数据库 安装zabbix 安装zabbix及前端 zabbix数据库初始化 配置zabbix server 前端php配置 启动zabbix服务器 前端设置 添加被监控机 被监控机配置 zabbix服务端配置 环境说明 名称 版本 下载地址 zabbix 5.0 LTS https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix

  • 在Centos下安装python

    1.下载python包 wget https://www.python.org/ftp/python/3.9.10/Python-3.9.10.tgz 2.下载python3编译的依赖包 yum install -y gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-de

  • CentOS 7下安装配置proftpd搭建ftp服务器的详细教程

    proftpd全称:Professional FTP daemon,是针对Wu-FTP的弱项而开发的,除了改进的安全性,还具备许多Wu-FTP没有的特点,能以Stand-alone.xinetd模式运行等.ProFTP已经成为继Wu-FTP之后最为流行的FTP服务器软件,越来越多的站点选用它构筑安全高效的FTP站点,ProFTP配置方便,并有MySQL和Quota模块可供选择,利用它们的完美结合可以实现非系统账号的管理和用户磁盘的限制.<摘抄百度百科> 本章通过下载源码的方式安装,可以到官网下

  • CentOS 配置无密码登录的实现

    CentOS 配置无密码登录 配置sshd服务 在服务器上修改/etc/ssh/sshd_config: <!-- lang: shell --> #禁止root登录 PermitRootLogin no #指定可以登录的用户 AllowUsers bob alice StrictModes yes #关闭密码验证 PasswordAuthentication no #打开RSA验证相关设置 RSAAuthentication yes PubkeyAuthentication yes Auth

  • Visual Studio Code (VSCode) 配置搭建 C/C++ 开发编译环境的流程

    目录 前言 VSCode安装流程 1. 下载VScode 2. 安装C/C++扩展插件工具 3. 下载MinGW 4. 配置环境变量 5. 使用简单的.cpp文件配置C++环境 6. 运行 扩展 前言 工作多年,突然发现很多C++的基础都忘记了,加之C++不断更新换代后的各种新特性,于是想重拾C++的基础学习.虽然现在工作都是Linux平台,但考虑到个人方便,自己也仅仅想重温语法,家里家外都可使用,决定搭建一下C++ IDE开发环境.记得N年前刚开始接触编程时,使用的是Visual C++6.0

  • nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)

    一.服务器基础配 置 远程链接服务器 ssh 用户名@公网ip 默认的用户名是root,假如公网 ip 是 a.b.c.d, 那链接命名就是 ssh root@a.b.c.d 下载安装基础库 yum -y install gcc gcc-c++ autoconf pcre pcre-devel make automake yum -y install wget httpd-tools vim 关闭 iptables 查看iptables规则 iptables -L 或 iptables -t n

  • Linux下nginx配置https协议访问的方法

    一.配置nginx支持https协议访问,需要在编译安装nginx的时候添加相应的模块--with-http_ssl_module 查看nginx编译参数:/usr/local/nginx/sbin/nginx -V 如下所示: configure arguments: --prefix=/usr/local/nginx --with-google_perftools_module --without-http_memcached_module --user=www --group=www --

  • .Net Core和jexus配置HTTPS服务方法

    花了几天时间,看了好多篇博客,终于搞定了网站的HTTPS服务,借此写篇博客,来让有需要的朋友少走弯路. 一.环境介绍 1.Linux下在Docker容器中部署好了一个网站,该网站需要通过外部提供程序访问微软的登录平台,利用的是OAuth2.0协议,因此要求必须要使用SSL服务,也使得网站必须要加入HTTPS服务. 2.容器外,宿主机上通过jexus做端口转发.(本没打算用到jexus,但是看到情形不对,还是必须把它拉入进来) 3.HTTPS服务需要证书,通过在腾讯云上申请免费证书https://

  • CentOS搭建FTP文件服务的步骤

    基于 CentOS 搭建 FTP 文件服务,供大家参考,具体内容如下 系统要求:CentOS 7.2 64 位操作系统 一.安装VSFTPD (vsftpd 是在 Linux 上被广泛使用的 FTP 服务器,根据其[官网介绍][https://security.appspot.com/vsftpd.html],它可能是 UNIX-like 系统下最安全和快速的 FTP 服务器软件.) yum install vsftpd -y 启动 VSFTPD(安装完成后,启动 FTP 服务) service

  • CentOS 7 安装并配置 MySQL 5.6的步骤详解

    Linux使用MySQL Yum存储库上安装MySQL 5.6,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 一.全新安装MySQL 1.添加MySQL Yum存储库 将MySQL Yum存储库添加到系统的存储库列表中.这是一次性操作,可以通过安装MySQL提供的RPM来执行.跟着这些步骤: 1.1.到MySQL官网下载MySQL Yum存储库(https://dev.mysql.com/downloads/repo/yum/). 1.2.

  • 阿里云Nginx配置https实现域名访问项目(图文教程)

    第一步:签署第三方可信任的 SSL 证书 证书可以直接在阿里云里面申请免费的ssl证书 登录阿里云账号,在上方搜索栏内搜索ssl,点击ssl证书(应用安全) 来到这个页面后点击购买证书 如图选择免费版ssl证书,点击支付 支付完成后跳转到控制台首页,点击证书申请 填写完证书申请表单之后点击下一步 点击验证显示验证成功后再提交审核 审核通过后点击下载按钮 选择nginx旁边的下载 下载解压后得到一个.key和.pem文件,到这里,我们的证书申请工作已经做完了,下面可以开始配置https了 第二步:

  • CentOS 6.4安装配置LAMP服务器(Apache+PHP5+MySQL)

    准备篇: 1.配置防火墙,开启80端口.3306端口vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT #允许80端口通过防火墙-A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT #允许3306端口通过防火墙 备注:很多网友把这两条规则添加到防火墙配置的最后一行,导致防火墙启动失败, 正

随机推荐