OSS 静的 Web サイトホスティング用の MSE クラウドネイティブゲートウェイの設定 - MSE

フロントエンドとバックエンドの分離アーキテクチャでは、静的アセット (HTML、CSS、JavaScript) はオブジェクトストレージに格納され、バックエンドサービスは独立して実行されます。アプリケーションがすでに Microservices Engine (MSE) クラウドネイティブゲートウェイを使用して API トラフィックをルーティングしている場合、同じゲートウェイに Object Storage Service (OSS) をバックエンドサービスとして追加できます。これにより、静的コンテンツとバックエンド API の両方に単一のエントリポイントが提供され、ゲートウェイレベルの URL 書き換え、ヘッダー操作、およびルーティングポリシーがすべてのトラフィックに適用されます。

このチュートリアルでは、静的ファイルを OSS バケットに保存し、MSE クラウドネイティブゲートウェイを設定してそれらを提供する手順を説明します。完了後、ゲートウェイは example.com/index.html のようなリクエストを OSS 内のファイルにルーティングし、example.com/app のようなリクエストをバックエンドサービスにルーティングします。

適用シーン

MSE クラウドネイティブゲートウェイを使用して OSS から静的コンテンツを提供するのは、次の場合です。

アプリケーションがすでに MSE クラウドネイティブゲートウェイをバックエンド API ルーティングに使用しており、静的アセットと API の両方に単一のエントリポイントが必要な場合。
静的コンテンツに対して URL 書き換え、ヘッダー操作、またはその他のゲートウェイレベルのポリシーが必要な場合。

バックエンドサービスのないスタンドアロンの静的 Web サイトの場合、OSS 静的 Web サイトホスティングはよりシンプルな代替手段です。

仕組み

次の図は、リクエストフローを示しています。

Client request
     |
     v
MSE cloud-native gateway
     |
     |-- /index.html, /style.css, ...  -->  OSS bucket (static files)
     |
     +-- /app, /api/...               -->  Backend services

ゲートウェイは、受信する各リクエストをそのルートルールと照合します。静的ファイルのリクエストは OSS バケットの内部エンドポイントに送信され、OSS が正しいバケットを解決できるようにホストヘッダーが書き換えられます。content-disposition レスポンスヘッダーは削除され、ブラウザがファイルをダウンロードする代わりにインラインでレンダリングするようにします。

前提条件

開始する前に、以下があることを確認してください。

MSE クラウドネイティブゲートウェイ。詳細については、「MSE クラウドネイティブゲートウェイの作成」をご参照ください。

ステップ 1: OSS バケットの作成と静的ページのアップロード

公開読み取り OSS バケットを作成し、サンプル HTML ページをアップロードします。

OSS コンソールにログインします。
左側のナビゲーションウィンドウで、[バケット] をクリックし、次に [バケットの作成] をクリックします。

[バケットの作成] パネルで、以下のパラメーターを設定し、その他はすべてデフォルト値のままにします。次に、[OK] をクリックします。

公開読み取り ACL を使用すると、誰でもこのバケット内のオブジェクトを読み取ることができます。本番ワークロードの場合、より制限の厳しい ACL と署名付き URL がセキュリティ要件に適しているかどうかを評価してください。

パラメーター	値
バケット名	バケット名を入力します。このチュートリアルでは、`static-demo-0` を使用します。
ストレージクラス	[標準] を選択します。
ACL	[パブリック読み取り] をクリックします。「パブリック読み取りを選択してもよろしいですか？」という確認メッセージが表示されたら、[続行] をクリックします。

[バケット] ページで、作成したバケットの名前をクリックします。[オブジェクト] ペインで、[オブジェクトのアップロード] をクリックします。

[オブジェクト ACL] を [バケットから継承] に設定し、次の index.html ファイルをアップロードします。

   <html>
      <head>
          <title>Hello OSS!</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>Configure static website hosting for Alibaba Cloud OSS.</p>
          <p>This is the index page.</p>
      </body>
   </html>

[オブジェクトのアップロード] をクリックします。アップロードが完了すると、ファイル名、サイズ、ストレージクラスが送信先ディレクトリに表示されます。

ステップ 2 (オプション): デフォルトホームページと 404 エラーページの設定

デフォルトホームページを設定すると、/ へのリクエストが index.html を返すようになります。一致しないパスに対してカスタム 404 ページを設定することもできます。

デフォルトホームページの設定

OSS コンソールで、バケット設定を開き、index.html をデフォルトホームページとして設定します。

カスタム 404 ページの設定

404.html ファイルをバケットにアップロードします。

   <html>
      <head>
          <title>The page you visited does not exist</title>
          <meta charset="utf-8">
      </head>
      <body>
          <p>The page you visited does not exist.</p>
          <p>You can try to visit the homepage.</p>
      </body>
   </html>

バケットの静的 Web サイトホスティング設定で、404.html をエラーページとして設定します。

詳細については、「静的 Web サイトホスティングの設定」をご参照ください。

ステップ 3: OSS バケットの内部エンドポイントの取得

すべての OSS バケットにはデフォルトドメイン名があります。次のステップでゲートウェイサービスを設定するには、内部エンドポイントが必要です。

OSS コンソールで、バケットの [概要] ページを開き、[ポート] セクションで内部エンドポイントを確認します。このエンドポイントは、<bucket-name>.oss-<region>-internal.aliyuncs.com の形式に従います。

詳細については、「内部エンドポイントを介した ECS インスタンスからの OSS アクセス」をご参照ください。

ステップ 4: OSS バケットをゲートウェイサービスとして追加

MSE クラウドネイティブゲートウェイは、各 OSS バケットを DNS 検出サービスとして扱います。バケットの内部エンドポイントをゲートウェイ上のサービスとして登録します。

MSE コンソールにログインします。
左側のナビゲーションウィンドウで、[クラウドネイティブゲートウェイ] ＞ [ゲートウェイ] を選択します。自分のゲートウェイの名前をクリックします。
左側のナビゲーションウィンドウで、[ルート] をクリックします。表示されたページで、[サービス] タブをクリックします。

「[サービスの追加]」をクリックし、[サービスの追加] パネルで以下のパラメーターを設定します。その後、「[OK]」をクリックします。

パラメーター	値
サービスソース	DNS ドメイン名を選択します。
サービス名	サービスの名前を入力します。このチュートリアルでは `static` を使用します。
サービスポート	`80` を入力します。
[ドメイン]	ステップ 3 の内部エンドポイントを入力します。例: `static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com`。
TLS モード	[無効] を選択します。

ステップ 5: ルートの作成とポリシーの設定

静的ファイルのリクエストを OSS サービスに転送するルートを作成し、書き換えポリシーとヘッダーポリシーを追加します。

ルートの作成

MSE コンソールにログインします。
左側のナビゲーションウィンドウで、[クラウドネイティブゲートウェイ] > [ゲートウェイ] を選択します。ゲートウェイ名をクリックします。
左側のナビゲーションウィンドウで、[ルート] をクリックし、次に [ルート] タブをクリックします。
「[ルートの追加]」をクリックします。一致ルールを「[プレフィックス]」に設定し、パスを / に、送信先サービスを static に設定します。詳細については、「ルートの作成」をご参照ください。

書き換えポリシーの追加

書き換えポリシーは、ゲートウェイがリクエストを転送する際に OSS が正しいバケットを解決できるように、ホストヘッダーを書き換えます。

[ルート] タブで、作成したルートの名前をクリックします。[ポリシー] タブをクリックします。
[Policies] タブの左側のナビゲーションウィンドウで、[Rewrite] をクリックします。 OSS バケットの内部エンドポイント (たとえば、static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com) を [Destination Host] フィールドに入力し、[Save] をクリックします。詳細については、「書き換えポリシーを設定する」をご参照ください。

content-disposition レスポンスヘッダーの削除

デフォルトでは、OSS はブラウザがファイルをダウンロードする代わりにレンダリングするように、content-disposition ヘッダーを設定します。静的ページがブラウザで正しく表示されるように、このヘッダーを削除します。

「ポリシー」タブの左側のナビゲーションウィンドウで、[ヘッダーの編集] をクリックします。OSS の応答から [content-disposition] ヘッダーを削除するポリシーを追加し、そのポリシーを有効にします。詳細については、「ヘッダー設定ポリシーの設定」をご参照ください。

結果の検証

ブラウザで次の URL にアクセスして、設定をテストします。example.com をご利用のサービスドメイン名に置き換えてください。

URL	期待される結果
`example.com`	`index.html` (ステップ 2 で設定されたデフォルトホームページ) を返します。
`example.com/index.html`	`index.html` を直接返します。
`example.com/test`	`404.html` (ステップ 2 で設定されたカスタムエラーページ) を返します。

本番環境での考慮事項

基本的な機能を確認したら、本番トラフィックを提供する前に次の点を考慮してください。

HTTPS: MSE クラウドネイティブゲートウェイで SSL 証明書を設定し、HTTPS 経由で静的コンテンツを提供します。
キャッシュ: ゲートウェイの前に Alibaba Cloud CDN を追加するか、ゲートウェイでキャッシュポリシーを設定して、レイテンシーと OSS アクセスコストを削減します。
アクセス制御: バケット ACL を厳格化し、公開読み取りアクセスではなく、署名付き URL またはゲートウェイレベルの認証を使用します。