Headless CMS 和无服务器的方法构建 Web 内容的云化-JavaScript中文网-JavaScript教程资源分享门户

随着云计算和云服务的发展，越来越多的站点和应用已经开始向云端倾斜。作为 Web 内容及前端开发人员，我们也需要逐渐适应这种趋势，将传统的服务器端操作向云端转移。

在这个过程中，Headless CMS 和无服务器架构是两个非常有帮助和实用的工具和方法。在本文中，我们将介绍这两个概念，探讨其原理、使用场景，并提供一些实例代码，帮助大家更好的理解并应用这些技术。

Headless CMS 到底是什么？

Headless CMS 是一种分离前后端开发的方式，它专注于管理和存储内容数据、并提供 API 接口供前端调用。Headless CMS 通常不包含前端界面或模板，而是提供企业级的 CMS 功能，例如创建内容类型、对内容进行版本控制、管理用户权限、提供搜索等等。这些功能让 Headless CMS 成为了一种强大的工具，可帮助我们更好地管理站点和应用的内容。

举个例子，我们可以将一个 Headless CMS 系统设置为存储博客文章、图像和元数据等内容，并使用 REST API 将这些内容提供给前端。这样做的好处在于，我们可以专注于前端技术的开发，而不必关心后端的运作，从而实现更好的前后端分离。

无服务器架构是如何帮助前端开发人员的呢？

“无服务器”可能听起来像是一种魔术般的技术，但实际上它是指一种特殊的架构方案，其中应用程序的运行和处理由云端提供商管理，而不是由自己的服务器或数据中心承担。这个概念已经存在了很长时间，但近年来由于云计算和云服务的发展，它正在变得越来越流行和实用。

因为无服务器让我们可以专注于业务逻辑和应用开发，而不必担心有关服务器架构和服务器运维的复杂性和费用。相比于传统的服务端架构，无服务器模式能够实现更好的弹性扩展，并能够自动化处理几乎所有基础架构层的事情。因此它是一种既简单又强大的管理 Web 内容的方式，能够更好地满足现代化应用的需求。

Headless CMS 和无服务器架构应用场景

Headless CMS 和无服务器架构是很多 Web 内容开发中的有用工具，它们在各种情况下都能够发挥作用。

举个例子，Headless CMS 可以用于以下场景：

让多个应用程序共享相同的内容数据
仅需要管理和维护单个内容数据源
在不同频道和平台上提供数据和内容

而无服务器架构则用于以下场景：

不需要自己配置和维护服务器
为 Web 应用程序和功能提供高度弹性的扩展性
执行处理繁重任务的后台功能

当然，这些只是两者应用场景的一部分，因为 Headless CMS 和无服务器架构仍然在快速发展中。我们预计它们将在未来越来越适用于更多的真实世界问题和应用场景。

如何运用 Headless CMS 和无服务器架构于实际应用？

下面我将给大家举例介绍如何使用 Headless CMS 和无服务器架构来构建我们自己的 Web 应用程序。

步骤一：选择 Headless CMS

首先，我们需要选择一种 Headless CMS，因为它将存储我们的内容数据。在这个例子中，我们选择一个叫做 Strapi 的服务，因为它是一种开源和易于使用的 CMS，经常被用来构建 Headless CMS 系统。

步骤二：建立 API

一旦我们已经选择了正确的 Headless CMS，就可以开始定义我们的 API 接口了。在这个例子中，我们创建了一个存储书籍信息的数据模型，并指定了书籍名称、作者、摘要、出版日期和 Cover 图像等五个字段。我们还为这个模型定义了三个 API 端口，它们是：

GET /books：返回所有图书的列表
GET /books/:id：返回与特定 ID 对应的书籍数据
POST /books：创建一个新的书籍记录

这个 Strapi CMS 的具体用法，请大家参考官方文档。

步骤三：定义服务器构架

接下来，我们需要定义服务器架构。在这个例子中，我们使用 AWS Lambda 来实现 “无服务器” 架构。

Lambda 是一个基于事件（event-based）的计算服务，可以等比例地、实时地处理传入的信息并响应该事件，例如数据流、视频流、对象变更等等。在这个例子中，Lambda 将负责处理我们的 API 请求，并响应客户端的请求。

进行该步骤之前，大家需要准备好 AWS 账户以及 AWS CLI 环境。

首先，我们使用 Python 和 Flask 框架来实现我们的 web 库，并在 Lambda 中运行它。

// javascriptcn.com 代码示例
from flask import Flask
app = Flask(__name__)

@app.route('/books')
def books():
    # Connect to the Strapi CMS to get the list of books
    # ...

@app.route('/books/<id>')
def book(id):
    # Connect to the Strapi CMS to get the book details
    # ...

@app.route('/books', methods=['POST'])
def create_book():
    # Connect to the Strapi CMS and create a new book
    # ...

接下来，我们将使用 AWS SAM 来定义我们的 Lambda 函数和 API 网关，从而我们可以将我们的 web 库部署到 AWS 云端上。

// javascriptcn.com 代码示例
Resources:
  ApiGatewayRestApi:
    Type: AWS::ApiGateway::RestApi
    Properties:
      Name: my-api
  BooksResource:
    Type: AWS::ApiGateway::Resource
    Properties:
      RestApiId: !Ref ApiGatewayRestApi
      PathPart: books
  BooksGetMethod:
    Type: AWS::ApiGateway::Method
    Properties:
      HttpMethod: GET
      ResourceId: !Ref BooksResource
      RestApiId: !Ref ApiGatewayRestApi
      AuthorizationType: NONE
      Integration:
        Type: AWS_PROXY
        Uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${BooksFunction.Arn}/invocations
  BookGetMethod:
    Type: AWS::ApiGateway::Method
    Properties:
      HttpMethod: GET
      ResourceId: !Ref BooksResource
      RestApiId: !Ref ApiGatewayRestApi
      AuthorizationType: NONE
      Integration:
        Type: AWS_PROXY
        Uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${BookFunction.Arn}/invocations
  BooksPostMethod:
    Type: AWS::ApiGateway::Method
    Properties:
      HttpMethod: POST
      ResourceId: !Ref BooksResource
      RestApiId: !Ref ApiGatewayRestApi
      AuthorizationType: NONE
      Integration:
        Type: AWS_PROXY
        Uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${CreateBookFunction.Arn}/invocations
  BooksFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: books
      Handler: app.books
      CodeUri: .
      Runtime: python3.8
      Environment:
        Variables:
          STRAPI_URL: "http://ec2-0-0-0-0.us-west-2.compute.amazonaws.com:1337/books"
  BookFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: book
      Handler: app.book
      CodeUri: .
      Runtime: python3.8
      Environment:
        Variables:
          STRAPI_URL: "http://ec2-0-0-0-0.us-west-2.compute.amazonaws.com:1337/books"
  CreateBookFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: create_book
      Handler: app.create_book
      CodeUri: .
      Runtime: python3.8
      Environment:
        Variables:
          STRAPI_URL: "http://ec2-0-0-0-0.us-west-2.compute.amazonaws.com:1337/books"

步骤四：部署服务器

现在，我们已经完成了应用程序的所有代码，并且定义了一些 API 端口和服务器端架构。接下来，我们将部署服务器并打开端口，以便访问我们的 API。

可以使用以下命令来构建和发布我们的 AWS Lambda 代码：

pip install -r requirements.txt -t ./
sam package --template-file template.yaml --s3-bucket my-bucket --output-template-file packaged.yaml
sam deploy --template-file packaged.yaml --stack-name my-stack --capabilities CAPABILITY_IAM --region us-west-2

一旦完成构建和运行服务器，我们就可以使用 AWS API Gateway 手工测试 API，或者使用 Postman 或 API 工具等第三方工具进行测试请求了。

步骤五：构建前端应用程序

最后，我们可以使用我们喜欢的 JavaScript 框架（例如 React）来构建我们的前端应用程序，调用我们的 Strapi CMS Headless CMS 和 AWS Serverless API。

// javascriptcn.com 代码示例
import React, { useState } from "react";
import { API } from "aws-amplify";

function App() {
  const [books, setBooks] = useState([]);

  async function fetchBooks() {
    const response = await API.get("MyAPI", "/books");
    setBooks(response.data);
  }

  async function createBook(bookData) {
    const response = await API.post("MyAPI", "/books", {
      body: bookData
    });
    setBooks([...books, response.data]);
  }

  async function deleteBook(bookId) {
    await API.del("MyAPI", `/books/${bookId}`);
    setBooks(books.filter(book => book.id !== bookId));
  }

  return (
    <div className="App">
      <h1>Books</h1>
      <button onClick={fetchBooks}>Refresh</button>
      {books.map(book => (
        <div key={book.id}>
          <h2>{book.title}</h2>
          <p>{book.author}</p>
          <p>{book.summary}</p>
          <p>{book.publishedDate}</p>
          <button onClick={() => deleteBook(book.id)}>Delete</button>
        </div>
      ))}
      <form
        onSubmit={event => {
          event.preventDefault();
          const form = event.target;
          createBook({
            title: form.title.value,
            author: form.author.value,
            summary: form.summary.value,
            publishedDate: form.publishedDate.value
          });
        }}
      >
        <input type="text" name="title" placeholder="Title" />
        <input type="text" name="author" placeholder="Author" />
        <textarea name="summary" placeholder="Summary" />
        <input
          type="text"
          name="publishedDate"
          placeholder="Published Date"
        />
        <button type="submit">Add</button>
      </form>
    </div>
  );
}

export default App;

在这个示例中，我们首先定义了一个状态“books”，并使用“useState”钩子来更新它。接下来，我们创建了三个异步函数来分别执行获取书籍列表、“POST 添加书籍”和“DELETE 删除书籍”操作。

请注意，我们在前端应用程序中使用与我们在 AWS Lambda 和 API Gateway 中定义的端口完全相同的名称 MyAPI。

总结

在本文中，我们已经展示了 Headless CMS 和无服务器架构是如何帮助前端开发人员实现 Web 内容的云化的，并且我们提供了一些实例代码，帮助大家更好地理解并应用这些技术。这些技术已经被证明在现代化的 Web 应用程序开发中非常有用和实用，我们相信它们将在未来继续发挥重要的作用，帮助更多的开发人员和企业实现他们的数字化转型。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654397cc7d4982a6ebd62398