介紹

Cloud Studio 是基於瀏覽器的整合式開發環境（IDE），為開發者提供了一個永不間斷的雲端工作站。使用者在使用 Cloud Studio 時無需安裝，隨時隨地開啟瀏覽器就能使用。這是目前筆者用過最優雅的WebIDE，特別是喜歡使用VSCode的小夥伴一定也會愛上他，Cloud Studio在團隊人數低於或等於5人的情況下所有功能完全免費開放使用，因此非常適合小型團隊或者個人用於雲端程式設計，一起來看一看吧！

Cloud Studio 包含程式碼高亮、自動補全、Git 整合、終端等 IDE 的基礎功能，同時支援實時除錯、外掛擴充套件等，可以幫助開發者快速完成各種應用的開發、編譯與部署工作。

座標

https://cloudstudio.net

應用場景

Cloud Studio 適用於以下幾個場景：

快速啟動專案

使用 Cloud Studio 的預置環境，您可以直接建立對應型別的工作空間，快速啟動專案進入開發狀態，而無需進行繁瑣的環境配置。

實時除錯網頁

Cloud Studio 內建預覽外掛，可以實時顯示網頁應用。當您的程式碼發生改變之後，預覽視窗會自動重新整理，這樣您就可以在 Cloud Studio 內實時開發除錯網頁了。

遠端訪問雲伺服器

Cloud Studio 支援您連線自己的雲伺服器，這樣就可以在編輯器中檢視雲伺服器上的檔案，進行線上開發部署工作。

相關特性開發在雲端

Cloud Studio 讓您開啟瀏覽器就能編寫並執行程式碼。它還支援連線到自己的雲主機，生成線上預覽連結，讓你獲得和原生 IDE 一樣的雲端開發體驗。

網路+瀏覽器

開啟瀏覽器，就能寫程式碼，無需下載安裝，隨時隨地開啟瀏覽器就能寫程式碼，擁有和本地 IDE 一樣流暢的編輯體驗。

多環境可選，或連線到雲主機

Cloud Studio 內建 Node.js、Java、Python 等常見環境，為您省去複雜的配置工作，直接進入開發狀態。或者您也可以將其連線到自己的雲主機，來管理雲主機中的資源。

生成線上預覽連結

在 Cloud Studio 中快速生成預覽連結，無論是分享給別人來展示專案，還是將其作為除錯介面，都極為方便。

相容 VSCode 外掛

預設的配置無法滿足需求？還可以線上安裝 VSCode 的外掛來增強使用體驗。目前 Cloud Studio 相容絕大多數 VSCode 外掛，Cloud Studio已經預裝了一些常用外掛。這也是筆者愛上Cloud Studio 的原因，因為筆者最常用的開發工具就是VSCode！

開始使用

關於註冊部分就不介紹了，感興趣的小夥伴自行註冊登入，下面直接進入正題：

由於預設添加了一個示例專案，那麼我們直接檢視示例專案：

1、示例專案中我們可以看到有很多豐富的功能：

包括版本迭代、需求管理、任務管理、缺陷管理、測試管理、程式碼倉庫、持續整合、製品庫、Wiki、API文件、檔案、統計、設定等。

2、點選截圖中的按鈕進入到IDE3、開啟後建立一個工作空間

一個工作空間是一個虛擬計算單元，它包含獨立的儲存、計算資源以及開發環境。Cloud Studio 是以工作空間來組織的。

（1）進入 Cloud Studio 控制檯，單擊【新建工作空間】，進入工作空間建立頁面。

（2）填寫相關資訊

4、工作空間還提供了Git版本控制功能

工作空間支援從程式碼倉庫建立，不過在此之前需要將工作空間的 SSH Key 新增至對應程式碼託管平臺的個人公鑰列表。具體如何操作可檢視相關文件。

5、連線到雲主機

除了預置環境，還可以將工作空間連線至自己的雲伺服器，這樣就可以通過 Cloud Studio 在自己的雲伺服器中安裝軟體或執行程式。

前提條件：

有一臺正在執行中且可以使用 SSH 連線的雲伺服器。雲伺服器在支援列表中，請參閱支援連線的雲伺服器有哪些。該雲伺服器的 SSH 連線埠沒被防火牆攔截。提前將 Cloud Studio 公鑰新增至雲伺服器 ~/.ssh/authorized_keys 檔案中。6、線上除錯網頁應用

工作空間內建預覽外掛，可以邊修改程式碼邊實時預覽。下面我們以建立一個 React 應用，並實時開發除錯為例，來簡單介紹一下如何使用 Cloud Studio 進行線上除錯

（1）建立工作空間

接下來，我們來建立一個 React 應用。為了方便，我們使用 create-react-app 腳手架來建立一個 React 應用。選擇上方選單欄【終端】>【新建終端】，開啟終端。執行 yarn create react-app app 來初始化一個 React 專案，它會在當前目錄下建立一個 app 資料夾，這就是我們應用的程式碼。

（2）啟動應用

上述過程同時也會安裝好所需的依賴，所以我們現在只需要在終端執行 cd app 進入 app。執行 yarn start 就可以啟動應用了。此時終端顯示應用啟動成功，並執行在 http:localhost:3000。

（3）新增除錯配置

將左側面板切換到除錯，單擊除錯面板中的 【Add Configuration】，會開啟 launch.json 檔案，此時再單擊藍色的【新增配置】。

在下拉列表中選擇 Browser Preview Lite: Attach，此時會在配置檔案中新增 browser-preview-lite 的配置，按 Cmd+S（Windows 下是 Ctrl+S）儲存該檔案。

（4）實時開發除錯

此時除錯面板會自動選擇 Browser Preview Lite: Attach，點選頂部的綠色按鈕，開始除錯。這樣，程式碼會執行到斷點處，並且會在程式碼右側顯示一個頁面實時預覽標籤頁。我們修改 App.js 的程式碼並儲存，可以看到這個預覽頁面也會實時重新整理。下圖在筆者瀏覽器全屏時候的效果

總結

Cloud Studio簡直是個人開發者或者小型團隊的福音，免去的某些複雜的開發環境的搭建，而且不需要下載任何開發工具，一切程式設計都在雲端，內建豐富的專案管理功能，名副其實的極客雲端IDE！Enjoy it!