Serverless 是一种新兴的云计算架构，它可以让开发者在云平台上编写自己的应用，而无需关注底层的基础设施。通过 Serverless，开发者可以更加专注于自身业务逻辑的实现，从而快速、高效地开发出符合自己需求的应用。
在这篇文章中，我们将一步步介绍如何入门 Serverless 并针对前端类应用给出实践方案与指导意义，并配合示例代码，帮助你实现一个简单的前端应用。
1. 什么是 Serverless
Serverless 具有一些重要的特性：
- 无服务器: Serverless 架构中没有服务器，而是通过云提供商提供的资源直接运行代码，无需关心基础架构。
- 按需计费: 微观的资源调度可以更好地适应不同的负载需求，从而实现更加精细的按需计费，降低成本。
- 事件驱动: Serverless 通过事件驱动的方式来调度代码执行，开发者只需要关注业务逻辑的实现。
Serverless 应用又被称为 FaaS（Function as a Service），因为它们以函数的形式运行。
2. Serverless 的应用场景
Serverless 通常可以用于以下场景：
- 处理后台任务
- 构建 Webhook
- 构建 API Gateway
- 托管静态文件
在这篇文章中，我们将会针对前端类应用来介绍如何使用 Serverless。
3. 前端应用与 Serverless
前端应用通常需要向后台请求数据，并将数据展示给用户。在 Serverless 中，我们可以使用云提供商的 API 网关和函数来构建后台 API，并将数据返回给前端应用。
下面是如何使用 Serverless 制作一个前端引导页的示例代码：
-- -------------------- ---- ------- -- ---------- ---- -------- -------------------- - ----- ----- -- - ----- -------- - - ----------- ---- ----- ---------------- -------- ------ -------- --- -- ------ --------- --展开代码
-- -------------------- ---- ------- - -------------- -------- ---------- --------- ----- --- -------- ---------- ---------- ------ -------- ------------- ------- - ----- ----- - ------- ---展开代码
该示例代码使用 AWS Lambda 和 API Gateway 构建了一个简单的“Hello World” API 并暴露给云端。可以看到，Serverless 代码使用 Node.js 编写，并通过 API Gateway 配置的 HTTP 调用 API 网关来响应请求。
这样一来，前端应用就可以方便地向后台请求数据，并将数据展示给用户。
4. 如何使用 Serverless 制作前端应用
下面我们将一步步向大家介绍如何使用 Serverless 制作一个前端应用。
第一步：搭建前端应用
我们先从搭建前端应用开始，这里我们选择 React。
首先需要安装 React 的脚手架，可以通过以下命令进行安装：
npm install -g create-react-app
安装完成后可以使用以下命令创建一个新的 React 应用：
create-react-app my-app cd my-app npm start
这里我们创建了一个名为“my-app”的 React 应用，并使用命令npm start开始运行应用。
第二步：前端应用与 Serverless 的交互
使用 Serverless 构建的 API 可以帮助我们在后台获取数据，并将其发送到前端。下面我们将展示如何使用 Serverless API 和 React 结合起来工作。
首先，我们需要安装 AWS SDK：
npm install aws-sdk
安装完成后，我们可以使用以下代码向后台发起请求：
-- -------------------- ---- ------- ------ --- ---- ---------- ----- --- - --- ---------------- ------- ----------------- --- ------------ ------------- -------- --------------- ------------------ -------- ------- -- ----- ----- -- - -- ----- - ----------------- - ---- - ------------------ - ---展开代码
在代码中，我们使用 AWS SDK 来动态调用 Serverless 函数。FunctionName 是函数名称，InvocationType 是函数调用类型（同步或异步），LogType 是日志类型（None, Tail）。
第三步：编写 Serverless 代码
在这一步中，我们将编写 Serverless 代码。代码将使用 Node.js 实现，应该在 AWS Lambda 中执行。要开始，我们需要使用以下命令初始化项目和节点运行环境：
npm init npm install --save-dev serverless npm install --save-dev serverless-apigw-binary npm install --save-dev serverless-plugin-provide-function-version
完成之后，我们可以使用以下命令创建 Serverless 服务：
serverless create --template aws-nodejs
完成创建后，我们可以在serverless.yml配置文件中添加 API 配置：
-- -------------------- ---- ------- -------- ---------- --------- ----- --- -------- ---------- ---------- ------ -------- ------------- ------- - ----- ----- - ------- --- ------------ ------------ -------- --------- ----------------- -------------- ------------- --- - ----- ----- --------- ------- --- ------------ ------------ -------- --------- ----------------- -------------- -------------- --------- ----------- --- -------- - ----------------------- - ------------------------------------------展开代码
上述代码中，我们为两个 API 配置添加了两个 HTTP 事件：第一个事件对应根路径，第二个事件匹配所有可用的 HTTP 动作（例如GET, PUT, POST, DELETE 等）。这里使用了lambda-proxy 集成，也就是说在请求被路由到函数之前，API 网关已经帮助我们序列化数据。
第四步：部署 Serverless 应用
完成了 Serverless 应用的编写，接下来就需要将 Serverless 应用部署到云端。在 Serverless 中，我们使用serverless deploy命令进行部署。执行以下命令：
serverless deploy -v
该命令会将我们的 Serverless 应用打包成一个 ZIP 文件，然后将其上传到云端的 API 托管工具和 Lambda 中。当程序被成功部署到 AWS Lambda 上时，你将获得一个类似于以下内容的输出：
... endpoints: GET - https://XXXXXXXXXX.execute-api.ap-southeast-1.amazonaws.com/hello-test/ functions: hello: hello-test-hello
输出包括部署的 API 网关路径和 Lambda 函数名称。
第五步：运行前端应用
到了这一步，我们需要运行前端应用，代码见下：
-- -------------------- ---- ------- ------ ------ - --------- --------- - ---- -------- ------ --- ---- ---------- ------ ---- ---- ------------- ------ ------------ ----- --- - --- ---------------- ------- ----------------- --- -------- ----- - ----- ------ -------- - ------------- ------------ -- - ------------ ------------- -------- --------------- ------------------ -------- ------- -- ----- ----- -- - -- ----- - ----------------- - ---- - ---------------------------------- - --- -- ---- ------ - ---- ---------------- ------- ----------------------- ---- ---------- -------------------- ---------- ----------- -- --- -------------- ---- --------- ------ -- - ------ ------- ----展开代码
这里使用useState来保存数据，并在组件首次渲染时使用useEffect发起 API 请求，然后更新数据。
在前端应用文件夹的根目录中，使用以下命令启动 React 应用：
npm start到这里，一个简单的 Serverless 前端应用已经完成了。我们使用 React 编写了一个展示 "Hello, World!" 的引导页，然后通过 Serverless 函数生成数据并将其作为响应返回给前端。
意义与总结
Serverless 带来了更高效、更贴合开发者业务需求的开发体验。
通过本文我们了解了 Serverless 的定义和应用场景，然后详细认识了如何使用 Serverless 制作简单的前端引导页，以及如何使用 React 和 AWS SDK 与 Serverless 函数链接。
最后，Serverless 的目标是帮助开发者微调其应用程序，并提供可靠、高效和灵活的架构。对于前端开发者来说，Serverless API 应该是必学技能之一。
希望本文能对你有所帮助，快快行动起来，掌握 Serverless 技能！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3a42348841e9894002667
