*作者：寒斜｜阿里云云原生中介軟體前端負責人*

> **導讀：** 本篇實戰將介紹如何以超低成本構建動態的 Web 站點，並且實現靈活擴充套件，限流等效果，最後再跟大家聊一聊“現代應用”的相關概念。

相信很多同學都有過想要擁有自己的 Web 站點的想法，但是如果想要搭建動態的站點，需要採購雲主機，買頻寬並且自己搭建環境，部署運維，整體下來成本會非常高。若如果只是搞靜態的站點的話，方式很多也很便宜，但是整體功能性就會比較弱，且收益效果也會差很多。

下面我們就使用 [Serverless Devs](https://github.com/Serverless-Devs) 為大家實操演示一下如何構建 Serverless 架構的現代化 Web 動態站點。

## 構建現代化 Web 動態站點

### 1、架構一覽

首先為大家介紹一下本次 Web 應用的架構圖：

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

我們採用阿里雲閘道器作為主流量入口，然後將動態請求轉發給 阿里雲函式計算，靜態檔案則交給 阿里雲物件儲存OSS 來處理。並在閘道器上做一系列的安全處理措施，如限流等。

### 2、準備工作

如上圖所示我們需要開通幾款阿里雲的產品 ：

-   [雲解析DNS](https://wanwang.aliyun.com/domain/dns)
-   [API 閘道器](https://www.aliyun.com/product/apigateway)
-   [函式計算](https://www.aliyun.com/product/fc)
-   [物件儲存OSS](https://www.aliyun.com/product/oss)

然後準備一個自己喜歡的域名，可以去[萬網](https://wanwang.aliyun.com/)申請一個，最便宜的只有幾塊錢，筆者申請的

serverless-developer.com 頂級域名僅 48 塊/年，本次部署將選擇香港 region, 域名需要實名認證，建議提前進行備案。

*（另外說一下 DNS 的域名解析是要花錢的，個人版的話第一個域名大約 40.8塊/年，此外每增加一個需額外另加20塊錢左右。）*

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

安裝好 [Serverless devs](https://www.serverless-devs.com/zh-cn) 開發者工具: npm install -g @serverless-devs/s

### 3、操作步驟

#### 1）秘鑰配置

對於新手而言，使用 Serverless Devs 的第一步就是將相關雲廠商的秘鑰資訊配置好，這樣才能夠進行相關的構建部署操作。只需要開啟電腦的終端，然後輸入 **s config add ，** 即可進入引導式操作 。

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

（開啟[連結檢視](http://www.serverless-devs.com/zh-cn/docs/provider-config/alibabacloud.html)更詳細的阿里雲秘鑰教程 ）

#### 2）應用初始化

秘鑰配置好，為了更便捷地檢索相關應用模板，我們可以登入 [serverless devs 應用中心](https://serverlesshub.resume.net.cn/), 搜尋 "**modern-web-application**"，然後根據下圖所示操作即可。

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

1.點選複製指令

2.開啟命令列終端進行貼上

3.根據引導提示輸入提前準備好的**域名(** 如 demo.serverless-developer.com **)** 以及**oss bucket 名稱(** hanxie-serverless-web **)** 建議 oss bucket 提前在控制檯建立

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

#### 3）構建部署

初始化之後可以選擇對專案進行配置修改，比如更改閘道器的分組名：

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

函式計算的服務名或者函式名：

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

改好之後直接輸入 **s deploy** 即可,此處大約會有一個1分鐘不到的部署構建時間

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

最終返回結果如下：

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

#### 4）訪問檢視

當我們部署好之後，我們可以檢視一下閘道器，OSS, 函式計算，以及 DNS 是否已經部署完成我們所需要的內容。

-   **閘道器部分**

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

-   **函式計算部分**

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

-   **OSS 部分**

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

-   **DNS 解析部分**

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

此時我們可以嘗試訪問一下 **demo.serverless-developer.com ，** 發現訪問不通：

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

原因有一下兩種可能性：

\

1. **gateway 的域名沒有繫結成功**，此時我們可以檢視

-   apigateway 分組管理
-   myserverlessdemo 檢視域名繫結，發現這部分其實是 ok 的；

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

2. 那麼有可能就是 **OSS 的域名未繫結成功**，我們可以透過 OSS 控制檯檢視

-   物件儲存
-   Bucket列表
-   傳輸管理，發現上述域名未進行繫結；

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

這裡我們點選域名繫結，將上述域名輸入繫結，完成後再次訪問域名，可以看到：

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

serverless devs 應用中心的部署效果

#### 5）站點安全

我們部署的站點還不是 https 的，所以需要把它變成 https 的站點以增加其安全性。

我們可以在阿里雲 SSL 上申請免費的證書，然後繫結到域名上,具體操作如下：

1.  訪問阿里雲官網
1.  搜尋ssl證書 ，[進入購買](https://common-buy.aliyun.com/?spm=5176.7968328.J_8413632810.2.5e9765c3tYD5XU&commodityCode=cas_dv_public_cn&request=%7B%22ord_time%22:%221:Year%22,%22order_num%22:1,%22product%22:%22cert_product%22,%22domain%22:%22all%22,%22productCode%22:%22symantec-dv-1-starter%22,%22service_num%22:1%7D)
1.  然後選擇免費的域名

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

之後進入 [SSL控制檯](https://yundunnext.console.aliyun.com/?p=casnext#/certExtend/free) 選擇 “SSL證書-免費證書”，點選建立證書。

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

此時會生成一列待申請證書的資料：

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

點選右側的“證書申請”將你的資訊和域名填寫上去，然後進行驗證，透過後“提交稽核”：

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

接下來回到 apigateway 控制檯，域名繫結部分選擇“證書”，可以看到已經建立好的域名：

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

同步後稍等片刻，訪問 [https://demo.serverless-developer.com](https://demo.serverless-developer.com) 即可看到效果：

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

至此你已經擁有了一個加密的 Web 站點。

加密之後還需要考慮一個問題，比如這次我把站點做成 demo，可能會面臨很多人的訪問，甚至被攻擊；那麼我應該如何進行限制流量過多產生的高昂費用呢？有了閘道器之後，限流的問題就變得簡單了。

我們登入到[閘道器的控制檯](https://apigateway.console.aliyun.com/)：

1.  選擇外掛管理；
1.  點選經典網路例項外掛-流量控制；
1.  並建立策略；

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

然後設定 1 分鐘最多可訪問 5 次：

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

建立好策略之後就是繫結 api，具體操作如下圖所示：

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

設定好策略後、繫結好訪問首頁的 api 後，我們進行一下測試。訪問域名，然後重新整理 5 次，第 6 次的時候會發現網站無法訪問：

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

至此說明你的網站已經成功限流了。

關於更多 Serverless 安全的問題比如 auther 認證、vpc 訪問、多環境部署等問題，可以在後面跟大家再一起探討，限於篇幅問題便不在本文中展開講解了，大家如果感興趣可以在評論區留言。

#### 6）站點可觀測

站點上線後不可避免的會需要一些可觀測的能力，比如 pv, uv，api 異常等等。相關的產品有很多，比如百度的統計，Google 的統計等。這裡可以給大家推薦使用 [ARMS的前端監控](https://www.aliyun.com/product/arms?spm=serverlessdevs), 除了通用的指標監控，你還可以透過它自定義上報一些關鍵資訊，如統計分享按鈕點選數，上傳 sourceMap 定位問題等。

## Serverless 應用架構拆解

### 1、整體目錄結構說明

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

這個 Serverless 架構的工程主要包含 3 個部分：

-   s.yaml 配置檔案
-   js runtime 的 api 服務
-   前端標準 react 專案工程

你可以自由選擇後端 api 服務的架構，以及前端開發框架，完全不會影響整體效果。值得一提的是，這裡使用的 api 框架是 Serverless Devs 提供的 Serverless first 的開發框架，針對冷啟動做了一些最佳化，你可以採用熟悉框架的開發語法糖，比如這裡是採用 koa 式的語法糖，你也可以選擇 express 的，具體細節可以訪問[官方庫](https://github.com/devsapp/dk-example)去檢視，非常適合中小型 Web 專案開發。

### 2、閘道器說明

其實這個 Web 應用架構核心的部分是在閘道器，透過閘道器實現了動靜態分流。域名及證書繫結，也是透過閘道器做各種限流和安全驗證。為了更好的使用閘道器我們開發了[apigateway的元件](https://github.com/devsapp/apigateway)，它是基於官方的 sdk 量身定製的 api 釋出服務。它是完全開源開放的，你可以根據需要自己去定製更多的閘道器路由部署流程，比如加入多環境的設定等，這裡我對配置做了一些簡化，讓開發者關注於路由和目標服務，相比自己一個一個去配置 api 要節省很多時間。

不過目前看依然比較複雜，關於這部分計劃會透過 Serverless Desktop 視覺化配置解決，大家也可以給我們 Devs官方提更多的 issue，一起把閘道器元件完善起來。

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

### 3、關於資費的真實說明

其實一開始我們就提到了這種 Serverless 架構的 Web 站點費用其實很低，如果排除使用資料庫的情況下，你只需要申請一個域名，可能幾塊錢就行，後面會完全按流量計費。對個人或者新創企業的站點而言，無疑是個巨大的利好，這裡可以給大家分享一下我的個人賬單。

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

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

可以看到費用確實低廉，當然這是在你應用比較小的情況下，不代表企業級生產的情況。如果你的專案一旦爆發，流量、資費上來之後，你就更能真實感受到 Serverless 架構的優勢了。

### 4、關於資料庫

本篇文章的應用模板僅是做服務轉發，所以還沒有涉及資料庫，想必大家也會非常關心資料庫的使用，所以在接下來的系列篇章中我會重點先從 [tablestore 表格儲存](https://www.aliyun.com/product/ots) 這個 Serverless 的 Nosql 介紹開始，後面也會跟大家逐步介紹 Mysql，mongodb 的使用情況。

雖然使用資料庫在 Serverless 架構中依然存在諸多問題，比如資料庫連線會增加冷啟動時間、資料庫前成本依舊高昂，不過大家不必擔心，相信隨著 Serverless 架構的廣泛落地，這些問題一定會迎刃而解的。

## 什麼是"現代化應用"

文章標題提到了"現代化應用"的概念，在這裡也跟大家解釋一下，什麼是 "Modern Application"。其實現代化應用這個概念已經被越來越被廣泛的認可了。不管是阿里雲，華為雲，AWS 都在推廣現代化應用的理念。這裡引用一段 AWS 對 Modern Application 的概念解釋：

> A modern application is the combination of modern technologies, architectures, software delivery practices, and operational processes that lead teams to deliver value more quickly, frequently, consistently, and safely. These applications typically take advantage of loosely coupled, distributed technologies and focus on event-driven, serverless components that allow teams to offload undifferentiated heavy lifting in order to spend more time on delivering value for their customers. A modern application also takes advantage of operational and security tooling to increase the reliability and consistency of deployments, while making it safe to deploy many times a day. The use of automation of infrastructure, security, and deployments allows the teams that own modern applications to move more quickly than if they were relying on manual processes or more significant operational management.

簡單概述就是，現代化應用是現代技術、體系結構、軟體交付實踐和操作流程的組合，可以引導團隊更快、更頻繁、更一致、更安全地交付價值，像 Serverless 以及事件驅動的架構這些都輸於現代化應用的範疇。

本篇文章也客觀展示了這種架構的價值所在，包括超低成本，安全，可擴充套件等，不過依然是那句話軟體工程沒有銀彈，Modern Application 也依然存在很多問題需要去解決, 需要大家一起去實踐驗證。總之我相信唯有經過實踐檢驗才能真正得到我們想要的答案。

## 相關連結

1）Serverless Devs：
<https:>

2）雲解析 DNS：
<https:>

3）API 閘道器：
<https:>

4）函式計算：

<https:>

5）物件儲存 OSS：
<https:>

6）萬網: 
<https:></https:>

7）金鑰獲取文件：
<http:>

8）Serverless Hub：
<https:>

9）選購 SSL 證書：
<https:>

10）應用實時監控服務 ARMS：
<https:>

11）官方庫：
<https:>

12）apigateway 元件：
<https:>

13）Tablestore 表格儲存：
[https://www.aliyun.com/product/ots](https://www.aliyun.com/product/ots)

***作者介紹：***

*王慶（寒斜）｜阿里云云原生中介軟體前端負責人*

*2016 年加入阿里中介軟體從事雲產品企業控制檯研發工作，負責中介軟體 20 多款雲產品前端研發工作，主要技術棧為大前端通用技術，目前專注在 Serverless 開發者工具鏈的建設，是雲原生 Serverless Devs 研發負責人之一。*

戳[**此處**](https://github.com/Serverless-Devs)，立即跳轉 Serverless Devs~</https:></https:></https:></https:></https:></http:></https:></https:></https:></https:></https:>

人人都是 Serverless 架構師 | 現代化 Web 應用開發實戰

相關文章