centos搭建code-server配置HTTPS登錄頁(yè)自定義實(shí)現(xiàn)步驟

更新時(shí)間：2023年05月08日 09:27:10 作者：TianXinCoord

這篇文章主要為大家介紹了centos搭建code-server及配置HTTPS、登錄頁(yè)自定義實(shí)現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

自定義登錄頁(yè)面

注：本版本基于4.11.0，在此之前版本，在centos上會(huì)出現(xiàn)CPU占用一直100%的情況，當(dāng)前版本已經(jīng)搭建兩個(gè)月，綜合下來(lái)比較穩(wěn)定通過(guò)搭建Code-Server，擁有一個(gè)自己自定義話的IDE，上圖預(yù)覽

功能預(yù)覽

一、Code-Server

Code-Server是一款網(wǎng)頁(yè)版的IDE，相當(dāng)于VSCode網(wǎng)頁(yè)版（vscode.dev/ ），搭建完成后可以隨時(shí)隨地訪問(wèn)自己的代碼
主要用途是讓用戶可以在任意設(shè)備和平臺(tái)上使用基于web的IDE來(lái)進(jìn)行編程工作。通過(guò)Code-Server可以使用瀏覽器訪問(wèn)遠(yuǎn)程服務(wù)器上的IDE，而無(wú)需在本地安裝軟件和配置開發(fā)環(huán)境。這對(duì)于不方便或不允許本地安裝IDE和開發(fā)環(huán)境的時(shí)候來(lái)說(shuō)非常有用，也可以幫助遠(yuǎn)程團(tuán)隊(duì)共享開發(fā)環(huán)境。Code-Server還支持許多功能，如代碼高亮顯示、調(diào)試、IntelliSense和托管Git存儲(chǔ)庫(kù)等
發(fā)行地址：github.com/cdr/code-se…

二、安裝及運(yùn)行

操作系統(tǒng)：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

解壓到個(gè)人路徑

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

通過(guò)export運(yùn)行
- PASSWORD：指定密碼（明文密碼）
- --port 8426：指定端口信息
- --host 0.0.0.0：開啟外網(wǎng)訪問(wèn)

export PASSWORD="xxxx" &amp;&amp; ./bin/code-server --port 8426 --host 0.0.0.0

啟動(dòng)日志如下

[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

可以通過(guò)&進(jìn)行后臺(tái)運(yùn)行

export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0 &

關(guān)閉可以直接通過(guò)kill命令

netstat -tnlp | grep 8426
kill pid

上述運(yùn)行當(dāng)終端退出時(shí)會(huì)同時(shí)退出code-server，故需要在啟動(dòng)腳本的時(shí)候增加nohup，終端退出不中斷進(jìn)程

export PASSWORD="xxxx" && nohup ./bin/code-server --port 8426 --host 0.0.0.0 &

訪問(wèn) http://ip:8426 ，輸入啟動(dòng)時(shí)配置的密碼即可進(jìn)入登錄頁(yè)（注意看到此時(shí)是通過(guò)http進(jìn)行訪問(wèn)）

三、系統(tǒng)配置

從啟動(dòng)日志中看到使用了配置文件內(nèi)容： Using config file ~/.config/code-server/config.yaml，查看此文件內(nèi)容如下

bind-addr: 127.0.0.1:8426
auth: password
password: <密碼信息>
cert: false

可以看到啟動(dòng)配置了默認(rèn)密碼信息，修改配置文件

vim ~/.config/code-server/config.yaml

bind-addr: 0.0.0.0:8426
auth: password
password: 密碼（這里的密碼需要先通過(guò)上面export啟動(dòng)后生成的密文密碼，也可以不用配置，使用export導(dǎo)出密碼）
cert: false

重啟code-server，通過(guò)下面命令啟動(dòng)

export PASSWORD="xxxx" && nohup ./bin/code-server &

四、HTTPS配置

默認(rèn)情況下是通過(guò)http訪問(wèn)，此時(shí)并不安全，例如密碼和敏感文件信息可能被攔截到，所以最好是配置https，加強(qiáng)安全配置https需要SSL證書，阿里云可以申請(qǐng)免費(fèi)的20個(gè)證書

在阿里云SSL整數(shù)出申請(qǐng)免費(fèi)證書，審核通過(guò)之后下載Apache證書文件，下載完成后壓縮包內(nèi)有三個(gè)文件（注意是Apache）
- xxxx.key
- xxxx_chain.crt
- xxxx_public.crt

在~/.local/share/code-server下創(chuàng)建cert文件夾，存儲(chǔ)位置和名稱可以任意，按照自己的需要進(jìn)行更改

# 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位置根據(jù)自己證書位置進(jìn)行配置

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，然后通過(guò)https成功訪問(wèn)

export PASSWORD="xxxx" &amp;&amp; nohup ./bin/code-server &amp;

五、登錄頁(yè)面自定義

默認(rèn)的登錄頁(yè)面如下，整體界面比較素，可以修改主頁(yè)然后自定義一個(gè)酷炫的登錄，如文章開圖所示

2. 在code-server/src/browser/pages下就是登錄頁(yè)面的代碼信息，就是普通的html的css

3. 修改login.html，login.css文件，根據(jù)自己的需要修改 4. login.html代碼示例（核心就是form表單提交，然后增加了回車登錄，多余的代碼全部刪除了，圖片等信息根據(jù)自己的需要替換）

<!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>碼坐標(biāo)-IDE權(quán)限認(rèn)證</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="請(qǐng)輸入授權(quán)口令" 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>

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;
}