centos搭建code-server配置HTTPS登錄頁自定義實(shí)現(xiàn)步驟
更新時(shí)間：2023年05月08日 09:27:10 作者：TianXinCoord
這篇文章主要為大家介紹了centos搭建code-server及配置HTTPS、登錄頁自定義實(shí)現(xiàn)步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
自定義登錄頁面
注：本版本基于4.11.0，在此之前版本，在centos上會出現(xiàn)CPU占用一直100%的情況，當(dāng)前版本已經(jīng)搭建兩個(gè)月，綜合下來比較穩(wěn)定 通過搭建Code-Server，擁有一個(gè)自己自定義話的IDE，上圖預(yù)覽
功能預(yù)覽
一、Code-Server
- Code-Server是一款網(wǎng)頁版的IDE，相當(dāng)于VSCode網(wǎng)頁版（vscode.dev/ ），搭建完成后可以隨時(shí)隨地訪問自己的代碼
- 主要用途是讓用戶可以在任意設(shè)備和平臺上使用基于web的IDE來進(jìn)行編程工作。通過Code-Server可以使用瀏覽器訪問遠(yuǎn)程服務(wù)器上的IDE，而無需在本地安裝軟件和配置開發(fā)環(huán)境。這對于不方便或不允許本地安裝IDE和開發(fā)環(huán)境的時(shí)候來說非常有用，也可以幫助遠(yuǎn)程團(tuán)隊(duì)共享開發(fā)環(huán)境。Code-Server還支持許多功能，如代碼高亮顯示、調(diào)試、IntelliSense和托管Git存儲庫等
- 發(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
- 進(jìn)入到安裝目錄中
cd /opt/code-server
- 通過export運(yùn)行
- PASSWORD：指定密碼（明文密碼）
- --port 8426：指定端口信息
- --host 0.0.0.0：開啟外網(wǎng)訪問
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
- 可以通過&進(jìn)行后臺運(yùn)行
export PASSWORD="xxxx" && ./bin/code-server --port 8426 --host 0.0.0.0 &
- 關(guān)閉可以直接通過kill命令
netstat -tnlp | grep 8426 kill pid
- 上述運(yùn)行當(dāng)終端退出時(shí)會同時(shí)退出code-server，故需要在啟動腳本的時(shí)候增加nohup，終端退出不中斷進(jìn)程
export PASSWORD="xxxx" && nohup ./bin/code-server --port 8426 --host 0.0.0.0 &
- 訪問 http://ip:8426 ，輸入啟動時(shí)配置的密碼即可進(jìn)入登錄頁（注意看到此時(shí)是通過http進(jìn)行訪問）
三、系統(tǒ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
- 可以看到啟動配置了默認(rèn)密碼信息，修改配置文件
vim ~/.config/code-server/config.yaml
bind-addr: 0.0.0.0:8426 auth: password password: 密碼（這里的密碼需要先通過上面export啟動后生成的密文密碼，也可以不用配置，使用export導(dǎo)出密碼） cert: false
- 重啟code-server，通過下面命令啟動
export PASSWORD="xxxx" && nohup ./bin/code-server &
四、HTTPS配置
默認(rèn)情況下是通過http訪問，此時(shí)并不安全，例如密碼和敏感文件信息可能被攔截到，所以最好是配置https，加強(qiáng)安全 配置https需要SSL證書，阿里云可以申請免費(fèi)的20個(gè)證書
- 在阿里云SSL整數(shù)出申請免費(fèi)證書，審核通過之后下載Apache證書文件，下載完成后壓縮包內(nèi)有三個(gè)文件（注意是Apache）
- xxxx.key
- xxxx_chain.crt
- xxxx_public.crt
- 在~/.local/share/code-server下創(chuàng)建cert文件夾，存儲位置和名稱可以任意，按照自己的需要進(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，然后通過https成功訪問
export PASSWORD="xxxx" && nohup ./bin/code-server &
五、登錄頁面自定義
- 默認(rèn)的登錄頁面如下，整體界面比較素，可以修改主頁然后自定義一個(gè)酷炫的登錄，如文章開圖所示
2. 在code-server/src/browser/pages下就是登錄頁面的代碼信息，就是普通的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="請輸入授權(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>- login.css代碼示例，不需要的已經(jīng)全部刪除了
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;
}- 重新登錄刷新頁面，恭喜你，擁有了一個(gè)自己IDE，可以在此IDE里面搞一個(gè)自己的代碼倉庫，隨時(shí)隨地coding
以上就是centos搭建code-server及配置HTTPS、登錄頁自定義的詳細(xì)內(nèi)容，更多關(guān)于centos搭建code-server配置HTTPS的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Git在項(xiàng)目協(xié)作開發(fā)中所解決問題
這篇文章主要為大家介紹了Git在項(xiàng)目協(xié)作開發(fā)中所解決問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
使用Git Bash向GitHub上傳本地項(xiàng)目
這篇文章介紹了使用Git Bash向GitHub上傳本地項(xiàng)目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
解決Chrome在新版MacOS上報(bào)錯(cuò) NET::ERR_CERT_WEAK_KEY 的問題
這篇文章主要介紹了解決Chrome在新版MacOS上報(bào)錯(cuò) NET::ERR_CERT_WEAK_KEY 的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
文檔翻譯成中文軟件是指在處理文檔時(shí)，自動將文檔中的內(nèi)容翻譯成中文的軟件，本文就給大家介紹如何用ChatGPT將批量文檔翻譯成中文的方法，感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧2023-06-06
遠(yuǎn)程過程調(diào)用RPC基本概念及實(shí)現(xiàn)原理
這篇文章介紹了遠(yuǎn)程過程調(diào)用RPC基本概念及實(shí)現(xiàn)原理，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
git pull時(shí)沖突的幾種解決方式(小結(jié))
這篇文章主要介紹了git pull時(shí)沖突的幾種解決方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了現(xiàn)代前端越來越離不開的項(xiàng)目管理方式Monorepo的概念、MultiRepo的弊端、Monorepo的收益以及Monorepo的落地這幾個(gè)角度來認(rèn)識和學(xué)習(xí)Monorepo2022-07-07
這篇文章主要為大家詳細(xì)介紹了WebStorm 11.0.4安裝圖文教程，文中安裝步驟介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vscode中使用Autoprefixer3.0無效的解決方法
這篇文章主要介紹了vscode中使用Autoprefixer3.0無效的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
每個(gè)微信小程序都要在上線前配置好服務(wù)器域名,不然會顯示白屏,需要小程序開發(fā)者在小程序后臺操作設(shè)置,下面這篇文章主要給大家介紹了關(guān)于微信小程序配置服務(wù)器域名的詳細(xì)圖文教程,需要的朋友可以參考下2024-02-02