上課摸魚必備 -- Vscode網(wǎng)頁(yè)版的搭建教程
時(shí)間:2023-07-02 14:39:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-07-02 14:39:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
上課摸魚必備 -- Vscode網(wǎng)頁(yè)版的搭建教程:
上課摸魚必備 -- Vscode網(wǎng)頁(yè)版的搭建教程
前言
上課想練練數(shù)據(jù)結(jié)構(gòu)與算法?或者就是想玩玩兒Vscode?或者有一個(gè)自己的服務(wù)器,但是覺(jué)得沒(méi)有利用到極致?那么這篇文章將帶你搭建一個(gè)在線版的Vscode,利用瀏覽器實(shí)現(xiàn)全平臺(tái)使用Vscode,管你什么手機(jī),Pad,電腦,板磚,咳咳,整就完了?。?!
文章中所有的超鏈接都是很不錯(cuò)的資源,建議都要仔細(xì)看看,為了不讓文章那么太長(zhǎng),所以我用了不少超鏈接。
本文搭建環(huán)境:開(kāi)源項(xiàng)目code-server,一臺(tái)服務(wù)器(至少一核2G才能有比較流暢的效果)
如果本文對(duì)你有幫助的話,還望關(guān)注,點(diǎn)贊,轉(zhuǎn)發(fā),收藏,謝謝咯。(一)運(yùn)行效果
這個(gè)Vscode在線版是運(yùn)行在我買的阿里云學(xué)生機(jī)的9999端口的,畢竟9.9一月,對(duì)于學(xué)生黨很友好,我的個(gè)人博客也搭在上面的,性能一般,但是也很夠用了。
(二)基礎(chǔ)配置
1 - 下載code-server到服務(wù)器上
進(jìn)到服務(wù)器的SSH中,這個(gè)只要你買了服務(wù)器應(yīng)該都可以用SSH的,服務(wù)器還沒(méi)買的,也不會(huì)用服務(wù)器的,看以下幾篇文章(其實(shí)不限制與阿里云的,不是推廣阿里云哈,其他云怎么用大家自行選購(gòu),因?yàn)槲矣玫氖前⒗镌?,所以這幾篇文章也都是阿里云的一些使用教程):
- https://zhuanlan.zhihu.com/p/368487727
- https://www.zhihu.com/search?type=content&q=%E9%98%BF%E9%87%8C%E4%BA%91%E5%AD%A6%E7%94%9F%E6%9C%BA%E6%95%99%E7%A8%8B(自己挑著看)
- https://blog.csdn.net/u011002997/article/details/83933365
官網(wǎng)上應(yīng)該也還有比較完善的使用手冊(cè)啥的,深入玩一下的話,建議自己多研究研究,上面這幾篇文章也是我大體看上去不錯(cuò)的,要想明白究竟怎么用的還是要自己用好搜索引擎。
wget https://github.com/cdr/code-server/releases/download/v3.10.2/code-server-3.10.2-linux-amd64.tar.gz
這一步下載速度可能會(huì)很慢,甚至中途失敗,可以考慮掛代理,不會(huì)Linux下掛代理的,看我下面的騷操作
當(dāng)然,你最好有一個(gè)梯子,這樣總歸是要更快和更穩(wěn)定的。
下面我將演示如何在Windows下下載code-server再傳到服務(wù)器上:
- 首先我想介紹一下我使用過(guò)那么多的SSH最好用的一款軟件:Termius
這個(gè)軟件是真正的全平臺(tái),而且簡(jiǎn)直是我這種顏值控福利,終端各種皮膚,賊好看,如果你有幸申請(qǐng)到Github學(xué)生包的話,還有其他不少福利。
關(guān)于Termius的使用教程 - 在Windows下載code-server的壓縮包
點(diǎn)擊這個(gè)鏈接
再點(diǎn)這個(gè),就開(kāi)始下載了
- 下載完壓縮包之后,找到下載的位置,然后就要介紹Termius的SFTP功能
選中你的服務(wù)器
先找到你本地壓縮包的網(wǎng)址,選中你本地的壓縮包,直接拖到服務(wù)器上就行(哎,真不錯(cuò),我就是玩兒)
- 傳過(guò)去之后現(xiàn)在你可以到你的服務(wù)器中l(wèi)s -a一下,看看它在不在
那么以上就是下載的全部?jī)?nèi)容了
2 - 解壓安裝試運(yùn)行(運(yùn)行部分可以先不弄,下一步的更好用)
tar -xvzf code-server-3.10.2-linux-amd64.tar.gz
mv code-server-3.10.2-linux-amd64 code-server
- 運(yùn)行試下(建議先看下參數(shù)列表)
PS:得確保你開(kāi)了9999端口,下面是我的服務(wù)器防火墻配置
為啥不用8080端口?戳這
cd code-serverexport PASSWORD="你想設(shè)置的密碼"./code-server --port 9999 --host 0.0.0.0 --auth password
- –port 9999 指定端口,缺省時(shí)為 8080
- –host 0.0.0.0 允許公網(wǎng)訪問(wèn),缺省時(shí)為 127.0.0.1,只能本地訪問(wèn)
- –auth password 指定訪問(wèn)密碼,可通過(guò) export 命令設(shè)置,參數(shù)為 none 時(shí)不啟用密碼
./code-server --help
- 運(yùn)行后,打開(kāi) Chrome 訪問(wèn)“服務(wù)器公網(wǎng)IP:端口”,效果圖:
服務(wù)器公網(wǎng)IP去哪里查? 戳這
(三)高級(jí)配置
我們都知道Linux是可以寫shell腳本的,那么為了簡(jiǎn)化以上操作,也為了讓其根據(jù)我們意愿后臺(tái)運(yùn)行或者終止,我們著手寫兩個(gè)腳本,start.sh和shut.sh(腳本是要寫在code-server目錄的奧)
腳本執(zhí)行目標(biāo)
- start.sh
- 開(kāi)啟code-server,后臺(tái)運(yùn)行該進(jìn)程
- 記錄當(dāng)前進(jìn)程的PID,也專門記錄一個(gè)日志log文件便于以后查看
- 將PID存到文件里面
#start.sh
export PASSWORD="412523"
nohup ./code-server --port 9999 --host 0.0.0.0 --auth password > test.log 2>&1 &
echo $! > save_pid.txt
#shut.sh
kill -9 'cat save_pid.txt'
(四)Ios端/IpadOS端的最佳使用方式
本來(lái)配置完以上,我們用任何設(shè)備,只要用瀏覽器就可以使用了,但是Ios端和IpadOS端有一個(gè)可以更加沉浸體驗(yàn)的軟件,推薦給大家
選好點(diǎn)
Save就可以了,訪問(wèn)效果就如第一步運(yùn)行效果的圖
(五)使用流程總結(jié)
- SSH登入服務(wù)器
- cd code-server
- ./start.sh
- 瀏覽器直接訪問(wèn)網(wǎng)址/Apple系列產(chǎn)品的serveditor
- 關(guān)了,免得一直占用我的服務(wù)器:./shut.sh
(六)參考資料
- https://blog.csdn.net/liteng607/article/details/106601569?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161529894516780269818215%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=161529894516780269818215&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-106601569.first_rank_v2_pc_rank_v29&utm_term=ipad+Vscode
最后的最后
我是一個(gè)熱愛(ài)IT技術(shù)和音樂(lè)的Dream Catcher,正在努力培養(yǎng)計(jì)算機(jī)的深度和廣度認(rèn)知,也會(huì)和大家伙兒分享我的音樂(lè),大家伙兒多多關(guān)照 (?????) 聯(lián)系我的話,可以郵箱或者私信哦??!謝謝大家咯(*≧▽≦) My Social Link: 我的個(gè)人博客站:
https://blog.calvinhaynes.top/ 我的本站主頁(yè):
https://www.zhihu.com/people/eternally-92-61 我的B站主頁(yè):
https://space.bilibili.com/434604897 我的CSDN主頁(yè):
https://blog.csdn.net/qq_45772333 我的郵箱:chx1006488386@163.com 我的Github主頁(yè):
https://github.com/CalvinHaynes 我的碼云主頁(yè):
https://gitee.com/CalvinHaynes喜歡我的文章的話,不妨留下你的大拇指,點(diǎn)個(gè)贊再走,您的支持是我創(chuàng)作的最大動(dòng)力,也歡迎指正博客中存在的問(wèn)題,謝謝吶(~ ̄▽ ̄)~