注意：

此教程需要访问 Oracle Cloud。要注册免费账户，请参阅开始使用 Oracle Cloud Infrastructure Free Tier 。
它使用 Oracle Cloud Infrastructure 身份证明、租户和区间示例值。完成实验室时，请将这些值替换为特定于云环境的那些值。

为静态网站托管设置 OCI 对象存储和 Oracle API Gateway

简介

如果您希望在 Oracle Cloud Infrastructure (OCI) 上托管 Web 应用程序，并希望设置静态网站托管，在本教程中，我们将介绍如何使用 OCI 对象存储和 Oracle API Gateway 配置由丰富的时间前 (AOT) 编译的 JavaScript Web 应用程序的静态托管。无论是使用更简单的应用程序还是静态网页，还是使用 OCI 平台为用户提供可靠的在线体验，您都可以使用相同的方法来通过 HTTP 提供静态文件。

目标

了解如何利用 OCI 对象存储和 Oracle API Gateway 来托管静态网站，以便在 Oracle Cloud Infrastructure 上高效部署和管理 Web 内容。

先决条件

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

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

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

对象存储桶

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

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

分发文件

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

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

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

任务 4：创建 Oracle API Gateway

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

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

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

Oracle API Gateway

任务 5：设置 Oracle API Gateway 部署

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

选择从头开始创建并将路径前缀设置为 "/"。这将是 URL 的基本路径。
在此处设置 TLS、CORS 等，或单击下一步移到下一步。
选择无验证并单击下一步。我们不需要为静态网站添加任何验证。

任务 6：添加路由

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

在路径字段中输入 /{req*} 。
从方法下拉列表中选择 GET 。
选择编辑添加的多个后端。
在选择器字段中选择路径。
单击定义后端。
创建默认规则，输入名称作为默认值，输入匹配类型作为任意，选中设为默认值复选框，选择后端作为 HTTP ，然后在 Url 字段中输入 index.html 页的对象存储 URL，然后单击创建。
创建 js 文件规则，在 Url 字段中输入 Name 作为 js 规则，在通配符表达式中输入 Match Type 作为 Wildcard ，在通配符表达式输入 *.js ，然后在 Url 字段中输入后跟 {request.path[request]} 页的对象存储桶 URL，然后单击 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 浏览器中，这应显示您的应用程序。

注:

如果您未看到加载了应用程序，请检查是否为 Oracle API Gateway 添加了正确的策略来访问对象存储桶。

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

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

确认

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