? iOS開發(fā)上架主頁 在強(qiáng)者的眼中，沒有最好，只有更好。 移動(dòng)開發(fā)領(lǐng)域優(yōu)質(zhì)創(chuàng)作者，阿里云專家博主

?

Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境（IDE），為開發(fā)者提供了一個(gè)永不間斷的云端工作站。用戶在使用 Cloud Studio 時(shí)無需安裝，隨時(shí)隨地打開瀏覽器就能在線編程。

背景

隨著云計(jì)算技術(shù)的成熟和普及，越來越多的傳統(tǒng)編程能力和資源已經(jīng)以云服務(wù)的形式開放出來。從中間件、數(shù)據(jù)庫等水平能力服務(wù)組件到人臉識(shí)別、鑒權(quán)服務(wù)等基本業(yè)務(wù)服務(wù)組件，都可以很容易地在云端獲取。Cloud Studio 云端 IDE（Web IDE/在線 IDE/Cloud IDE）是騰訊云自主研發(fā)的在線編程平臺(tái)，它可以不再受限于本地設(shè)備，而是通過云端服務(wù)來編寫、運(yùn)行和調(diào)試代碼。這種服務(wù)模式不再只是云端的軟件開發(fā)環(huán)境，而是提供了包括基礎(chǔ)設(shè)施服務(wù)的 Development-environment-as-a-Service 的服務(wù)模式。這就意味著，我們可以無需在本地維護(hù)和設(shè)置項(xiàng)目，直接在瀏覽器上進(jìn)行開發(fā)，實(shí)現(xiàn)真正的零門檻開發(fā)。

一、 前言

大家有沒有遇到過需要在不同設(shè)備上開發(fā)項(xiàng)目時(shí)，需要重復(fù)安裝各種應(yīng)用程序和插件的煩惱呢？現(xiàn)在，有了 Cloud Studio，這些問題都將不復(fù)存在！Cloud Studio 是一款基于瀏覽器的集成式開發(fā)環(huán)境，讓開發(fā)者可以隨時(shí)隨地、輕松高效地進(jìn)行開發(fā)。

通過使用 Cloud Studio，可以實(shí)現(xiàn)代碼高亮、自動(dòng)補(bǔ)全、終端等在線編程 IDE 的基礎(chǔ)功能，還可以輕松集成 Git、實(shí)時(shí)調(diào)試、插件擴(kuò)展等強(qiáng)大的功能。這些功能的存在，不僅可以幫助我們快速完成各種應(yīng)用的開發(fā)、編譯與部署工作，還能夠提高我們的開發(fā)效率和開發(fā)體驗(yàn)。

最狠的是 Cloud Studio 不僅提供了一個(gè)永不間斷的云端工作站，而且還可以在多個(gè)設(shè)備上進(jìn)行同步，讓我們的開發(fā)流程更加絲滑和高效！！！！這必須沖！！

在篇博文中，我將帶大家沉浸式體驗(yàn) CloudStudio 開發(fā)帶來的快感，通過Web3 明信片項(xiàng)目案例一步一步深入產(chǎn)品細(xì)節(jié)！

在整個(gè)過程中，我們將學(xué)習(xí)到

• Cloud Studio 在項(xiàng)目中的作用
• 如何使用 Cloud Studio 進(jìn)行項(xiàng)目環(huán)境初始化
• Cloud Studio 項(xiàng)目如何鏈接到 gitee 作為項(xiàng)目的管理倉庫
• Cloud Studio 可能會(huì)出現(xiàn)的一些情況

二、 Cloud Studio 主要功能和應(yīng)用場景

CloudStudio是一個(gè)基于瀏覽器的云端集成式開發(fā)環(huán)境，適用于多種應(yīng)用場景，包括：

1. 快速啟動(dòng)項(xiàng)目：使用CloudStudio的預(yù)置環(huán)境，可以直接創(chuàng)建對應(yīng)類型的工作空間，快速啟動(dòng)項(xiàng)目進(jìn)入開發(fā)狀態(tài)，無需進(jìn)行繁瑣的環(huán)境配置。

2. 實(shí)時(shí)調(diào)試網(wǎng)頁：CloudStudio內(nèi)置預(yù)覽插件，可以實(shí)時(shí)顯示網(wǎng)頁應(yīng)用。當(dāng)您的代碼發(fā)生改變之后，預(yù)覽窗口會(huì)自動(dòng)刷新，這樣您就可以在CloudStudio內(nèi)實(shí)時(shí)開發(fā)調(diào)試網(wǎng)頁了。

3. 遠(yuǎn)程訪問云服務(wù)器：CloudStudio支持您連接自己的云服務(wù)器，這樣就可以在編輯器中查看云服務(wù)器上的文件，進(jìn)行在線編程和部署工作。

三、Cloud Studio 實(shí)驗(yàn)前期準(zhǔn)備

3.1. 打開官網(wǎng)

打開官網(wǎng) 點(diǎn)擊以下鏈接跳轉(zhuǎn)到官網(wǎng)，并點(diǎn)擊 “注冊/登錄”。官網(wǎng)

3.2. 注冊 Cloud Studio：

這里注冊和登錄 Cloud Studio 非常方便，提供了三種注冊方式：

1. 使用 CODING 賬號(hào)授權(quán)注冊/登錄
2. 使用微信授權(quán)注冊/登錄
3. 使用 GitHub 授權(quán)注冊/登錄 （本文使用方式）

注冊完成后就可以通過 CloudStudio 提供的模板進(jìn)行項(xiàng)目構(gòu)建了！！

四、構(gòu)建Web3項(xiàng)目

這里我以博主之前開發(fā)的一個(gè) web3 明信片項(xiàng)目為例，整個(gè)項(xiàng)目是 ts + react ，然后給大家進(jìn)行產(chǎn)品演示，由于項(xiàng)目代碼繁瑣一點(diǎn)，就不具體到代碼細(xì)節(jié)了，這是一個(gè)基于 Web3 技術(shù)的社交明信片項(xiàng)目，提供了一種新的收集和分享記憶的方式。項(xiàng)目使用了 Infura 作為節(jié)點(diǎn)服務(wù)，IPFS 進(jìn)行數(shù)據(jù)的去中心存儲(chǔ)以及使用 MetaMask 服務(wù)允許用戶通過瀏覽器進(jìn)行項(xiàng)目交互。并為設(shè)計(jì)者提供「創(chuàng)作者激勵(lì)」。

項(xiàng)目效果如下：

4.1. 項(xiàng)目中技術(shù)棧

• Hardhat 是一個(gè)可以幫助開發(fā)人員快速、高效地編寫、測試和部署以太坊智能合約的開發(fā)框架。
• Next.js 是一個(gè)基于React的服務(wù)器端渲染框架，它可以幫助開發(fā)人員構(gòu)建高性能、可擴(kuò)展的Web應(yīng)用程序，并提供了一些開發(fā)工具和插件，方便開發(fā)人員進(jìn)行快速開發(fā)和部署。
• Metamask 是一款以太坊錢包瀏覽器擴(kuò)展程序，它可以幫助用戶管理以太坊賬戶和進(jìn)行區(qū)塊鏈交易，同時(shí)提供了一些安全性和隱私保護(hù)功能，使得用戶在去中心化應(yīng)用中的交互更加方便和安全。
• IPFS 是一種去中心化的分布式文件系統(tǒng)，它可以幫助開發(fā)人員存儲(chǔ)和訪問各種類型的文件和數(shù)據(jù)，同時(shí)具有高度的可靠性、安全性和可擴(kuò)展性，可以幫助開發(fā)人員構(gòu)建更加可靠和安全的分布式應(yīng)用程序。
• TypeScript 是一種開源的編程語言，它是JavaScript的一個(gè)超集，可以幫助開發(fā)人員編寫更加可靠、易于維護(hù)的代碼，同時(shí)提供了一些類型檢查和代碼提示功能，方便開發(fā)人員進(jìn)行快速開發(fā)和調(diào)試。

4.2. 通過gitee管理代碼并在CloudStudio上初始化環(huán)境

現(xiàn)在本地將項(xiàng)目上傳到 gitee 倉庫，方便后續(xù)在 CloudStudio 上初始化

然后我們回到 CloudStudio 進(jìn)行空間創(chuàng)建，為這個(gè)項(xiàng)目搭建一個(gè)可以運(yùn)行的環(huán)境，這里我們不需要通過模板進(jìn)行創(chuàng)建，因?yàn)槲覀兊捻?xiàng)目不是在云IDE上現(xiàn)場開發(fā)，所以這里我們選擇新建工作空間，然后選擇輸入倉庫地址，選擇開發(fā)環(huán)境為 React + node 18

點(diǎn)擊新建就可以初始化環(huán)境了，效果如下：

4.3 運(yùn)行預(yù)覽項(xiàng)目

項(xiàng)目成功獲取到之后開始準(zhǔn)備運(yùn)行和預(yù)覽項(xiàng)目，通過CloudStudio的內(nèi)置終端，然后運(yùn)行以下命令進(jìn)行依賴安裝：

yarn install

依賴安裝完后就可以開始啟動(dòng)了：

yarn start

右下角監(jiān)控到有新的端口打開之后，就會(huì)彈出提示消息，然后可以通過打開內(nèi)置預(yù)覽，看到已經(jīng)啟動(dòng)的項(xiàng)目

可以看到，和我們本地啟動(dòng)的是一模一樣的，但是是不需要安裝環(huán)境的，非常方便！

4.4 測試項(xiàng)目運(yùn)行狀況

啟動(dòng)雖然正常啟動(dòng)了，但是我們還是需要進(jìn)行一些測試，看看新的環(huán)境中項(xiàng)目運(yùn)行是否正常，這里我通過連接 metamask 進(jìn)行登錄測試

可以看到 connect 錢包是正常的，然后我們開始贈(zèng)送一張明信片

這里會(huì)發(fā)現(xiàn)，這個(gè)環(huán)境是加載不出 ipfs 上面的圖片的，所以運(yùn)行不是那么完整

正常大概是這樣：

但是整體功能是沒有問題的，可能是因?yàn)榫W(wǎng)絡(luò)相關(guān)問題，整體的運(yùn)行體驗(yàn)還是不錯(cuò)的！！！

五、其他功能演示

5.1. 多人協(xié)作

協(xié)作發(fā)發(fā)起協(xié)作，發(fā)起者點(diǎn)擊“開始協(xié)作”按鈕，就可以生成協(xié)作邀請信息，發(fā)起者點(diǎn)擊“再次復(fù)制鏈接”按鈕，將下述信息粘貼發(fā)給需要參與項(xiàng)目的人員。同時(shí)，項(xiàng)目進(jìn)入?yún)f(xié)作計(jì)時(shí)，計(jì)時(shí)顯示在右上角控制面板中。邀請信息內(nèi)容具體如下：“k9sec 邀請您加入工作空間協(xié)作。點(diǎn)擊鏈接：https://cloudstudio.net/share/xxxxxx Cloud Studio MetaWork，就可以進(jìn)行多人協(xié)作了！！

5.2. 使用 Git 進(jìn)行版本控制并發(fā)布項(xiàng)目到gitee

這里我在 readme 中加入一段描述，并且準(zhǔn)備commit到gitee倉庫中

轉(zhuǎn)到源代碼管理模塊，可以看到已經(jīng)出現(xiàn)了我的修改，這里我們通過 commit 和 syncchange 就可以將修改同步了！非常的nice！

效果如下：

其他過多的功能就不一一介紹了，大家感興趣的可以去官網(wǎng)瀏覽查看！！！

六、常見問題及注意事項(xiàng)

• 在開發(fā)過程中，發(fā)現(xiàn)一個(gè)不太適合 web3 項(xiàng)目的點(diǎn)，就是 ipfs 是網(wǎng)絡(luò)是加載不出來的，不知道后續(xù)有沒有可能進(jìn)行優(yōu)化
• 在進(jìn)行多人協(xié)作的時(shí)候，有時(shí)候加入?yún)f(xié)作邀請方?jīng)]有收到消息，不知道是網(wǎng)絡(luò)問題還是什么原因，沒有反饋，導(dǎo)致一直在那等待
• 還有就是云主機(jī)工作空間會(huì)出現(xiàn)頻繁的斷線重新，不過這個(gè)通過查看文檔找到了原因，這個(gè)發(fā)出來避免大家也有同樣的情況，官網(wǎng)回答如下
  • 目前由于云主機(jī)工作空間的流量是由 Cloud Studio 服務(wù)器進(jìn)行代理，訪問路徑為 本地機(jī)器 -> Cloud Studio 代理服務(wù)器 -> 云主機(jī) ， 會(huì)導(dǎo)致 Cloud Studio 由于網(wǎng)絡(luò)環(huán)境的情況導(dǎo)致連接不穩(wěn)定。目前 Cloud Studio 已經(jīng)在優(yōu)化訪問路徑為 本地機(jī)器 -> 云主機(jī)，以此來提高連接穩(wěn)定性，敬請期待。

七、總結(jié)

在使用騰訊云 Cloud Studio 時(shí)從環(huán)境搭建到運(yùn)行整體感覺上還是很絲滑的，感覺收獲頗多。在實(shí)踐遇見的一些問題，小助手也會(huì)積極解答，通過對幾次的CSDN的培訓(xùn)以及官方文檔的學(xué)習(xí)，對CloudStudio有了很大的認(rèn)識(shí)，真的是一個(gè)很不錯(cuò)的云IDE產(chǎn)品，在后續(xù)的工作中，也會(huì)大量給公司推薦騰訊云的一些有效的方案，用于公司降本增效。

經(jīng)過這次活動(dòng)，我總結(jié)了CloudStudio的相關(guān)優(yōu)點(diǎn)，方便大家在選擇解決方案時(shí)參考：

1. 支持多種語言環(huán)境，包括Python、Java、Node.js等。
2. 支持創(chuàng)建工作空間，可以在其中進(jìn)行在線編程、代碼修改、實(shí)時(shí)調(diào)試等操作。
3. 支持Git版本控制和連接云主機(jī)進(jìn)行資源管理。
4. 提供云端部署套件和協(xié)作套件，方便應(yīng)用部署和團(tuán)隊(duì)協(xié)作。
5. 支持自定義模板和在線預(yù)覽調(diào)試功能。
6. 支持在線安裝VS Code插件以增強(qiáng)使用體驗(yàn)。
7. 支持按量計(jì)費(fèi)和資源包購買，適合中小型項(xiàng)目使用。

總體來說，在這次 CloudStudio 的實(shí)踐案列下，還是學(xué)習(xí)感受到了這種開發(fā)方式帶來的根本性變革，其實(shí)也是順應(yīng)時(shí)代的產(chǎn)物，從低級(jí)語言到高級(jí)語言，從自建服務(wù)器到云服務(wù)器，每個(gè)產(chǎn)品的誕生都是為了釋放重復(fù)勞動(dòng)，或許以后開發(fā)只需要編寫部分核心業(yè)務(wù)代碼就可以上線了，所有的標(biāo)準(zhǔn)化功能都可以一鍵組裝，還是要學(xué)會(huì)站在巨人的肩上，感謝騰訊云提供豐富底層支撐，能讓現(xiàn)在的開發(fā)者的開發(fā)方式越來越簡單高效！！！

八、相關(guān)鏈接

• Cloud Studio產(chǎn)品體驗(yàn)地址
• Cloud Studio產(chǎn)品文檔
• 活動(dòng)詳情介紹
• 活動(dòng)報(bào)名頁面