*作者：小院裡的霍大俠*

大家好，我是霍大俠，本篇我們透過學習部署流行 Web 框架，如 Spring Boot，Express，Web IDE，讓你掌握 Serverless 函式計算架構和技術，領略彈性併發、高可用的好處。下面我將從**實踐介紹，實踐演示，分析詳解**三個大的章節來一步一步分享。

*本文選自“Serverless 函式計算徵集令”徵文，後臺回覆“**函式**”瞭解詳情。*

## 前言

**本文將帶你學習：**

-   掌握 Serverless 的概念和架構
-   掌握阿里雲函式計算產品的操作和流程
-   部署流行 Web 框架到阿里雲函式計算平臺
-   使用 Serverless Devs 客戶端本地部署方法
-   製作自己的 Web IDE 應用

**學習事項：**

1.難度：入門

2.前提：建立自己的阿里雲賬號

3.時長：60 分鐘

4.進入阿里雲實驗室：

<https:>

![1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfbb25bb308b41e58ef82c7c11478a6e~tplv-k3u1fbpfcp-zoom-1.image "1.png")

![2.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9cb96435bfc64e77a0c0726502ad51ec~tplv-k3u1fbpfcp-zoom-1.image "2.png")

## Serverless 相關概念&實踐

*宣告注意：本次實驗中使用的阿里雲函式計算 FC，物件儲存 OSS 是流量產品，域名服務是預購產品。會產生流量費用和購買費用。請根據自身情況慎重使用。如產生費用，請自行承擔。當然也可以純粹閱讀學習使用。*

### Serverless 演變

![3.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88d9ff5e773c4bb8b646e56d9e622d10~tplv-k3u1fbpfcp-zoom-1.image "3.png")

#### Serverless，函式計算（Function Compute）到底是什麼？

Serverless，又叫無伺服器。Serverless 強調的是一種架構思想和服務模型，讓開發者無需關心基礎設施（伺服器等），而是專注到應用程式業務邏輯上。Serverless 也是下一代計算引擎。比如阿里雲平臺 Serverless 產品主要包括阿里雲函式計算 FC、Serverless 應用引擎 SAE、Serverless 工作流。所以你可以理解 Serverless 是一種架構思想。

我認為 Serverless 的核心是函式計算，它是一個事件驅動的全託管 Serverless 計算服務，您無需管理伺服器等基礎設施，只需編寫程式碼並上傳，函式計算會為您準備好計算資源，並以彈性、可靠的方式執行您的程式碼。

通常人們說的雲函式也就是指 Serverless。

![4.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a4c7db11c394288b8a82165472ed384~tplv-k3u1fbpfcp-zoom-1.image "4.png")

目前網際網路流行的應用架構主要是從單體架構，到流行的微服務，和現在快速發展 Serverless 架構。可以看到 3 種架構的一些特點，單體架構耦合度高，彈性，擴充套件性差；微服務改善很多，更靈活，但是運維學習成本也很高。

Serverless 透過事件驅動模式，具有彈性高可用等特點；包括按需付費；免運維都是其強大之處。我相信隨著技術不斷的發展，Serverless 一定是將來非常流行的技術架構。

![5.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4806a5d0a13e471a9bbee4b7bc161b9c~tplv-k3u1fbpfcp-zoom-1.image "5.png")

我們從這個阿里雲官方介紹中可以看到 Serverless 針對不同場景的不同形態。隨著 FaaS 出現的標準模板，付費的定製化 FaaS 模板，我相信也會逐步發展起來，也許最終是透過低程式碼配置直接 AI 智慧生成函式，讓我們拭目以待。

### Serverless 函式計算優勢

![6.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f2995b34832463292c5b4b4ddd972b9~tplv-k3u1fbpfcp-zoom-1.image "6.png")

**免運維：** 不需要管理伺服器主機或者伺服器程式。

**彈性伸縮：** 根據負載進行自動規模伸縮與自動配置。伸縮範圍零到無窮大。

**按需付費：** 根據使用情況決定實際成本。

**高可用：** 具備隱含的高可用性。

另外雲函式不能儲存狀態，但是可以透過其他計算服務配合來完善這個，比如用 Redis 或者本地 cookie 可以儲存使用者狀態資訊。

![7.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e151f63265dc4e9db416668159dbc81c~tplv-k3u1fbpfcp-zoom-1.image "7.png")

Serverless 最核心的一個優勢就是豐富的彈性策略，和靈活呼叫策略。我們可以從圖中看到，它可以靈活配置基礎指標 CPU，記憶體，例項上下限等等。

![8.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9090ce4adf04eb6827af2bf9ee2a627~tplv-k3u1fbpfcp-zoom-1.image "8.png")

阿里雲函式計算 FC 同時可以聯合雲端計算的大部分產品服務，形成非常靈活的，低耦合繫結，隨用隨拿。透過事件，http，觸發器多種形式呼叫。這個官方流程圖清晰的闡述了函式計算的整個流程。

![9.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9b15cb0a2d0441994ae9102a2ca4e53~tplv-k3u1fbpfcp-zoom-1.image "9.png")

### Serverless 應用場景

大部分行業都可以用 Serverless 架構。比如遊戲，線上教育，電商，SaaS 產品，小程式等等，透過核心函式計算和其他 Serverless 產品形成強大的支援。

從這裡我們可以詳細瞭解函式計算的應用細節。感興趣的可以儲存。

![10.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0738121f2e964097b9f9933f6d521470~tplv-k3u1fbpfcp-zoom-1.image "10.png")

![11.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63293676fbc34622a029a7c4b9e9cdff~tplv-k3u1fbpfcp-zoom-1.image "11.png")

下面我們再來講一個簡單 Web 網站案例。很多人有疑惑，雲函式只是一個函式計算，相當於一個 API 介面，那我如果想結合資料庫，儲存和其他的功能應該怎麼辦？

從這個簡單的結構圖大家可以看明白，雲函式是需要配合各種雲端計算服務才能完整的部署我們的複雜的應用程式。我們可以通 CDN 服務來加速展現，可以透過 OSS 來儲存檔案資源。

你也可以理解為雲函式部署了你的網站程式碼，用 Redis 來儲存使用者的會話狀態，重要資料存放到 Mysql 或者 mongoDB 等等。如果需要佇列，日誌服務，我們都可以透過平臺提供的產品快速接入，可以滿足大部分常用的應用程式。我們接下來一步一步來學習。

![12.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/811873cd72734f7bba673e93539be091~tplv-k3u1fbpfcp-zoom-1.image "12.png")

透過實踐介紹們學到了什麼是 Serverless，它的優勢和應用場景。

Serverless 技術架構還在快速發展，各個雲廠商都在發展自己的 Serverless 產品。

如果上面內容有不合適的地方，還請大家給我評論留言，我們一起交流學習。

接下來，我們來學習怎樣在 Serverless 上部署流行的 Web 架構。

## 部署 Web 框架到函式計算

這個部分我們也是從 3 個方面來學習，先學習函式計算的產品功能；接著部署 Web 框架 Spring Boot；最後實踐部署 Nodejs 框架 Express 的案例。

### 阿里雲函式計算產品功能

廢話不多說，先來看阿里雲函式計算的功能都有哪些？

宣告注意：這裡需登入自己阿里雲賬號開啟函式計算服務，函式計算服務屬於流量計費，有可能產生流量費用。請慎重使用。如產生費用，請自行承擔，也可以純粹閱讀學習。

1. 登入阿里雲網站，點選頂部登入，輸入使用者名稱和密碼。

![13.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d1eda22364a4f9c842b265e2fe1c543~tplv-k3u1fbpfcp-zoom-1.image "13.png")

2. 然後點選左上角產品，在產品服務中找到 Serverless 類別，點選下面的函式計算 PC，接著就可以看到函式計算的主皮膚。（如果沒有開通服務的，直接同意開通即可)。

![14.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5aee54bee174c1887f98ee999103542~tplv-k3u1fbpfcp-zoom-1.image "14.png")

3. 下面一步一步學習體驗函式計算的產品功能。概覽展示了整體函式計算的呼叫資料和執行環境。

![15.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/50be571d72d54f5b92b13ca240eeb0e5~tplv-k3u1fbpfcp-zoom-1.image "15.png")

我們接著看選單中第二項應用，我認為這個是一個很好的功能，極大的方便了使用者的門檻，我們可以透過這個功能，快速建立自己的站點和應用。

![16.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcbb3cfab0a04dde846e3656e82c1550~tplv-k3u1fbpfcp-zoom-1.image "16.png")

應用包含了從模板建立和倉庫匯入 2 種方式，後面我會主要演示模板建立的案例。

![17.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/873c683cac034c9aa8b67eb5b7cc98ba~tplv-k3u1fbpfcp-zoom-1.image "17.png")

倉庫模式也可以從你的 Github/Gitee 等常用倉庫中拉取部署，這裡不過多贅述。

![18.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62ad974d181348528c96408f89664501~tplv-k3u1fbpfcp-zoom-1.image "18.png")

什麼是服務？服務是函式計算資源管理的單位。建立函式前必須先建立服務，同一個服務下的所有函式共享一些相同的設定，例如服務授權、日誌配置。從業務場景出發，一個應用可以拆分為多個服務。從資源使用維度出發，一個服務可以由多個函式組成。例如一個資料處理服務，分為資料準備和資料處理兩部分。資料準備函式資源需求小，可以選擇小規格例項。資料處理函式資源需求大，可以選擇大規格例項。

![19.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2d2dae967d84f6d9aca0b95520fb45d~tplv-k3u1fbpfcp-zoom-1.image "19.png")

函式計算的資源排程與執行以函式為單位。函式必須從屬於服務，同一個服務下可以建立多個函式，這些函式共享一些相同的設定，例如服務授權、日誌配置，但彼此相互獨立，互不影響。本文介紹函式的屬性和執行環境，以及如何透過函式計算控制檯建立、配置和刪除函式。

我們可以建立服務後，在其下面建立函式，函式中具體程式碼就是你的業務場景的實現。可以從標準 Runtime；平滑遷移 Web Server；容器映象；模板建立 4 種形式來建立。

![20.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4ffd7cdf67d747a7966625f743d5c6b2~tplv-k3u1fbpfcp-zoom-1.image "20.png")

這裡展示的是我們之前寫過得一個抽獎大轉盤雲函式程式碼，主要是透過小程式呼叫雲函式，雲函式再呼叫 MongoDB 資料。因為當抽獎人多時候，需要很好的併發性，所以我們採用了 MongoDB 和雲函式結合。讓使用者在抽獎時候沒有任何卡頓現象，同時使用者少的時候也能節約硬體費用，雲函式很好的滿足了我們的需求。

![21.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aad32a6bb23446eba4cf3af53db70764~tplv-k3u1fbpfcp-zoom-1.image "21.png")

![22.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c33cba68c5c64c62b43013f4fe0a9d1f~tplv-k3u1fbpfcp-zoom-1.image "22.png")

任務其實就是管理非同步函式的地方。提供了一個完全託管的，開箱即用的，可觀測友好的大規模任務處理平臺。當您上傳程式碼包/容器映象建立任務處理函式後，就可以提交、檢視、停止和重試任務。也可以暫停/恢復處理函式的執行。點選這裡檢視更多詳情。

函式計算高階功能中，主要包含了監控，域名，彈性管理，層管理。監控大盤如圖所示是整體資料的監控。

1.  域名很容易理解就是繫結自己的雲函式應用，可以 Web 應用，可以是 API 介面。
1.  彈性管理是配置雲函式的資源使用上線，防止費用過多。同時還可以配置最小例項，降低冷啟動次數。
1.  層管理提供了公共依賴庫，執行環境等等，函式之前可以共享，減少程式碼包體積。
1.  其他更多功能中的審計日誌，許可權助手，還有工作流，應用引擎功能產品，這裡也不在過多闡述。感興趣朋友可以在開發自己雲函式時嘗試一下。

![23.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8da4aa1b5e0b45d1af29d6da71a081da~tplv-k3u1fbpfcp-zoom-1.image "23.png")

*1、什麼場景需要使用自定義域名？當您的函式使用 HTTP 請求觸發時，您可能需要使用您自己的自定義域名來訪問您的函式。例如，您建立了一個函式作為 Web 應用，您希望使用者透過固定的域名訪問這個 Web 應用，這時候您就可以為該 Web 應用繫結自定義域名。除此之外，您還可以為該域名設定 CDN 加速功能，將部署在函式計算的應用作為源站，把源內容釋出到邊緣節點，使終端使用者能快速讀取所需內容。*

*2、什麼是彈性管理？函式計算為您提供了按量模式和預留模式兩種例項使用模式。您可以配置最大例項數來控制單個函式的資源使用上限，來防止單個函式過度呼叫導致的例項佔用，保護後端資源，避免預期外的費用開銷。同時可以透過配置最小例項數來啟用預留模式例項，函式計算系統將根據配置的最小例項數為該函式常駐例項，來快速響應函式呼叫請求，降低冷啟動的發生次數，為時延敏感的線上業務提供更好的服務響應。按量模式和預留模式計費方式不同。*

*3、什麼是層？層可以為您提供自定義的公共依賴庫、執行時環境及函式擴充套件等釋出與部署能力。您可以將函式依賴的公共庫提煉到層，以減少部署、更新時的程式碼包體積，也可以將自定義的執行時，以層部署在多個函式間共享。層預設部署在函式執行環境的/opt 目錄下，作為函式可額外附加的程式碼目錄。當函式配置多個層時，這些層的內容將被合併至/opt 目錄。*

產品功能就講到這裡，大家可以從中領悟和梳理下函式計算的操作性和特性點。

### 部署 Web 框架 Spring Boot

宣告注意：這裡需登入自己阿里雲賬號開啟函式計算服務，函式計算服務屬於流量計費，有可能產生流量費用。請慎重使用。如產生費用，請自行承擔，也可以純粹閱讀學習。

接著上面章節的產品功能，我們在左側選單中點選“應用”。

1. 點選左側選單應用，選擇透過模板建立應用，選擇 Spring Boot 模板。建立前最好先仔細閱讀下詳細中的說明。

2. 然後點選立即建立，進入到詳細頁面，這裡我選擇直接部署。

![24.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4aee179998f41d284ec99f1b8583018~tplv-k3u1fbpfcp-zoom-1.image "24.png")

3. 應用名稱直接按預設的走，然後點選建立。

![25.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df00741f16c24dfb9026edd015ce9fa3~tplv-k3u1fbpfcp-zoom-1.image "25.png")

我們會看到建立的一個過程。建立完畢後，可以看到框架已經生成，是不是非常的簡單和傻瓜式啊。

![26.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53ada7b33a414637a997a03588170e38~tplv-k3u1fbpfcp-zoom-1.image "26.png")

![27.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3f4aef78b504b3ab3f3a2f44867d2f4~tplv-k3u1fbpfcp-zoom-1.image "27.png")

4. 點選訪問域名就可以看到網站頁面了。這是生成的框架首頁，雲平臺自動為我們配置了一個子域名。

![28.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f98ce4aafab04ad7a28fe822b1db114a~tplv-k3u1fbpfcp-zoom-1.image "28.png")

![29.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d61927b85ef4a7d97dd47e95d84af76~tplv-k3u1fbpfcp-zoom-1.image "29.png")

5. 點選上面建立頁面的檢視全部，可以看到建立過程的日誌資訊。

部署分為 4 個部分，前置環境；資源同步；資源檢查；執行部署，感興趣的可以仔細閱讀，對了解整體過程還是有一定幫助的。

6. 透過底部函式資源中的服務和函式去檢視具體內容。

![30.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4acc3106a2243469664c77d8043b40a~tplv-k3u1fbpfcp-zoom-1.image "30.png")

當點選服務 web-framework 時候，就跳轉到具體的服務和函式資訊裡面了，這時候可以看到透過模板建立的 Spring Boot 框架已經部署成果，感興趣的可以檢視框架程式碼，並且修改程式碼。

![31.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/75ebc2e41a4b451da21750f8ca1684dc~tplv-k3u1fbpfcp-zoom-1.image "31.png")

到這裡，我們就全部完成了部署 Spring Boot 框架到函式計算平臺，大家可以自己實驗一下。

### 部署 Web 框架 Express 案例

宣告注意：這裡需登入自己阿里雲賬號開啟函式計算服務，函式計算服務屬於流量計費，有可能產生流量費用。請慎重使用。如產生費用，請自行承擔，也可以純粹閱讀學習。

繼續來部署 Node.js 語言 Express 框架的 TodoList 案例。還是在應用中找到 Express 的 TodoList 案例。

選擇熱門應用，選擇對應模板案例，然後點選詳情。

![32.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fb57b05dcd341c484602c84d6c549aa~tplv-k3u1fbpfcp-zoom-1.image "32.png")

我們可以在右側彈出的層中閱讀安裝說明。記得這裡我們不用點選立即建立，我們回到本機來用客戶端建立應用。

![33.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fd01c4c44084a07a3f91026cb29c0ec~tplv-k3u1fbpfcp-zoom-1.image "33.png")

這次我們採用開源工具 Serverless Devs 本地部署應用。安裝 Serverless Devs 客戶端前，你本機需要已經預裝了 npm，也就是需要安裝 Node.js 環境，可以在其官網下載node.js：

<https:>

一定要選擇預設 Paht 加入全域性變數中，然後開啟 CMD，檢查 node 安裝是否正常，輸入下面命令到 cmd 中。

```
node -v
```

如下圖出現版本號，就是正常的，如有其他問題，請自行百度安裝 npm 包環境。

![34.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7eb1de8a710473f976a7bd6abccccb8~tplv-k3u1fbpfcp-zoom-1.image "34.png")

1. 先安裝 Serverless Devs，直接從圖中官方文件可以安裝即可。

<https:>

```
$ npm install @serverless-devs/s -g
br
```

如下代表安裝成功。

![35.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c011ec9ff1b94e7cb4592e382817ec90~tplv-k3u1fbpfcp-zoom-1.image "35.png")

然後我們透過命令列來配置自己的金鑰，金鑰點選阿里雲右上角頭像圖示，在出現彈層中，選擇“AccessKey 管理”，可以找到自己 key 和 secret。

![36.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35e3dd7ee0e147ccbcc19ddb6d8369b5~tplv-k3u1fbpfcp-zoom-1.image "36.png")

![37.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a8fbb2acabd42b9b3a7ac8486fdab84~tplv-k3u1fbpfcp-zoom-1.image "37.png")

3. 我們開啟 Windows 的 cmd 命令提示符工具，來配置金鑰，輸入下面命令：

```
s config add
```

根據提示選擇 Alibaba Cloud，一步一步選擇貼上即可。（在輸入 s 命令前，記得根據上面文中說明，安裝好 Serverless Devs 的客戶端，這裡不做詳細指導）。

![38.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c68a9c9557d641cabfe37200c5ee64b7~tplv-k3u1fbpfcp-zoom-1.image "38.png")

4. 初始化模板專案，輸入下面命令，可以看到模板下載到了我們本地中。

```
s init todolist-app -d todolist-app
```

![39.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/502e8fed718e47a3aecd093f32a19396~tplv-k3u1fbpfcp-zoom-1.image "39.png")

5. 進入本地目錄，部署雲服務到阿里雲函式計算平臺中。輸入命令：

```
cd todolist-app && s deploy
```

可以在左側看到生成的 domain 就是訪問域名，觸發器形式為 http 形式。包括雲函式的名字和配置都一目瞭然。這裡提醒一下，本地用客戶端工具部署的雲函式不會在阿里雲平臺的應用列表中出現。

![40.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd6e36d923dc4b708edfd70f51d837ef~tplv-k3u1fbpfcp-zoom-1.image "40.png")

6. 部署後在控制檯可以看到生成域名，複製域名在瀏覽器上訪問，就會出現此頁面了。如果你修改原生程式碼，然後再次執行部署命令，我們的 Serverless 應用就會更新了。

![41.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/626f99d28b044e6e81c78550df0bed66~tplv-k3u1fbpfcp-zoom-1.image "41.png")

回到雲平臺，在左側選單“服務及函式”中可以看到部署的服務，點進去就是剛才的函式。

![42.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36bdcb56817b4a4c9c778781aa3f3c95~tplv-k3u1fbpfcp-zoom-1.image "42.png")

怎麼樣，到這裡是不是覺得雲函式也不是很難吧。另外大家記得，如果只是練習學習部署應用，可以在學習完成後刪除掉對應的應用或者服務，防止產生額外的費用。

回顧一下，兩個框架的部署都完成了，超乎想象的簡單哦！

這裡提一句，我還是比較滿意阿里雲的函式計算產品的 ，尤其是應用這個功能的上線，讓入門者學習，部署更加簡單。

上面的文章中，學會了怎樣部署 Web 應用到函式計算平臺中。

## 製作 Web IDE

### 分析詳解

接下來我來手把手教大家怎樣部署一個屬於自己的 Web IDE 工具，包括怎樣把官方生成的域名配置成自己的域名。

![43.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8d18cef14c2434489f417a2940bd8ad~tplv-k3u1fbpfcp-zoom-1.image "43.png")

### 介紹開源 Web IDE 工具

實操之前，我們還是先簡單瞭解下這個 Web IDE 工具。它是基於 Serverless 架構和 Vscode 的即開即用，用完即走的輕量 Web IDE 服務。具有海量外掛；資料實時儲存；低成本等特點。

它用 golang 語言實現反向代理訪問，它是基於開源的 openvscode-server，提供了 vscode Web IDE 的功能。感興趣並且會 golang 的朋友，可以瞭解下本地除錯的方法。

![44.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4aec094d3e584e20be1241d0a9499f2c~tplv-k3u1fbpfcp-zoom-1.image "44.png")

透過基本流程，我們可以學習到這個開源工具的執行原理，便於除錯和二次開發。

![45.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a8864c90bc7467991197d8721f07bcb~tplv-k3u1fbpfcp-zoom-1.image "45.png")

這裡重點說下開發除錯，如果你需要在本地環境中搭建，要仔細閱讀這裡，瞭解目錄結構和相關配置資訊。

![46.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6753cf16074424abb859b6e91e13dc1~tplv-k3u1fbpfcp-zoom-1.image "46.png")

開源工具介紹完畢，我們趁熱打鐵進行實踐吧！

### 製作自己的 Web IDE 工具

開始製作自己的 Web IDE 工具，按下面的步驟一步步執行即可。

宣告注意：這裡需登入自己阿里雲賬號開啟函式計算服務，函式計算服務屬於流量計費，有可能產生流量費用。請慎重使用。如產生費用，請自行承擔，也可以純粹閱讀學習。

1. 從官方模板中找到 serverless vscode webide 的模板，點選立即建立。

![47.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a665aeefdda048ccab1611f6c1e1d5a2~tplv-k3u1fbpfcp-zoom-1.image "47.png")

宣告注意：物件儲存 OSS 服務屬於流量計費，會產生流量費用。請慎重使用，如產生費用，請自己承擔。當然也可以單純閱讀學習。大家需要注意一點，這個 web ide 工具需要建立 OSS 物件儲存，OSS 便於儲存使用者的資料。建立應用時候，點選建立新的 OSS 儲存桶，跳轉到 OSS 產品後，直接建立一個 OSS 的 Bucket 即可。點選紅框下面的建立新的 OSS 儲存桶。

![48.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a540c594e5164273bad289b203d69b87~tplv-k3u1fbpfcp-zoom-1.image "48.png")

2. 跳轉到了物件儲存 OSS 的產品頁面，我們點選左側 Bucket 列表，然後點選建立 Bucket，填寫一個名稱 webidepractise，點選儲存即可。

也可以透過這個連結提前建立好 OSS 的儲存桶。

<https:>

![49.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5125b7014854727a0bc6c20583b919a~tplv-k3u1fbpfcp-zoom-1.image "49.png")

3. 回到應用建立頁面，點選重新整理，選擇剛才建立的 OSS，切記雲函式和 OSS 需要在同一個 Region。建立成功後，就會在應用列表中出現。

![50.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/181bbcdd9f904547a40daa2362fec210~tplv-k3u1fbpfcp-zoom-1.image "50.png")

4. 點選上圖中的配置，可以看到下面頁面，瞭解下函式的配置情況。紅框中就是我們選擇的 OSS，也可以調整為適合自己的配置。

![51.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43c5ff2431a74106b6f74f3ce0870d8f~tplv-k3u1fbpfcp-zoom-1.image "51.png")

5. 點選列表中的訪問域名，這裡就可以看到的 Web IDE 工具了，你可以在這裡開啟 Github 倉庫上的程式碼，直接線上編寫程式，是不是非常方便。

![52.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2490ae0029754ca4ac392ae88a99e34c~tplv-k3u1fbpfcp-zoom-1.image "52.png")

6. 配置自己的域名（如果沒有購買過阿里雲域名，可以忽略下面內容）。

宣告注意：這裡需從阿里雲平臺購買域名，域名會收取費用。請慎重使用，如產生費用，請自己承擔。點選左側選單域名管理，點選新增自定義域名，就可以看到這個頁面，在這裡配置子域名，然後複製公網 CNAME 域名，點選雲解析 DNS 控制檯來配置域名。

![53.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b27b818dc444abfbc6334e504a1a676~tplv-k3u1fbpfcp-watermark.image?)

7. 點選雲解析 DNS 控制檯後跳轉到了域名解析產品頁面，選擇自己購買過得域名，在域名解析中，我們點選解析設定就可以配置公網的 CNAME。

![54.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a60c3bca02e2462f8b2007f42893bcd6~tplv-k3u1fbpfcp-zoom-1.image "54.png")

8. 新增了一條 IDE 的 cname 的子域名記錄，記錄值是從雲函式複製過來的，這樣就形成了對映關係。新增完畢，我們回到剛才的雲函式域名配置頁面，選擇對應的路由配置，選擇你域名對應的服務名稱，函式名稱，版本名稱，點選建立，大功告成。

![55.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81a5da2a9e54424bba85eafb1275e633~tplv-k3u1fbpfcp-zoom-1.image "55.png")

9.接著在瀏覽器中輸入自己的域名，我們的 Web IDE 工具出現了，到這裡你是不是有了一絲的興奮。

![56.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ceb05eeeca94e58a9fcfa01b1ecc05e~tplv-k3u1fbpfcp-zoom-1.image "56.png")

到這裡，我們就學會了製作自己的 Web IDE 工具了，感興趣朋友可以二次開發完善自己的線上工具。

本次實踐所有學習和實踐的知識都已經講完。回顧一下整體的知識，從瞭解 Serverless 概念，架構，應用場景，到學習操作函式計算的產品，到部署流行 Web 框架，最後我們還製作了一個自己的 Web IDE 工具。

相信對一個入門學習者來說，你能跟著我學習和實踐完成，證明你已經基本掌握了 Serverless。後續可以把你的產品遷移部署過來，也可以在函式計算上開發部署自己的新專案或者新產品。

## 思考總結

這裡給大家幾個問題，思考總結一下：

-   Serverless，函式計算是什麼關係？
-   你喜歡本地部署還是線上部署？
-   研究一下函式計算怎樣配置例項，怎樣設定最大例項限制？
-   再思考一下...哪些應都可以遷移到雲函式？

點贊，評論，讓我看到你的想法！如果內容中存在不合適的地方，還請大家給我評論留言，我們一起交流學習。

原文地址：

<https:></https:></https:></https:></https:></https:>

透過部署流行 Web 框架掌握 Serverless 技術

相關文章