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

目录

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

自定义登录页面

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

• 启动日志如下

[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

五、登录页面自定义

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

• 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的资料请关注其它相关文章！