使用 WebIDE 三分鐘上手函式計算

阿新 • • 發佈：2018-11-10

背景

為了解決函式計算本地環境差異和配置繁瑣的問題，在此背景下，就有了我們的 WebIDE 產品，WebIDE 能讓函式的開發、測試和部署更加流暢，降低了函式計算的學習成本和縮短了函式的開發週期。

WebIDE 是一個基於 H5 支援多語言的整合開發環境。相當於 VS Code 的網頁版。
功能特色：

檔案樹，支援拖拽移動、拖拽上傳、打包下載、重新命名、搜尋、同名覆蓋確認提醒和多選批量操作。
程式碼編輯器，整合 Monaco Editor，與 VS Code 同款編輯器
快捷鍵，與 VS Code 保持一致。
偏好設定，支援工作空間級別的偏好設定。
命令面板

，通過快捷鍵 F1 ，喚出快捷開啟功能搜尋框，搜尋想要的快捷功能
視窗管理，支援自由分窗和拖拽，並能儲存佈局。
Web Terminal，前端整合 XTerm.js，後端執行在 docker container 內部，隨意安裝軟體，不會影響宿主機環境。預製 ubuntu 16.04 和 oh-my-zsh 開箱即用。
預製黑白兩款主題
可以將任意 Mac 和 Linux 系統主機註冊成工作主機，所有資料都儲存於使用者所屬的工作主機。
引入工作空間概念，支援多專案管理
內建函式計算建立嚮導，支援 fun 模板，內建了函式計算執行，除錯和釋出工具。

直接在瀏覽器中輸入網址 https://ide.fc.aliyun.com

WebIDE頁面開啟後，會提示需要先選擇一個 Region，目前只有一個杭州可以選擇。如下圖所示：

主機（Host），目前支援將您本機作為 Host，用於託管您的程式碼以及連線 Host 上起的 Teminal，所以建立主機流程，就是要在您的機器上執行一個命令安裝 ide-agent 來達到效果。

點選 Hosts 檢視的 “+” 號，建立一個主機（Host），複製對話方塊中的命令，在本機命令列終端中執行。
執行成功後，命令會輸出提示資訊，其中會提示將路徑 /Users/kevin/.ide_home/bin

新增到 $PATH，
/Users/kevin/.ide_home/bin 是我本地路徑，你們的路徑會和我有點不一樣，以你們看到的為準，正確新增到 $PATH 後，方可執行 ide start 命令，不然會報命令找不到錯誤。
接下來，在本地命令列終端執行命令 ide start 啟動 ide-agent 服務，此時，在 WebIDE 介面上，可以看到主機圖示變成了綠色（綠色圖標表示主機是線上的，灰色表示主機離線）。
回到 WebIDE 介面，點選對話方塊 OK 或者點選 Hosts 檢視的重新整理按鈕，就可以看到您新註冊的主機。
注意：

__目前只支援 mac 和 linux，windows 後面會支援__。
由於環境依賴 docker 和 docker compose，需要提前安裝。其中 docker version >= 1.13.0，docker compose version >= 1.11.0。
修改 $PATH，如果是 shell 是 bash，可以修改檔案 ~/.bashrc，將 PATH=$PATH:/Users/kevin/.ide_home/bin 追加到檔案~/.bashrc末尾。如果 shell 是 zsh，可以修改 ~/.zshrc。“/Users/kevin/.ide_home/bin” 是我本地路徑，你們的路徑會和我有點不一樣，以你們看到的為準。
如下圖所示：

工作空間（Workspace），主機上可以建立多個工作空間。點選 Workspaces 檢視的 “+” 號，建立一個工作空間（Workspace），在 WebIDE 介面上，綠色圖標表示主機是線上的，灰色表示主機離線。如下圖所以：

兩種方式：

如下圖所示：

根據函式建立嚮導一步一步建立函式，建立完成後，如下圖：

由於許可權原因，目前只提供通過 Terminal 中的 fun 工具來部署函式，Terminal 的環境中已經預置了 fun 和 fcli 工具，可以很方便的使用。使用 fun 工具之前，需要為 fun 工具配置的 AK，可以通過如下命令：

fun config

配置完後，通過 fun 的部署命令來部署函式，命令如下：

fun deploy

如下圖所示：

通過以上幾個步驟，我們就完成了函式計算的開發、部署和執行。預置的 fun 和 fcli 工具，開箱即用，避免了因為安裝 fun 和 fcli 所帶來的學習成本，也防止了因為使用者本地環境差異，導致安裝失敗的可能。

歡迎加入釘釘群聯絡我們，釘釘群號：11721331，釘釘群二維碼如下圖所示：