Serverless 综合案例：用 Serverless 开发一个图床 Web 应用
随着云计算和前端技术的不断发展，Serverless 成为了一种越来越受欢迎的后端开发架构。在 Serverless 架构下，我们无需关心服务器和运维问题，只需要编写业务逻辑代码就可以了。本文将以一个图床 Web 应用为例，介绍如何使用 Serverless 架构开发后端服务。
- 什么是图床
首先，我们需要了解什么是图床。图床是指一种图片上传、存储、管理、分享等功能为一体的在线服务，它可以帮助我们快速地上传图片并获得图片的链接，方便在论坛、博客等场合使用图片。图床一般都需要提供以下功能：
- 图片上传：支持用户上传图片文件，并存储到服务器上。
- 图片管理：支持用户管理已上传的图片，包括查看、删除、复制等操作。
- 图片分享：支持用户获取图片链接，方便在网站、社交网络等地方分享图片。
- Serverless 架构概览
Serverless 架构是指一种无服务架构，也叫 BaaS（Backend as a Service）。在此架构下，所有的应用逻辑都运行在云服务商所提供的函数计算平台上，开发者只需要编写函数代码，上传到云端，由云服务商自行管理和运行函数。Serverless 架构具有以下优点：
- 无需维护服务器：无需为服务器的运维和管理而花费精力和费用。
- 自动扩容：根据实际负载情况自动扩容，避免因为流量峰值导致服务不可用。
- 按使用付费：按照函数的实际使用情况计费，避免因为闲置资源而浪费资金。
- 图床应用架构设计
图床应用需要提供上传、管理和分享等功能，它的总体架构如下图所示：
应用分为两层：前端界面和后端服务。前端界面由 HTML、CSS 和 JavaScript 组成，提供用户界面和交互。后端服务则通过 API Gateway 和函数计算实现，提供图片上传、管理和分享等功能。
- 构建 Serverless 后端服务
基于 Serverless 架构，我们需要使用云厂商的函数计算服务来构建后端服务。我们选用阿里云函数计算作为 Serverless 服务商，下面将介绍如何使用阿里云函数计算构建图床后端服务。
4.1. 函数计算简介
阿里云函数计算是基于事件驱动的 Serverless 计算平台，支持使用多种编程语言编写函数，包括 Java、Python、Node.js 等等。在这里，我们将使用 Node.js 编写图床后端服务。
我们可以使用阿里云函数计算控制台或函数计算命令行工具来创建、部署和管理函数。在下面的教程中，我们将以函数计算命令行工具为例来演示如何创建函数和上传代码。
4.2. 创建函数
首先，我们需要创建一个函数。在命令行终端中，运行以下命令：
$ fun init -n image-hosting -t http -p nodejs12 $ cd image-hosting $ fun deploy
这将会创建一个函数，并上传到函数计算服务中。其中，-n 参数指定了函数名称，-t 参数指定了函数模板类型，-p 参数指定了运行环境。
创建成功后，我们可以在函数计算控制台中看到函数的详细信息。
现在我们已经创建了一个函数，但它什么功能也没有。下面我们将编写图床后端服务的代码。
4.3. 上传图片
接下来，我们需要编写一个能够上传图片的函数。我们可以使用阿里云函数计算中的 OSS（Object Storage Service）服务来存储图片文件。
代码如下：
-- -------------------- ---- -------
---- --------
----- --- - -------------------
----- ------ - ------------------
----- -- - --------------
----- ---- - ----------------
----- ------ - -------------------
----- ------ - --- -----
------- -----------------------
------------ ------------------------------
---------------- ----------------------------------
------- ----------------------------
---
--------------- - ------- -------- --------- -- -
----- ------ - ----------------------------
----- ---- - ---------------------
----- ----------- - ------------------------------
----- -- - --- --------
-------- -
--------------- ----------- -- ---------------------------
--
------- -
------- --
------ --
--------- ---------
--
---
-------------- ----------- ---- ------------------- ------------- -- -
-------------- -
----------- ----
----- --------- - ----- --- ---- ---------------------
---
---
------------- ----------- ----- --------- --------- --------- -- -
----- ------ - ------------
----- -------- - ----------------- ----------
----- --- - -----------------------
----- -------- - -------- - ----
----- -------------- - ---------------------
------------------------------------------
----- ------ - ------------------------------
------
-------------------------- -------
-------------- -- -
----- --- - ---- - --- - ------ - --- - ---------------
-------------- -
----------- ----
-------- -
------------------------------ ----
--------------- -------------------
--
----- ---------------- --- ---
---
--
------------ -- -
--------------
---
---
-------------- ----- -- -
--------------
---
-------------------
--该函数的作用是接收一个图片文件，保存到 OSS 对象存储服务中，并返回图片的链接 URL。函数的处理逻辑如下：
- 通过 busboy 插件解析 HTTP 请求，处理上传的文件。
- 生成一个随机的文件名，并将文件保存到 OSS 中。
- 返回图片的 URL。
需要注意的是，我们需要在阿里云函数计算的服务配置中，设置 OSS 的访问秘钥信息、Bucket 名称、访问域名等参数。我们也可以在配置中添加其他环境变量。这些参数可以使用 Serverless 模板来设置。
4.4. 获取图片链接
接下来，我们需要编写一个能够获取图片链接的函数。该函数需要支持根据图片 ID 获取图片链接、获取所有图片列表等操作。
代码如下：
-- -------------------- ---- -------
---- --------
----- --- - -------------------
----- ------ - --- -----
------- -----------------------
------------ ------------------------------
---------------- ----------------------------------
------- ----------------------------
---
--------------- - ------- -------- --------- -- -
----- ------ - ----------------------------
----- ---- - ---------------------
----- ---- - -----------
-- ----- --- -------- -
------
-------
------- ----------
----------- ----
--
-------------- -- -
----- ---- - ------------------------ -- -
------ ---- - --- - ------ - --- - ---------
---
-------------- -
----------- ----
-------- -
------------------------------ ----
--------------- -------------------
--
----- ---------------------
---
--
------------ -- -
--------------
---
- ---- -- ---------------------------- -
----- --- - -----------------------------
----- --- - ---- - --- - ------ - --- - ----
-------------- -
----------- ----
-------- -
------------------------------ ----
--------------- -------------------
--
----- ---------------- --- ---
---
- ---- -
-------------- -
----------- ----
---
-
--该函数的作用是根据图片 ID 获取图片链接，并支持获取所有图片列表等功能。函数的处理逻辑如下：
- 如果请求的路径为
/list，则返回图片列表。 - 如果请求的路径为以
/image/开头，则获取对应图片的链接。 - 如果请求的路径不匹配，则返回 404。
需要注意的是，我们在函数处理中通过 Access-Control-Allow-Origin 头来解决跨域问题。
- 前端界面开发
前端界面主要使用 HTML、CSS、JavaScript 和第三方库（如 jQuery 和 Axios）来实现。前端需求如下：
- 提供一个上传文件的界面，并支持拖拽上传和点击上传两种方式。
- 显示已上传的图片列表。
- 点击图片可以跳转到图片的链接地址。
代码如下：
-- -------------------- ---- -------
--------- -----
------
------
-----------------
----- --------------- --
-------
------
-----------
--- --
-------------
----- --------------------
------ ----------- ----------- --------------- ----- --
------- --------------------------------
--------
-------
-------------
--- ------------------------
------- ----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------
-------
--------
----- ------- - -------------------
-- ----
------------------------------ ------------------- -------- --- -
----- ---- - ------------------
----- --- - --- -----------------
---------------- ---------------------
---------- - -------- -- -
-- ----------- --- ---- -
----- ---- - -----------------------------
----------------------
- ---- -
----------------------
-
--
----- -------- - --- -----------
----------------------- ------
-------------------
---
----------------------------- -------------- -------- --- -
-------------------
------------------------------
---
-------------------------------- -------- --- -
-------------------
------------------------------------
---
--------------------------------- -------- --- -
-------------------
---------------------------------------
---
---------------------------- -------- --- -
-------------------
---------------------------------------
----- ---- - --------------------------------------
----- --- - --- -----------------
---------------- ---------------------
---------- - -------- -- -
-- ----------- --- ---- -
----- ---- - -----------------------------
----------------------
- ---- -
----------------------
-
--
----- -------- - --- -----------
----------------------- ------
-------------------
---
-- ------
--------------------------------------- -- -
----- ---- - ---------
------------------ -- -
-----------------
---
---
-------- ---------------- -
----- -- - ----------------------------------
----- - - --------------------- ------------------
----- --- - ---------------------- -----------------
-
---------
-------
------------ -
------- --- ------ -----
-------------- ----
-------- -----
-------------- -----
-
---------------- -
------------- -----
-
----------- -
----------- -----
------- --
-------- --
-
----------- -- -
-------- -------------
-------- -----
-
--------
-------- 部署应用
在编写完前端界面和后端服务代码后，我们需要将应用部署到云端。在命令行中运行以下命令：
$ fun package $ fun deploy
fun package 命令将会打包应用，并生成 template.yml 文件。在我们部署应用时，Serverless 框架将自动部署应用的所有资源。
fun deploy 命令将会自动将应用部署到云端。我们可以在控制台中查看应用的部署状态和资源情况。
完成以上步骤后，我们就可以在浏览器中访问应用，上传图片并查看图片列表了。
- 总结
Serverless 架构具有许多优点：免去部署和运维的烦恼，支持弹性扩容和按使用计费，开发效率高等。在本文中，我们使用了 Node.js 和阿里云 Function Compute 服务来构建一个图床 Web 应用，并介绍了如何使用 Serverless 架构来快速开发后端服务。希望该案例能够给读者提供一些参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae5c7448841e9894a61992