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

背景

為了解決函數計算本地環境差異和配置繁瑣的問題，在此背景下，就有了我們的 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 模闆，内置了函數計算運作，調試和釋出工具。

效果圖：

使用

1. WebIDE 打開方式

直接在浏覽器中輸入網址

https://ide.fc.aliyun.com

2. 選擇 Region

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

3. 建立主機（Host）

主機（Host），目前支援将您本機作為 Host，用于托管您的代碼以及連接配接 Host 上起的 Teminal，是以建立主機流程，就是要在您的機器上執行一個指令安裝 ide-agent 來達到效果。

1. 點選 Hosts 視圖的 “+” 号，建立一個 主機（Host），複制對話框中的指令，在本機指令行終端中執行。
2. 執行成功後，指令會輸出提示資訊，其中會提示将路徑

   /Users/kevin/.ide_home/bin

   添加到

   PATH

   ，

   /Users/kevin/.ide_home/bin

   是我本地路徑，您們的路徑會和我有點不一樣，以您們看到的為準，正确添加到

   PATH

   後，方可執行

   ide start

   指令，不然會報指令找不到錯誤。
3. 接下來，在本地指令行終端運作指令

   ide start

   啟動 ide-agent 服務，此時，在 WebIDE 界面上，可以看到主機圖示變成了綠色（綠色圖示表示主機是線上的，灰色表示主機離線）。
4. 回到 WebIDE 界面，點選對話框 OK 或者點選 Hosts 視圖的重新整理按鈕，就可以看到您新注冊的主機。

注意：

2. /Users/kevin/.ide_home/bin

   添加

   PATH

   /Users/kevin/.ide_home/bin

   PATH

   ide start

   指令，不然會報指令找不到錯誤（window 系統下路徑會有差異，以控制台輸出的内容為主）。

3. ide start

• 目前支援 Mac 和 Linux，Windows 10 Pro、Enterprise 或 Education。
• 由于環境依賴 docker 和 docker compose，需要提前安裝。其中 docker version >= 1.13.0，docker compose version >= 1.11.0。
• Mac 和 Linux 系統下修改

  PATH

  ，如果 shell 是 bash，可以修改檔案

  ~/.bashrc

  ，将

  PATH=$PATH:/Users/kevin/.ide_home/bin

  追加到檔案

  ~/.bashrc

  末尾。如果 shell 是 zsh，可以修改

  ~/.zshrc

  。

  /Users/kevin/.ide_home/bin

  是我本地路徑，您們的路徑會和我有點不一樣，以您們看到的為準。如果是 Windows，需要設定環境 PATH。

如下圖所示：

4. 建立工作空間（Workspace）

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

5. 打開工作空間

兩種方式：

• 在 Workspaces 的視圖中，輕按兩下（右鍵菜單）打開線上的工作空間（綠色圖示）

• 在 Files 的視圖中，點選 “Open Workspace” 按鈕，通過工作空間對話框來打開線上的工作空間

  打開後如下圖所示：

6. 建立函數

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

7. 部署函數

由于權限原因，目前隻提供通過 Terminal 中的 fun 工具來部署函數，Terminal 的環境中已經預置了 fun 和 fcli 工具，可以很友善的使用。使用 fun 工具之前，需要為 fun 工具配置的 AK，可以通過如下指令：

fun config           

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

fun deploy           

8. 運作函數

• 打開運作界面
• 點選 “Run” 按鈕運作函數

小結

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

聯系方式

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