天天看點

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

作者:cpolar極點雲

随着平闆電腦的普及,大多數人的生活習慣和生活場景都離不開平闆電腦的使用,刷劇,看短視訊,玩主流遊戲等,但是這些隻是娛樂性質的場景,那想實作把平闆結合到工作或者生産之中場景中呢,如編輯文檔,制作工作表格,編寫代碼?

是以在入手ipad後,為了防止“買前生産力,買後愛奇藝”。我們可以在linux上搭建code server,然後用ipad通過浏覽器或者或app,來遠端通路code server。使用伺服器的資源來跑代碼,而ipad前端上隻需要負責撸代碼和運作就可以啦,讓ipad完美變身移動開發工具!!

并且,為了實作在外随時随地遠端移動開發,我們搭配使用了cpolar内網穿透,突破區域網路的限制,實作在公網環境下也可以用ipad寫代碼開發!!

1. 本地環境配置

準備一台虛拟機,Ubuntu或者centos都可以,這裡以VMware Ubuntu系統為例

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

下載下傳code server服務

在浏覽器通路:https://github.com/coder/code-server,複制下載下傳指令

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

打開ubuntu指令行執行

curl -fsSL https://code-server.dev/install.sh | sh

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

出現需要輸入ubuntu的登入賬戶密碼,輸入密碼即可,然後等待安裝完成

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

以下資訊表示安裝成功

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

接着輸入以下指令設定code-server的登入密碼

export PASSWORD=”000000”           
iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

檢視IP位址,作區域網路通路使用

ifconfig           
iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

設定好密碼後啟動code-server服務,輸入以下指令:

code-server --host= “0.0.0.0”           

出現位址和端口号資訊表示成功

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

接着打開浏覽器通過區域網路通路http://192.168.30.128:8080/,出現welcone code-server表示成功,輸入我們設定的密碼,登入即可。

2. 内網穿透

接着我們使用cpolar穿透本地code-server服務,使得遠端可以進行通路,随時随地寫代碼。cpolar支援http/https/tcp協定,不限制流量,操作簡單,無需公網IP,也無需路由器。

cpolar官網:https://www.cpolar.com/

2.1 安裝cpolar内網穿透(支援一鍵自動安裝腳本)

• cpolar 安裝(國内使用)

curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash           

• 或 cpolar短連結安裝方式:(國外使用)

curl -sL https://git.io/cpolar | sudo bash           

• 檢視版本号

cpolar version           

• token認證

登入cpolar官網背景,點選左側的驗證,檢視自己的認證token,之後将token貼在指令行裡

cpolar authtoken xxxxxxx           
iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

• 簡單穿透測試

cpolar http 8080           

按ctrl+c退出

• 向系統添加服務

sudo systemctl enable cpolar           

• 啟動cpolar服務

sudo systemctl start cpolar           

• 檢視服務狀态

sudo systemctl status cpolar           
iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

正常顯示為active則表示服務為正常線上啟動狀态

2.2 建立HTTP隧道

在ubuntu系統本地安裝cpolar内網穿透之後,在ubuntu浏覽器上通路本地9200端口,打開cpolar web ui界面:http://127.0.0.1:9200。

點選左側儀表盤的隧道管理——建立隧道,由于code-server中配置的是8080端口,是以我們要來建立一條http隧道,指向8080端口:

• 隧道名稱:可自定義,注意不要重複

• 協定:http協定

• 本地位址:8080

• 域名類型:選擇随機域名

• 地區:選擇China VIP

點選建立

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

建立好後,點選左側的狀态——線上隧道清單,檢視公網位址,将其複制下來

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

3. 測試遠端通路

打開ipad浏覽器,輸入剛剛複制的公網位址通路即可,通路後輸入前面設定的密碼,出現vscode界面表示成功

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

4. 配置固定二級子域名

4.1 保留二級子域名

由于以上使用cpolar所建立的隧道使用的是随機臨時公網位址,該位址在24小時内會發生變化,不利于長期遠端通路。是以我們可以為其配置二級子域名,該位址為固定位址,不會随機變化【ps:cpolar.cn已備案】

需要注意,配置固定二級子域名需要将cpolar更新到基礎套餐或以上。

登入cpolar官網,點選左側的預留,選擇保留二級子域名,設定一個二級子域名名稱,點選保留,保留成功後複制保留的二級子域名名稱

• 地區:選擇China vip

• 二級域名:可自定義填寫

• 描述:即備注,可自定義填寫

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

4.2 配置二級子域名

通路本地9200端口,打開cpolar web ui 界面,點選左側的隧道管理——隧道清單,找到vscode隧道,點選右側的編輯

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

修改下隧道資訊:

• 域名類型改為選擇二級子域名

• subdomain:填寫剛剛保留成功的二級子域名

點選更新

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

隧道更新成功之後,點選左側的狀态——線上隧道清單,檢視公網位址,此時可以看到位址變成了二級域名,将其複制下來

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

5. 測試使用固定二級子域名遠端通路

接着我們再次打開ipad浏覽器,通路剛剛配置成功的固定二級子域名位址,出現vscode界面表示成功,就可以愉快的寫代碼啦.

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

6. iPad通過軟體遠端vscode

接下來我們通過servediter for code-server軟體來實作ipad遠端通路vscode

6.1 建立TCP隧道

首先需要建立一條TCP隧道,指向我們伺服器的22端口,servediter for code-server這個軟體需要連接配接伺服器,在ubuntu上打開浏覽器通路本地9200端口,登入cpolar web ui界面,點選左側的隧道管理——建立隧道

• 隧道名稱:可自定義,注意不要重複

• 協定:tcp協定

• 本地位址:22

• 域名類型:選擇随機臨時TCP端口

• 地區:選擇China VIP

點選建立

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

隧道建立成功之後,點選左側的狀态——線上隧道清單,将所生成的公網位址複制下來。

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

7. ipad遠端vscode

在ipad上,點選打開appstore,下載下傳軟體servediter for code-server

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

下載下傳成功後點選打開,由于該軟體是付費的,可以自由選擇購買,這裡選擇免費試用,選擇最後一個free

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

輸入相關資訊

參數介紹:

• code-server URL:填寫前面配置成功的http公網位址【ipad浏覽器通路的那個位址】

• Instance password:code-server配置的密碼

• Host:這裡填寫我們前面建立成功的22隧道的公網位址

• Username: 這個填寫ubuntu系統的使用者名

• Port: 這裡預設即可無需修改

• Authentication: 這個填寫ubuntu系統使用者名對應的密碼

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

輸入完資訊後點選右上角save後就會自動連接配接,出現vscode界面表示連接配接成功啦

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

8. 配置固定TCP端口位址

由于前面我們建立的ssh 22端口的隧道選擇的是随機臨時位址,該位址會在24小時内變化,為了使我們ipad裡面使用vscode連接配接更加通暢,我們需要固定ssh 的公網位址。

注意需要将cpolar套餐更新至專業套餐或以上。

8.1 保留固定TCP位址

登入cpolar官網背景,點選左側的預留,找到保留的TCP位址:

• 地區:選擇China VIP

• 描述:即備注,可自定義填寫

點選保留

固定TCP位址保留成功,系統生成相應的公網位址+固定端口号,将其複制下來

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

8.2 配置固定TCP端口位址

浏覽器通路http://127.0.0.1:9200/登入cpolar web UI管理界面,點選左側儀表盤的隧道管理——隧道清單,找到codeserver隧道,點選右側的編輯

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

修改隧道資訊,配置固定TCP端口位址:

• 端口類型:改為選擇固定TCP端口

• 預留的TCP位址:填寫剛剛保留成功的固定TCP端口位址

點選更新

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

提示更新隧道成功,點選左側儀表盤的狀态——線上隧道清單,可以看到剛剛修改的隧道的公網位址已經更新為固定TCP端口位址,将其複制下來。

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

9. 使用固定TCP位址遠端vscode

在ipad上,打開servediter for code-server軟體,修改host的參數,将其修改為我們剛剛配置成功的固定TCP端口位址。

點選左上角i标志

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

選擇self Host Server

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

把Host值改為我們剛剛官網保留的tcp位址

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

更改完後點選右上角save,點選完後會自動連接配接,出現vscde界面表示成功了,至此,教程就結束了,使用ipad開啟愉快的程式設計吧!該公網位址不會再随機變化了。

iPad秒變生産力工具?在iPad上用vscode寫代碼搞開發【内網穿透】

繼續閱讀