为静态网站托管设置 OCI Object Storage 和 Oracle API Gateway

简介

如果您希望在 Oracle Cloud Infrastructure (OCI) 上托管 Web 应用并希望设置静态网站托管，我们将在本教程中介绍如何使用 OCI Object Storage 和 Oracle API Gateway 为富 AOT (AOT) 编译的 JavaScript Web 应用配置静态托管。同样的方法可以应用于您希望通过 HTTP 提供静态文件的任何场景，无论是对于更简单的应用程序还是静态网页，以及在 OCI 平台上为用户提供可靠的在线体验，而且成本更低。

目标

了解如何利用 OCI Object Storage 和 Oracle API Gateway 来托管静态网站，从而在 Oracle Cloud Infrastructure 上高效部署和管理 Web 内容。

Prerequisites

访问 Oracle Cloud 租户。
AOT 兼容的应用程序（支持的框架和库包括 Angular 2+、ReactJs、NestJs、VueJs、Ionic 等）。

任务 1：创建 Oracle 对象存储存储桶

首先，在 OCI 对象存储中创建新的存储桶。此存储桶将用于托管您的静态网站。

对象存储存储桶

任务 2：在存储桶中上载分发文件

将应用程序分发文件上载到在上一个任务中创建的存储桶。应用程序分发文件通常位于应用程序目录的 /dist 文件夹中，并且是 Webpack 构建的输出。

分发文件

提示：如果要使用 oci-cli 上载文件，请务必指定 --content-type auto 参数以确保 Content-Type 已正确设置。

任务 3：创建预先验证的请求

要允许 Oracle API Gateway 通过 Internet 为分发文件提供服务，您需要为存储分发文件的对象存储桶创建预先验证的请求 PAR 。

我们将在配置 API 网关时使用此方法。

任务 4：创建 Oracle API Gateway

借助 Oracle API Gateway 服务，您可以发布具有专用端点的 API，这些端点可从您的网络访问，并且如果您希望公共 IP 地址接受互联网流量，则可以使用公共 IP 地址公开这些 API。这些端点支持 API 验证、请求和响应转换、CORS、验证和授权以及请求限制。有关更多详细信息，请参阅Oracle API Gateway 概述。

导航到 OCI 菜单、开发人员服务、 API 网关，然后单击创建。

注：您需要一个虚拟云网络来部署此 Oracle API Gateway。创建 VCN（如果尚未创建）。

Oracle API Gateway

任务 5：设置 Oracle API Gateway 部署

成功创建 Oracle API Gateway 后，请导航到部署并创建新部署。

选择 Create from scratch 并将路径前缀设置为 "/"。这将是 URL 的基本路径。
在此处设置 TLS、CORS 等，或者单击下一步以转至下一步。
选择无验证，然后单击下一步。我们不需要为静态网站添加任何验证。

任务 6：添加路由

在 API 部署向导中，添加将扩展部署的基本路径的路由。

在路径字段中输入 /{req*} 。
从方法下拉列表中选择 GET 。
选择编辑添加了多个后端。
在选择器字段中选择路径。
单击 Define Backend（定义后端）。
创建默认规则，输入名称作为默认值，输入匹配类型作为任意，然后选中设为默认复选框，选择后端作为 HTTP ，然后在 URL 字段中输入 index.html 页的对象存储 URL，然后单击创建。
创建 js 文件规则，输入 Name 作为 js 规则，输入 Match Type 作为 Wildcard ，输入 *.js 作为通配符表达式，选择后端作为 HTTP 并输入对象存储桶 URL，然后在 URL 字段中输入 ${request.path[req]} 页，然后单击 Create 。您的 URL 将如下所示
```
https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}
```
单击创建。
根据需要为 css、html、txt 和 json 文件创建类似的规则。
单击下一步并完成 Oracle API Gateway 的创建，然后等待更新。

任务 7：测试

检索部署 URL 并将其输入到 Web 浏览器中，这应显示您的应用程序。

注:

如果您看不到已加载应用，请检查 VCN 中的安全列表或网络安全组是否允许流量传输到 Oracle API Gateway。

不要忘记在后端定义中添加应用程序具有的所有不同文件类型。

只有 AOT（提前）编译的应用程序和静态网站可以使用这种技术进行设置。确保您的应用程序使用本机 Javascript 代码进行编译。

确认

作者 — Mayank Kakani（OCI 云架构师）