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

はじめに

If you have a web application you want to host on Oracle Cloud Infrastructure (OCI) and want to set up static website hosting, in this tutorial, we walk through configuring static hosting of a rich Ahead-of-Time (AOT) compiled JavaScript web application using OCI Object Storage and Oracle API Gateway. よりシンプルなアプリケーションや静的Webページのために、OCIプラットフォーム上のユーザーに信頼性の高いオンライン・エクスペリエンスを提供する場合でも、HTTPを介して静的ファイルを提供する場合でも、同じアプローチを適用できます。

目的

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

前提条件

タスク1: Oracle Object Storageバケットの作成

まず、OCIオブジェクト・ストレージに新しいバケットを作成します。このバケットは、静的Webサイトのホストに使用されます。

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

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

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

配分ファイル

ヒント: oci-cliを使用してファイルをアップロードする場合は、--content-type autoパラメータを指定して、Content-Typeが正しく設定されるようにしてください。

タスク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. 「Create from scratch」を選択し、「Path prefix」を「/」に設定します。これはURLのベース・パスになります。

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

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

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

    デプロイメント認証

タスク6: ルートの追加

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

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

    デプロイメント・パス

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

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

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

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

    デプロイメント・パス

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

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

    バックエンド定義

  7. jsファイル・ルールを作成し、「名前」にjsルール、「一致タイプ」に「ワイルドカード」、「*.js」にワイルドカード式を入力し、「HTTP」としてバックエンドを選択し、オブジェクト・ストレージ・バケットURLを入力して、「URL」フィールドに${request.path[req]}ページを続けて「作成」をクリックします。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. アプリケーションがロードされない場合は、VCNのセキュリティ・リストまたはネットワーク・セキュリティ・グループがOracle API Gatewayへのトラフィックを許可しているかどうかを確認します。

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

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

確認

作成者 - Mayank Kakani (OCI Cloud Architect)

その他の学習リソース

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

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