欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

centos搭建code-server配置HTTPS登錄頁自定義實現步驟

 更新時間：2023年05月08日 09:27:10   作者：TianXinCoord  
這篇文章主要為大家介紹了centos搭建code-server及配置HTTPS、登錄頁自定義實現步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

自定義登錄頁面

注：本版本基于4.11.0，在此之前版本，在centos上會出現CPU占用一直100%的情況，當前版本已經搭建兩個月，綜合下來比較穩(wěn)定 通過搭建Code-Server，擁有一個自己自定義話的IDE，上圖預覽

功能預覽

一、Code-Server

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

二、安裝及運行

  • 操作系統(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
  • 解壓到個人路徑
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進行訪問）

三、系統(tǒng)配置

  • 從啟動日志中看到使用了配置文件內容： 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下創(chuàng)建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的資料請關注腳本之家其它相關文章！

相關文章

  • Git在項目協(xié)作開發(fā)中所解決問題

    Git在項目協(xié)作開發(fā)中所解決問題

    這篇文章主要為大家介紹了Git在項目協(xié)作開發(fā)中所解決問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-04-04
  • 使用Git Bash向GitHub上傳本地項目

    使用Git Bash向GitHub上傳本地項目

    這篇文章介紹了使用Git Bash向GitHub上傳本地項目的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • 解決Chrome在新版MacOS上報錯 NET::ERR_CERT_WEAK_KEY 的問題

    解決Chrome在新版MacOS上報錯 NET::ERR_CERT_WEAK_KEY 的問題

    這篇文章主要介紹了解決Chrome在新版MacOS上報錯 NET::ERR_CERT_WEAK_KEY 的問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-05-05
  • ChatGPT將批量文檔翻譯成中文的方法

    ChatGPT將批量文檔翻譯成中文的方法

    文檔翻譯成中文軟件是指在處理文檔時，自動將文檔中的內容翻譯成中文的軟件，本文就給大家介紹如何用ChatGPT將批量文檔翻譯成中文的方法，感興趣的同學跟著小編一起來學習吧
    2023-06-06
  • 遠程過程調用RPC基本概念及實現原理

    遠程過程調用RPC基本概念及實現原理

    這篇文章介紹了遠程過程調用RPC基本概念及實現原理，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-01-01
  • git pull時沖突的幾種解決方式(小結)

    git pull時沖突的幾種解決方式(小結)

    這篇文章主要介紹了git pull時沖突的幾種解決方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-07-07
  • 前端工程Monorepo項目管理方式

    前端工程Monorepo項目管理方式

    這篇文章主要介紹了現代前端越來越離不開的項目管理方式Monorepo的概念、MultiRepo的弊端、Monorepo的收益以及Monorepo的落地這幾個角度來認識和學習Monorepo
    2022-07-07
  • WebStorm 11.0.4安裝圖文教程

    WebStorm 11.0.4安裝圖文教程

    這篇文章主要為大家詳細介紹了WebStorm 11.0.4安裝圖文教程，文中安裝步驟介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • vscode中使用Autoprefixer3.0無效的解決方法

    vscode中使用Autoprefixer3.0無效的解決方法

    這篇文章主要介紹了vscode中使用Autoprefixer3.0無效的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-06-06
  • 微信小程序配置服務器域名詳細圖文教程

    微信小程序配置服務器域名詳細圖文教程

    每個微信小程序都要在上線前配置好服務器域名,不然會顯示白屏,需要小程序開發(fā)者在小程序后臺操作設置,下面這篇文章主要給大家介紹了關于微信小程序配置服務器域名的詳細圖文教程,需要的朋友可以參考下
    2024-02-02

最新評論