介紹

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 支持您連接自己的雲服務器，這樣就可以在編輯器中查看雲服務器上的文件，進行在線開發部署工作。

開始使用

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

由於默認添加了一個示例項目，那么我們直接查看示例項目：

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

包括版本迭代、需求管理、任務管理、缺陷管理、測試管理、代碼倉庫、持續集成、制品庫、Wiki、API文檔、文件、統計、設置等。

2、點擊截圖中的按鈕進入到IDE

3、打開后創建一個工作空間

一個工作空間是一個虛擬計算單元，它包含獨立的存儲、計算資源以及開發環境。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 文件夾，這就是我們應用的代碼。