centos搭建code-server及配置HTTPS、登录页自定义

这篇具有很好参考价值的文章主要介绍了centos搭建code-server及配置HTTPS、登录页自定义。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  • 自定义登录页面
    centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode
  • 功能预览
    centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode

一、Code-Server

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

二、安装及运行

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

centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode

  1. 进入到安装目录中
cd /opt/code-server
  1. 通过export运行
    • PASSWORD:指定密码(明文密码)
    • –port 8426:指定端口信息
    • –host 0.0.0.0:开启外网访问
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0
  1. 启动日志如下
[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
  1. 可以通过&进行后台运行
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0 &
  1. 关闭可以直接通过kill命令
netstat -tnlp | grep 8426
kill pid
  1. 上述运行当终端退出时会同时退出code-server,故需要在启动脚本的时候增加nohup,终端退出不中断进程
export PASSWORD="xxxx" && nohup ./bin/code-server --port 8426 --host 0.0.0.0 &
  1. 访问 http://ip:8426 ,输入启动时配置的密码即可进入登录页(注意看到此时是通过http进行访问)

三、系统配置

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

四、HTTPS配置

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

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

centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode

  1. 在~/.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
  1. 在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
  1. 重启code-server,然后通过https成功访问
export PASSWORD="xxxx" && nohup ./bin/code-server &

五、登录页面自定义

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

centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode
2. 在code-server/src/browser/pages下就是登录页面的代码信息,就是普通的html的css

centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode
centos搭建code-server及配置HTTPS、登录页自定义,35_技术实践,31_软件学习,linux,vscode
3. 修改login.html,login.css文件,根据自己的需要修改
4. login.html代码示例(核心就是form表单提交,然后增加了回车登录,多余的代码全部删除了,图片等信息根据自己的需要替换)文章来源地址https://www.toymoban.com/news/detail-704451.html

<!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" />
  <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" />
  <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
  <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/global.css" />
  <link rel="stylesheet" href="{{CS_STATIC_BASE}}/src/browser/pages/login.css" />
  <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>

  1. 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;
}
  1. 重新登录刷新页面,恭喜你,拥有了一个自己IDE,可以在此IDE里面搞一个自己的代码仓库,随时随地coding

到了这里,关于centos搭建code-server及配置HTTPS、登录页自定义的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Linux环境配置】7. Linux部署code-server

    两种方法,一种是在线安装,另一种是本地安装。因为主机访问github可能会报443错误,因此这里我 推荐使用本地安装方法 ! 本地安装方法 进入github,搜索code-server找到项目地址:https://github.com/coder/code-server/releases 找到适合自己系统的版本下载 下载完后,使用ftp工具将其传

    2024年02月05日
    浏览(38)
  • 阿里云centos9stream安装宝塔+vscode(code-server)集成云端开发环境

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

    2024年02月10日
    浏览(57)
  • 远程办公、企业内网服务器的Code-Server上如何配置使用CodeGeeX插件

    很多小伙伴都会在工作中使用code-server,比如说远程办公,当你需要在家访问你的工作环境,亦或者是你们公司的Docker是放入服务器中。code-server 无疑是最好的选择,它可以让你通过互联网安全地连接到远程服务器上的开发环境并且使用VS Code。 这也符合code-server的初衷——能

    2024年03月14日
    浏览(87)
  • 在线代码编辑器code-server

    今天是上海浦西全域静态管理的第 32 天。祝大家 5.1 假期 “无疫” 快乐! 周五、周六休息,没做核酸也没做抗原,周日、周一抗原。 周六再次迎来了降级,小区从管控区降为了防范区,不过还是按管控区管理,反正就是不能出小区,也许防范区是给未来的解封准备的吧。

    2024年02月04日
    浏览(72)
  • 整合了massCode和插件的code-server

    公众号的年度小结出来了,没想到自己居然写了这么多 本文应网友 快乐100 要求折腾,但老苏并不是程序员,对这种专业工具并不熟,所以错漏在所难免,见谅; 什么是 massCode ? massCode 是为开发人员提供的免费开源代码片段管理器。它可以帮助您创建和组织您自己的个人片

    2024年01月20日
    浏览(97)
  • 服务器(容器)开发指南——code-server

    GitHub官方地址 官方下载地址 code-server :运行在浏览器上的VSCode。 自VSCode发布以来,VSCode就受到了广大程序员的青睐。VSCode丰富的插件能够满足使用者各色各样的需求。但VSCode使用受限于图形化界面的需求,只能安装在客户端而不能安装在服务器上。code-server的出现完美的解

    2024年02月04日
    浏览(47)
  • code-server无法显示图片、视频等数据的解决办法

    code-server无法显示图片、视频,无法读取剪切版 大意是code-server运行在非安全环境中,网页视图、剪切板等功能无法正常使用。 方法1:在浏览器中设置忽略(推荐) 以edge浏览器为例,在地址栏输入 edge://flags ,进入“实验”界面 在“搜索标志”中输入Insecure origins treated as

    2024年01月25日
    浏览(40)
  • 【Android平板编程】远程Ubuntu服务器code-server编程写代码

      本次教程将在 Ubuntu 服务器环境下安装 code-server ,并使用 Android 安卓平板远程 Ubuntu 服务,进行远程编程开发写代码。同时搭配 cpolar 内网穿透工具,实现公网环境下异地远程访问Ubuntu的code-server。   准备一台虚拟机,Ubuntu或者centos都可以,这里以 VMwhere ubuntu 系统为例  

    2023年04月14日
    浏览(45)
  • 如何使用安卓平板上远程Ubuntu服务器通过code-server远程开发

    🍎 博客主页:🌙@披星戴月的贾维斯 🍎 欢迎关注:👍点赞🍃收藏🔥留言 🍇系列专栏:🌙 内网穿透 🌙请不要相信胜利就像山坡上的蒲公英一样唾手可得,但是请相信,世界上总有一些美好值得我们全力以赴,哪怕粉身碎骨!🌙 🍉一起加油,去追寻、去成为更好的自己

    2024年02月03日
    浏览(43)
  • 在Android平板上使用code-server公网远程Ubuntu服务器编程

    准备一台虚拟机,Ubuntu或者centos都可以,这里以VMwhere ubuntu系统为例 下载code server服务,浏览器访问:https://github.com/coder/code-server,复制下载链接 打开ubuntu命令行下载 出现需要输入ubuntu的登录账户密码,输入密码即可,然后等待安装完成 以下信息表示安装成功 接着输入以下命令设置

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包