詳解如何在iPad上用vscode寫程式開發

iPad上可以搞開發嗎？以下這篇文章跟大家介紹一下iPad秒變生產力工具的方法--在iPad上用vscode寫程式搞開發，希望對大家有幫助！

隨著平板電腦的普及，大多數人的生活習慣和生活場景都離不開平板電腦的使用,刷劇,看短片,玩主流遊戲等,但是這些只是娛樂性質的場景,那想實現把平板結合到工作或者生產之中場景中呢,如編輯文檔,製作工作表格,編寫代碼?

所以在入手ipad後，為了防止「買前生產力，買後愛奇藝」。我們可以在linux上建置code server，然後用ipad透過瀏覽器或或app，遠端存取code server。使用伺服器的資源來跑程式碼，而ipad前端上只需要負責擼程式碼和運行就可以啦，讓ipad完美變身移動開發工具！ ！

並且，為了實現在隨時隨地遠端移動開發，我們搭配使用了cpolar內網穿透，突破區域網路的限制，實現在公網環境下也可以用ipad寫程式開發！ ！

iPad秒變生產力工具！在iPad上用vscode寫程式碼。 【推薦學習：vscode教學、程式設計教學】

#

1. 本機環境配置

準備一台虛擬機，Ubuntu或centos都可以，這裡以VMware Ubuntu系統為例。

下載code server服務

在瀏覽器存取：https://github.com/coder/code-server,複製下載命令

開啟ubuntu命令列執行

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

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

以下資訊表示安裝成功

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

export PASSWORD=”000000”

查看IP位址,作區域網路存取使用

ifconfig

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

code-server --host= “0.0.0.0”

出現位址和連接埠號碼資訊表示成功

接著開啟瀏覽器透過區域網路存取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

• #簡單穿透測試

cpolar http 8080

按ctrl c退出

• 向系統新增服務

sudo systemctl enable cpolar

• #啟動cpolar服務

sudo systemctl start cpolar

##查看服務狀態

sudo systemctl status cpolar



正常顯示為

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
• 點選
建立

#建立好後,點選左側的狀態－線上隧道清單,查看公網位址，將其複製下來



#3.測試遠端存取#打開ipad瀏覽器,輸入剛複製的公網位址存取即可,造訪後輸入前面設定的密碼,出現vscode介面表示成功

#

4. 設定固定二級子網域

4.1 保留二級子網域

由於以上使用cpolar所建立的隧道使用的是隨機臨時公網位址，該位址在24小時內會發生變化，不利於長期遠端存取。因此我們可以為其配置二級子域名，該地址為固定地址，不會隨機變化【ps：cpolar.cn已備案】

需要注意，配置固定二級子域名需要將cpolar升級到基礎套餐或以上。

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

• 地區：選擇China vip
• 二級網域：可自訂填入
• 說明：即備註，可自訂填入



4.2 設定二級子網域

存取本機9200埠，開啟cpolar web ui 介面，點選左側的隧道管理－隧道列表，找到vscode隧道，點選右側的編輯



修改下隧道資訊：

• 網域類型改為選擇二層級子網域
• subdomain：填入剛保留成功的二級子網域

點選更新



隧道更新成功之後，點擊左側的狀態－線上隧道清單,查看公網位址,此時可以看到地址變成了二級域名，將其複製下來



5.測試使用固定二級子網域遠端存取

#接著我們再次開啟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

#點擊建立



隧道建立成功之後，點選左邊的狀態－線上隧道列表，將產生的公有網路位址複製下來。



7.ipad遠端vscode

在ipad上，點擊開啟appstore，下載軟體servediter for code-server



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



輸入相關資訊

參數介紹:

• code-server URL：填入前面設定成功的http公網位址【ipad瀏覽器存取的那個位址】
• Instance password：code-server設定的密碼
• Host：這裡填入我們前面建立成功的22隧道的公網路位址
• Username: 這個填入ubuntu系統的使用者名稱
• Port: 這裡預設即可無需修改
• Authentication: 這個填入ubuntu系統使用者名稱對應的密碼



輸入完訊息後點選右上角save後就會自動連線,出現vscode介面表示連線成功啦



8. 設定固定TCP埠位址

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

注意需要將cpolar套餐升級至專業套餐或以上。

8.1 保留固定TCP位址

#登入cpolar官網後台，點選左邊的預留，找到保留的TCP位址：

• 地區：選擇China VIP
• 描述：即備註，可自訂填寫

點擊保留



固定TCP位址保留成功，系統產生對應的公用位址固定埠號，複製下來



8.2 設定固定TCP連接埠位址

瀏覽器存取http://127.0.0.1:9200/登入cpolar web UI管理介面，點選左側儀表板的隧道管理－隧道列表，找到codeserver隧道，點選右側的編輯



#修改隧道訊息，設定固定TCP埠位址：

• #修改隧道訊息，設定固定TCP埠位址：

#埠類型：改為選擇固定TCP埠預留的TCP位址：填入剛保留成功的固定TCP埠位址

點選

更新



提示更新隧道成功，點擊左側儀表板的狀態－線上隧道列表，可以看到剛剛修改的隧道的公用位址已經更新為固定TCP端口地址，將其複製下來。

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

在ipad上，開啟servediter for code- server軟體，修改host的參數，將其修改為我們剛剛設定成功的固定TCP連接埠位址。

點選左上角

i

標誌



#選擇self Host Server



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



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

######更多關於VSCode的相關知識，請造訪：###vscode基礎教學###！ ###

以上是詳解如何在iPad上用vscode寫程式開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！