Centos crea un servidor de códigos y configura HTTPS, personalización de la página de inicio de sesión

Language 2023-05-07 19:23:46 views: null

Nota: esta versión se basa en 4.11.0. Antes de esta versión, el uso de la CPU siempre será del 100 % en centos. La versión actual se ha construido durante dos meses y es relativamente estable. Al crear Code-Server, tiene un IDE de Word autodefinido, la vista previa anterior

  • página de inicio de sesión personalizadaimagen.png
  • vista previa de funcionesimagen.png

1. Servidor de códigos

  1. Code-Server es una versión web del IDE, que es equivalente a la versión web de VSCode ( vscode.dev/ ). Una vez completada la compilación, puede acceder a su propio código en cualquier momento y en cualquier lugar.
  2. El objetivo principal es permitir a los usuarios utilizar un IDE basado en web para programar en cualquier dispositivo y plataforma. A través de Code-Server, puede usar un navegador para acceder al IDE en el servidor remoto sin instalar software y configurar el entorno de desarrollo localmente. Esto es muy útil cuando es inconveniente o no está permitido instalar el IDE y el entorno de desarrollo localmente, y también puede ayudar a los equipos remotos a compartir entornos de desarrollo. Code-Server también admite muchas funciones, como resaltado de código, depuración, IntelliSense y alojamiento de repositorios Git, etc.
  3. Dirección de lanzamiento: github.com/cdr/code-se…

2. Instalación y operación

  1. Sistema operativo: CentOS Linux 7.8
  2. codificador-servidor: versión 4.11.0
  3. Descargue el archivo comprimido del servidor de códigos
wget https://github.com/coder/code-server/releases/download/v4.11.0/code-server-4.11.0-linux-amd64.tar.gz
复制代码
  1. Descomprimir a la ruta personal
tar -zxvf code-server-4.11.0-linux-amd64.tar.gz -C /opt/
mv code-server-4.11.0-linux-amd64 code-server
复制代码

imagen.png

  1. Ir al directorio de instalación
cd /opt/code-server
复制代码
  1. Ejecutar a través de la exportación
    • CONTRASEÑA: especifique la contraseña (contraseña de texto sin formato)
    • --port 8426: Especifique la información del puerto
    • --host 0.0.0.0: Abrir acceso a la red externa
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0
复制代码
  1. El registro de inicio es el siguiente
[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. Se puede ejecutar en segundo plano con &
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0 &
复制代码
  1. Cerrar puede ser directamente a través del comando matar
netstat -tnlp | grep 8426
kill pid
复制代码
  1. La operación anterior saldrá del servidor de códigos al mismo tiempo que sale la terminal, por lo que es necesario agregar nohup al iniciar el script, y la terminal sale sin interrumpir el proceso.
export PASSWORD="xxxx" && nohup ./bin/code-server --port 8426 --host 0.0.0.0 &
复制代码
  1. Visite http://ip:8426 , ingrese la contraseña configurada al inicio para ingresar a la página de inicio de sesión (tenga en cuenta que se accede a través de http en este momento)

3. Configuración del sistema

  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

imagen.png

  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. 默认的登录页面如下，整体界面比较素，可以修改主页然后自定义一个酷炫的登录，如文章开图所示

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

imagen.png imagen.png 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" />
  <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. Inicie sesión nuevamente para actualizar la página, felicitaciones, tiene su propio IDE, puede crear su propio almacén de códigos en este IDE y codificar en cualquier momento y en cualquier lugar

Supongo que te gusta

Origin juejin.im/post/7230335974085525541
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com