ノート:

静的Webサイト・ホスティングのためのOCI Object StorageおよびOracle API Gatewayの設定

イントロダクション

Oracle Cloud Infrastructure (OCI)でホストするWebアプリケーションがあり、静的Webサイト・ホスティングを設定する場合は、このチュートリアルでは、OCI Object StorageおよびOracle API Gatewayを使用して、リッチなAhead-of-Time (AOT)コンパイル済JavaScript Webアプリケーションの静的ホスティングの構成について説明します。同じアプローチを、よりシンプルなアプリケーションや静的Webページのいずれの場合でも、HTTPを介して静的ファイルにサービスを提供したいシナリオにも適用でき、OCIプラットフォーム上のユーザーに信頼性の高いオンライン・エクスペリエンスを低コストで提供できます。

目的

OCI Object StorageとOracle API Gatewayを活用して静的Webサイトをホストし、Oracle Cloud InfrastructureでWebコンテンツを効率的にデプロイおよび管理する方法を理解します。

前提条件

タスク1: Oracleオブジェクト・ストレージ・バケットの作成

まず、OCI Object Storageで新しいバケットを作成します。このバケットは、静的Webサイトのホストに使用されます。

オブジェクト・ストレージ・バケット

タスク2: バケットへの配布ファイルのアップロード

前のタスクで作成したバケットにアプリケーション配布ファイルをアップロードします。アプリケーション配布ファイルは通常、アプリケーション・ディレクトリの/distフォルダにあり、Webpackビルドの出力です。

Distファイル

タスク3: 事前認証済リクエストの作成

Oracle API Gatewayがインターネット経由で配布ファイルを処理できるようにするには、配布ファイルが格納されているオブジェクト・ストレージ・バケットに対して事前認証済リクエストPARを作成する必要があります。

これは、APIゲートウェイの構成時に使用します。

タスク4: Oracle API Gatewayの作成

Oracle API Gatewayサービスでは、ネットワーク内からアクセス可能なプライベート・エンドポイントとともに、インターネット・トラフィックを受け入れる場合にパブリックIPアドレスで公開できるAPIを公開できます。エンドポイントは、API検証、リクエストとレスポンスの変換、CORS、認証と認可およびリクエスト制限をサポートします。詳細は、Oracle API Gatewayの概要を参照してください。

  1. 「OCIメニュー」、「開発者サービス」、「APIゲートウェイ」にナビゲートし、「作成」をクリックします。

ノート:このOracle API GatewayをデプロイするにはVirtual Cloud Networkが必要で、まだ作成されていない場合はVCNを作成します。

Oracle API Gateway

タスク5: Oracle API Gatewayデプロイメントの設定

Oracle API Gatewayが正常に作成されたら、「デプロイメント」に移動して新しいデプロイメントを作成します。

  1. 「最初から作成」を選択し、パス接頭辞を「/」に設定します。これがURLのベース・パスになります。

    ゲートウェイ・デプロイメント

  2. ここにTLS、CORSなどを設定するか、「次」をクリックして次のステップに移動します。

  3. 「認証なし」を選択して、「次へ」をクリックします。静的Webサイトに認証を追加する必要はありません。

    デプロイメント認証

タスク6: ルートの追加

APIデプロイメント・ウィザードで、デプロイメントのベース・パスを拡張するルートを追加します。

  1. 「パス」フィールドに/{req*}と入力します。

    デプロイメント・パス

  2. 「メソッド」ドロップダウン・リストから「GET」を選択します。

  3. 「追加した複数バックエンドの編集」を選択します。

    デプロイメントの複数バックエンド

  4. 「セレクタ」フィールドで「パス」を選択します。

    デプロイメント・パス

  5. 「バックエンドの定義」をクリックします。

  6. デフォルト・ルールを作成し、「名前」をデフォルトとして、「一致タイプ」を「いずれか」として入力し、「デフォルトにする」チェック・ボックスを選択し、「HTTP」としてバックエンドを選択し、「URL」フィールドにindex.htmlページのオブジェクト・ストレージURLを入力して、「作成」をクリックします。

    バックエンド定義

  7. jsファイル・ルールを作成し、jsルールとして「名前」、ワイルドカード式として「一致タイプ」、「ワイルドカード」として「*.js」を入力し、バックエンドを「HTTP」として選択し、オブジェクト・ストレージ・バケットURLの後に「{request.path[request]}」ページを「URL」フィールドに入力して「作成」をクリックします。URLは、次のようになります。

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. 「作成」をクリックします。

    バックエンド定義

  9. 必要に応じて、css、html、txt、jsonファイルに対して同様のルールを作成します。

    すべてを定義するバックエンド

  10. 「次へ」をクリックしてOracle API Gatewayの作成を完了し、更新されるまで待機します。

タスク7: テスト

デプロイメントURLを取得し、Webブラウザに入力すると、アプリケーションが表示されます。

ノート:

  1. アプリケーションがロードされない場合は、Oracle API Gatewayがオブジェクト・ストレージ・バケットにアクセスするための適切なポリシーを追加したかどうかを確認します。

  2. アプリケーションがバックエンド定義に持つ様々なファイル・タイプをすべて追加することを忘れないでください。

  3. この手法を使用して設定できるのは、AOT (Ahead of Time)コンパイル済アプリケーションおよび静的Webサイトのみです。アプリケーションがネイティブJavascriptコードでコンパイルされていることを確認します。

承認

著者 - Mayank Kakani(OCI Cloud Architect)

その他の学習リソース

docs.oracle.com/learnの他のラボをご覧いただくか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerになります。

製品ドキュメントは、Oracle Help Centerを参照してください。