IBM Cloud Docs
使用 Code Engine 的无服务器 Web 应用程序和 API

使用 Code Engine 的无服务器 Web 应用程序和 API

本教程可能会发生成本。 使用 成本估算器根据您的预计使用量生成成本估算。

在本教程中，您将使用 Object Storage 中的存储区创建无服务器 Web 应用程序，并使用 IBM Cloud Code Engine 和 IBM Cloudant 作为 JSON 文档数据库来实现应用程序后端。

静态 Web 站点非常适合性能和安全性。 他们的架构模型有时被称为 Jamstack，指的是 JavaScript, API 和标记。 在本教程中，您将创建一个托管在 Object Storage上的静态 Web 站点。 该 Web 站点有一个使用 JavaScript 访问 API 以检索条目或添加新条目的 Guestbook。 用于与支持数据库交互的 API 是使用无服务器方法实现的。 它作为后端应用程序或微服务部署到 IBM Cloud Code Engine。 后端仅在需要时运行，因此在使用时发生费用。

目标

  • 部署无服务器后端和数据库
  • 将 REST API 公开为无服务器应用程序
  • 托管静态 Web 站点

本教程中说明的应用程序是一个简单的留言板 Web 站点，用户可以在其中发布消息。

架构*" caption-side="bottom"}{: caption="*

  1. 用户访问 Object Storage 中存储区上托管的应用程序
  2. 该 Web 应用程序调用后端 API。
  3. 具有后端 API 的应用程序将部署到 Code Engine。
  4. 后端使用 IBM Cloudant 来存储和检索 Guestbook 条目。

创建 Guestbook 数据库

让我们首先创建 IBM Cloudant 服务实例。IBM Cloudant 是完全受管的 JSON 文档数据库。 它基于 Apache CouchDB进行构建并与之兼容。

  1. 在 目录 中的 服务下，转至 数据库 类别。 单击 IBM Cloudant 磁贴。 在新对话框中:

    1. 在 多租户 下，选择区域。

    2. 在 Configure Cloudant instance 下为服务选择一个 unique 名称，例如 <yourinitials>-guestbook-db。

    3. 选择资源组。

    4. 选择 IAM 作为认证方法。

    5. 选择轻量套餐。 如果您的帐户中已有轻量套餐，请选择其他服务套餐。

    6. 单击创建。

  2. 返回到 IBM Cloud 资源列表 中的 服务下，单击您创建的 IBM Cloudant 实例以打开实例完整详细信息页面。 注意：您可能需要等待，直到服务状态变为 Active。
  3. 点击启动仪表板，在新浏览器标签页中打开仪表板。
  4. 在右上角，点击 “创建数据库”。 输入 guestbook 作为名称，并在 分区下选择 未解析。 点击 “创建” 创建数据库。

创建无服务器后端

在此部分中，您将使用 Code Engine创建无服务器后端应用程序。 无服务器应用程序仅在执行时间内产生费用，这对于不常访问的解决方案 (例如，访客簿) 而言是理想之选。

创建一个 Code Engine 项目

  1. 浏览至 IBM Cloud Code Engine 概述 页面。
  2. 在左侧面板中，点击 “项目”，然后点击 “创建”，
    • 选择位置。
    • 使用 <yourinitials>-guestbook 作为项目名称，并选择与之前相同的资源组。
    • 单击创建。
    • 等待项目 status 更改为 活动。
  3. 单击项目名称以进入项目仪表板。

创建和部署后端应用程序

  1. 在项目仪表板中，单击 应用程序，然后单击 创建。
  2. 在新对话框中，输入 guestbook-backend 作为名称。
  3. 使 容器映像 保持选中状态，并使用 icr.io/solution-tutorials/tutorial-serverless-api-webapp:latest 作为 映像引用。 它使用已有的容器映像。
  4. 在 实例资源下，针对 CPU 和内存选择 0.25 vCPU / 0.5 GB。 此类型的应用程序不需要太多资源。
  5. 将 最小实例数 增加到 1，并将 最大实例数 减少到 2。 最小的一个使应用程序在初始测试期间更具响应性。 您可以稍后将其再次降为零。
  6. 单击 创建 以部署访客簿的新后端应用程序。 请注意，如果没有下一步创建服务绑定，那么部署将失败并返回代码错误。
  7. 创建与数据库的服务绑定。
    1. 点击 “服务绑定” 选项卡。
    2. 单击创建。
    3. 单击 IBM Cloud 服务实例，然后从下拉列表中选择数据库。
    4. 将 角色 保留为 写程序。
    5. 单击添加。
  8. 等待供应报告为绿色且就绪。 点击 “测试应用程序”，然后点击 URL”。 后端应用程序应该装入并返回一个表示 healthy 的页面。 请记住或复制URL，因为下一步需要用到它。

您可以自行构建映像，而不是使用预先构建的容器映像。 可以在 在 Code Engine 的帮助下 外部执行此操作。 如果不使用预先构建的容器映像，并且如果 使用专用容器注册表，那么可能需要执行其他步骤。 您可以在以下位置找到源: https://github.com/IBM-Cloud/serverless-guestbook/tree/ce

部署 Web 应用程序

创建配置了静态 Web 站点托管的 Object Storage 存储区，其中包含使用 IBM Cloudant 数据库的访客簿 JavaScript 应用程序的文件。

创建一个 Object Storage 实例：

  1. 从目录中选择 Object Storage。
  2. 针对基础架构选择 IBM Cloud，并针对套餐选择 标准。
  3. 为实例输入 唯一服务名称，如 <yourinitials>-guestbook-cos。
  4. 选择资源组。
  5. 单击创建。

创建为静态 Web 站点托管配置的存储区:

  1. 单击创建存储区。
  2. 点击自定义您的水桶。
  3. 输入在所有 IBM 帐户中唯一的存储区名称。 请尝试 <yourinitials>-guestbook。
  4. 选择弹性作为 区域。
  5. 选择与 IBM Cloudant 实例一致的 位置。
  6. 保留 存储类 缺省值
  7. 向下滚动到 静态 Web 站点托管，然后单击 添加 +。
  8. 保持路由规则 (个人) 处于选中状态，并添加“索引”文档 index.html。
  9. 单击 开启 的公共访问权
  10. 单击保存。
  11. 滚动至底部并点击创建存储桶

将 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce 的 docs 目录中的文件复制到存储区中:

  1. 在新选项卡中打开 https://github.com/IBM-Cloud/serverless-guestbook/tree/ce。

  2. 通过单击 代码，然后单击 下载 ZIP 来下载 zip 文件。

  3. 解压缩该文件并浏览至解压缩文件的 docs 目录。

  4. 编辑 guestbook.js ——将 apiUrl 的值替换为上一部分URL。

    确保 URI 不以斜杠 (/) 结尾。否则应用程序将无法工作。

  5. 打开存储区 对象 视图，并将 guestbook.js 和 index.html 文件拖放到 COS 存储区。

  6. 浏览至存储区的 配置 选项卡。 在 端点 部分中，找到 静态 Web 站点托管端点 部分。 将 Public 端点复制到浏览器选项卡中。

  7. 您应该会看到“访客簿”页面。

  8. 向访客簿添加新条目。

Guestbook Screenshot
Guestbook Screenshot

除去资源

要删除已创建的存储区和 Object Storage 服务:

  1. 浏览至 Object Storage 存储区对象
  2. 选中标题行中的框以选择存储区中的所有对象
  3. 单击 删除对象
  4. 在存储区对象页面的右上方 操作 菜单中，选择 删除存储区
  5. 在 Object Storage 实例 操作 菜单的右上方，选择 删除实例

要删除已创建的 IBM Cloudant 服务，

  1. 浏览至 资源列表
  2. 在 数据库下，单击 <yourinitials>-guestbook-db 服务旁边的操作菜单
  3. 点击删除

要删除应用程序和项目 Code Engine，

  1. 浏览至 Code Engine 登录页面。
  2. 在左侧面板中，点击 “项目”。
  3. 在项目列表中，检查访客簿项目，然后单击 删除。

根据资源的不同，可能不会立即将其删除，但会保留 (缺省情况下为 7 天)。 您可以通过永久删除该资源或在保留期内将其复原来回收该资源。 请参阅本文档，以了解如何 使用资源回收。

相关内容