MSE クラウドネイティブゲートウェイと Alibaba Cloud OSS を使用した静的 Web サイトホスティングの実装 - Microservices Engine

静的 Web サイトとは、静的コンテンツのみを含む Web ページの集合です。静的コンテンツには、HTML ファイル、CSS ファイル、JavaScript ファイルなど、クライアントで実行できるスクリプトが含まれます。静的 Web サイトに必要なファイルをオブジェクトストレージサービス（OSS）バケットに保存し、マイクロサービスエンジン（MSE）クラウドネイティブゲートウェイをプロキシとして使用して、OSS バケットに保存されている静的 Web サイトコンテンツを管理できます。このトピックでは、MSE クラウドネイティブゲートウェイと Alibaba Cloud OSS を使用して静的 Web サイトホスティングを実装する方法について説明します。

前提条件

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

背景情報

ほとんどの場合、Web アプリケーションは外部アクセス用の Web ページを提供します。ページアクセス中に、最初に静的 Web ページがリクエストされます。次に、JavaScript スクリプトに基づいてバックエンドサービスへの呼び出しが開始されます。最後に、レスポンス結果に基づいて Web ページのコンテンツが動的に変更されます。フロントエンドとバックエンドの分離という設計コンセプトでは、静的ファイルはバックエンドサービスから分離されています。このようにして、静的ページとバックエンドサービスを個別に維持することができ、開発効率が大幅に向上します。

フロントエンドとバックエンドの分離アーキテクチャでは、ストレージサービスを使用して静的ページを保存し、別の場所にバックエンドサービスをデプロイする必要があります。その後、レイヤー 7 ゲートウェイを使用して、静的ページまたはバックエンドサービスへのリクエストをルーティングできます。

サンプルシナリオ

このシナリオでは、Web アプリケーションが利用可能です。外部アクセス用のドメイン名は example.com で、静的ページは OSS バケットに保存されています。MSE クラウドネイティブゲートウェイは、静的ページが保存されている OSS バケットへのリクエストをルーティングしたり、バックエンドサービスへのリクエストをルーティングしたりするためのプロキシとして使用されます。

MSE クラウドネイティブゲートウェイは、静的ページへのすべてのリクエストを OSS バケットにルーティングします。たとえば、example.com または example.com/index.html にアクセスすると、ホームページ index.html が返されます。
クラウドネイティブゲートウェイは、他のサービスへのリクエストを宛先のバックエンドサービスにルーティングします。たとえば、example.com/app にアクセスすると、バックエンドサービスのサービス処理結果が返されます。

手順 1：OSS バケットを作成し、静的ページを OSS バケットにアップロードする

[パブリック読み取り] バケットを作成して、静的ページを保存します。

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

[バケットの作成] パネルで、次の表に示すパラメータを設定し、その他のパラメータについてはデフォルト設定を保持し、[OK] をクリックします。

パラメータ	説明
バケット名	バケットの名前。この例では、バケット名は `static-demo-0` です。
ストレージクラス	[標準] を選択します。
ACL	[パブリック読み取り] をクリックします。[パブリック読み取りを選択してもよろしいですか？] というメッセージが表示されます。このメッセージで、[続行] をクリックします。

[バケット] ページで、作成したバケットの名前をクリックします。[オブジェクト] ペインで、[オブジェクトのアップロード] をクリックして、次の静的 Web ページ index.html をアップロードします。アップロード操作では、[オブジェクト ACL] に [バケットから継承] を選択します。
```
<html>
   <head>
       <title>Hello OSS!</title>
       <meta charset="utf-8">
   </head>
   <body>
       <P>Configure static website hosting for Alibaba Cloud OSS.</p> // Alibaba Cloud OSS の静的 Web サイト ホスティングを設定します。
       <P>This is the index page.</p> // これはインデックス ページです。
   </body>
 </html>
```
[オブジェクトのアップロード] をクリックします。
[タスクリスト] パネルでファイルのアップロードの進捗状況を確認できます。ファイルがアップロードされると、アップロードされたファイルの名前、サイズ、およびストレージクラスを宛先ディレクトリに表示できます。

手順 2（オプション）：デフォルトのホームページを設定する

サービスドメイン名 example.com のルートパス / にアクセスしたときに静的ページ index.html を返す場合は、宛先バケットで静的ページをデフォルトのホームページとして設定します。设置首页

存在しない静的ファイルにアクセスしたときにデフォルトページ 404 を返す場合は、404.html ページをバケットにアップロードします。また、静的ページで 404 ページを設定する必要もあります。

<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>

设置首页

デフォルトホームページの設定方法の詳細については、「examplebucket バケットの静的 Web サイトホスティングを設定する」をご参照ください。

手順 3：OSS バケットのデフォルトドメイン名を表示する

デフォルトでは、Alibaba Cloud OSS は、作成したバケットのドメイン名を作成します。ドメイン名は、[概要] ページの [ポート] セクションで確認できます。詳細については、「OSS の内部エンドポイントを使用して ECS インスタンスから OSS リソースにアクセスする」をご参照ください。

手順 4：MSE クラウドネイティブゲートウェイで OSS バケットのサービスを作成する

MSE クラウドネイティブゲートウェイの場合、静的ページを保存する OSS バケットもサービスと見なされます。したがって、MSE クラウドネイティブゲートウェイでドメインネームシステム（DNS）サービスディスカバリに基づいてサービスを作成する必要があります。

MSE コンソールにログオンします。
左側のナビゲーションペインで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの名前をクリックします。
左側のナビゲーションペインで、Routes をクリックします。表示されるページで、[サービス] タブをクリックします。

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

パラメータ	説明
Service Source	DNS Domain Name を選択します。
サービス名	サービスの名前を入力します。このパラメータは、サービスを一意に識別します。この例では、サービス名は `static` です。
サービスポート	80 と入力します。
ドメイン名	バックエンドサービスのドメイン名を入力します。この例では、`static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com` が使用されています。これは、手順 3 の OSS バケットの内部ドメイン名です。
TLS モード	[無効] を選択します。

手順 5：クラウドネイティブゲートウェイで静的ページのルートを作成する

MSE コンソールにログオンします。
左側のナビゲーションペインで、Cloud-Native Gateway > ゲートウェイリスト を選択します。[ゲートウェイ] ページで、ゲートウェイの名前をクリックします。
ゲートウェイリスト ページで、ゲートウェイの名前をクリックします。
左側のナビゲーションペインで、Routes をクリックし、[ルート] タブをクリックします。
[ルート] タブで、[ルートの追加] をクリックします。[ルートの追加] ページで、一致ルールが [プレフィックス]、パスが /、宛先サービスが static であるルートを作成します。詳細については、「ルートを作成する」をご参照ください。
[ルート] タブで、作成したルートの名前をクリックします。ルート詳細ページで、[ポリシー] タブをクリックします。[ポリシー] タブの左側のナビゲーションペインで、[書き換え] をクリックして、ルートの書き換えポリシーを追加します。[宛先ホスト] フィールドに OSS バケットの内部ドメイン名 static-demo-0.oss-cn-hangzhou-internal.aliyuncs.com を入力し、[保存] をクリックします。[書き換え] が有効になっていると、ゲートウェイはバックエンドサービスにリクエストを転送するときに、設定された書き換えポリシーに基づいてリクエストのパスとホストドメインを書き換えます。詳細については、「書き換えポリシーを設定する」をご参照ください。
[ポリシー] タブの左側のナビゲーションペインで、[ヘッダーの編集] をクリックします。OSS レスポンスから [content-disposition] ヘッダーを削除するポリシーを追加し、ポリシーを有効にします。ゲートウェイは、リクエストまたはレスポンスのヘッダーを管理します。詳細については、「ヘッダー設定ポリシーを設定する」をご参照ください。

手順 6：アクセステストを実行する

この例では、サービスドメイン名は example.com です。Web ブラウザのアドレスバーに example.com、example.com/index.html、example.com/test をそれぞれ入力し、返される静的ページを確認します。

Web ブラウザのアドレスバーに example.com と入力すると、手順 2 で index.html ページがデフォルトホームページとして設定されているため、index.html ページにリダイレクトされます。
index.html ページに直接アクセスすることもできます。Web ブラウザのアドレスバーに example.com/index.html と入力すると、index.html ページにリダイレクトされます。
test という名前の、存在しないページの場合、Web ブラウザのアドレスバーに example.com/test と入力すると、OSS バケットにアップロードされた 404.html ページにリダイレクトされます。

前提条件

背景情報

サンプル シナリオ