Object Storage Service:静的 Web サイトホスティング

手順 1：静的 Web サイトホスティングの設定

デフォルトホームページとエラーページを設定し、基本的なアクセスルールを確立します。

1. [バケット] ページに移動し、目的のバケット名をクリックして、左側のナビゲーションペインで データ管理 > 静的ページ をクリックします。

2. [設定] をクリックし、以下のパラメーターを設定します。

   • [デフォルトのホームページ]：index.html に設定します。

   • [サブディレクトリ]：Web サイトの構造に基づいて、サブフォルダに個別のホームページを有効にするかどうかを選択します。

     • 無効 (デフォルト)：サブフォルダに個別のホームページを必要としない単純な Web サイトに適しています。このオプションでは、フォワードスラッシュ (/) で終わる URL パスは、ルートディレクトリのデフォルトホームページを返します。

     • 有効：各セクションが独自のホームページを持つ、/blog/ や /docs/ など、複数の独立したコンテンツセクションで構成される複雑な Web サイトに適しています。有効にした場合、ユーザーが存在しないファイルをリクエストした場合のシステムの応答を定義するために、[ファイル 404 ルール]も設定する必要があります：

       • リダイレクト (デフォルト)：ディレクトリ URL にリダイレクトします。リクエストされたファイルが存在しない場合、システムは対応するディレクトリにホームページがあるかどうかを確認します。存在する場合、システムは 302 リダイレクト応答を返し、ブラウザーのアドレスバーはディレクトリパスに更新されます。たとえば、.../subdir は .../subdir/ に変わります。

       • インデックス：ホームページのコンテンツを直接返します。リダイレクトと似ていますが、ホームページが見つかった場合、システムはそのコンテンツを 200 ステータスコードで返します。ブラウザーのアドレスバーは変更されません。

       • NoSuchKey：404 エラーを直接返します。これは最も厳格なルールです。リクエストされたファイルが存在しない場合、対応するディレクトリにホームページが存在するかどうかにかかわらず、システムは 404 エラーを返します。

         サブフォルダ 404 ルール

         サブフォルダホームページ機能が有効な場合、このルールは存在しないオブジェクトへのリクエストに対するシステムの応答を定義し、Web サイトのルートが正しく処理されるようにします。

         コアメカニズム：オブジェクトリクエストとディレクトリリクエスト

         このルールの動作は URL の構造、具体的にはフォワードスラッシュ (/) で終わるかどうかによって異なります：

         • オブジェクトリクエスト：URL が / で終わらない場合 (例：.../subdir)。システムはこれを subdir という名前のオブジェクトへのリクエストとして解釈します。

         • ディレクトリリクエスト：URL が / で終わる場合 (例：.../subdir/)。システムはこれを subdir ディレクトリ内のデフォルトホームページへのリクエストとして解釈します。

         サブフォルダ 404 ルールは、オブジェクトリクエストが失敗した (つまり、オブジェクトが存在しない) 場合にのみトリガーされます。

         ルールの動作

         次の表は、http://example.com/subdir のように存在しないオブジェクトに対してリクエストが行われた場合の各ルールの動作を説明しています。

         ルール	コアとなる動作	処理フロー	最終結果 (subdir/index.html が存在するかどうかによって異なります)
         リダイレクト (デフォルト)	ディレクトリ URL にリダイレクトします：システムは対応するディレクトリにホームページがあるか確認します。見つかった場合、302 リダイレクト応答を返します。	subdir オブジェクトが見つからず、ルールがトリガーされます。 システムは subdir/index.html が存在するかどうかを確認します。 存在する場合、302 Found 応答が Location ヘッダーを .../subdir/ に指定して返されます。存在しない場合、404 Not Found 応答が返されます。	存在する場合：ホームページのコンテンツが表示され、ブラウザーのアドレスバーは .../subdir/ に更新されます。 存在しない場合：404 エラーページが表示されます。
         インデックス	ホームページのコンテンツを直接返します：システムは対応するディレクトリにホームページがあるか確認します。見つかった場合、そのコンテンツを 200 ステータスコードで返します。	subdir オブジェクトが見つからず、ルールがトリガーされます。 システムは subdir/index.html が存在するかどうかを確認します。 存在する場合、ファイルコンテンツと 200 OK ステータスが返されます。存在しない場合、404 Not Found 応答が返されます。	存在する場合：ホームページのコンテンツが表示され、ブラウザーのアドレスバーは .../subdir のままです。 存在しない場合：404 エラーページが表示されます。
         NoSuchKey	404 エラーを直接返します：システムは追加のディレクトリやホームページのチェックを行いません。	subdir オブジェクトが見つからず、ルールがトリガーされます。 404 Not Found 応答が直ちに返されます。	存在するかどうかにかかわらず：常に 404 エラーページを返します。

   • [デフォルトの404ページ]：error.html に設定します。

   • [エラーページのステータスコード]：[404] を選択します。

3. 設定 をクリックします。

手順 2：Web サイトファイルのアップロード

準備した HTML ファイルをバケットにアップロードし、Web サイトのコンテンツを提供します。

1. サンプルファイル html.zip をダウンロードして展開するか、ご自身のプロジェクトファイルを使用します。

2. 左側のナビゲーションペインで、オブジェクト管理 > オブジェクト をクリックします。

3. サンプルファイルまたは既存のプロジェクトファイルをアップロードウィンドウにドラッグします。ファイルがリストに追加されたら、アップロード をクリックします。

   説明

   Web サイトのコンテンツを更新する際、同じ名前のオブジェクトをアップロードすると、既存のオブジェクトは直接上書きされます。古いオブジェクトを先に削除する必要はありません。上書きによってオブジェクト全体が置き換えられ、以前のコンテンツは保持されなくなります。バケットでバージョニングが有効になっている場合、上書きによって以前のバージョンは保持され、ロールバックに使用できます。バージョニングが有効でない場合、上書きは元に戻せません。

手順 3：バケット権限の設定

公開読み取り権限を設定して、Web サイトのコンテンツをインターネットユーザーがアクセスできるようにします。

1. OSS バケットの作成時、デフォルトでパブリックアクセスブロック機能が有効になっています。この機能が有効になっていると、バケットのアクセス制御リスト (ACL) を公開読み取りまたは公開読み書きに設定できません。まずこの機能を無効にする必要があります。

   1. 左側のナビゲーションペインで、権限管理 > 公開アクセス禁止をクリックします。

   2. 公開アクセス禁止 トグルをクリックします。表示されたダイアログボックスに アクセス禁止を無効にする と入力し、OK をクリックします。

2. バケットのアクセス権限を公開読み取りに設定します。

   1. [アクセス制御リスト] タブに移動し、[設定] をクリックします。

   2. バケット ACL を [パブリック読み取り] に設定します。表示されるダイアログボックスで、変更する をクリックします。

   3. [保存] をクリックします。

手順 4：Web サイト設定の確認

Web サイトをテストして、静的 Web サイトホスティング機能が正しく動作していることを確認します。

• ホームページアクセスの確認：ブラウザーで、カスタムドメイン名 (例：http://example.com) にアクセスし、結果を確認します。

  ページに OSS の静的 Web サイトホスティングのデフォルトホームページが表示され、タイトルが「Welcome to OSS」、サブタイトルが「This is a static homepage」であり、下部に 3 つのボタン (Product Details、Product Console、Product Documentation) があれば、静的 Web サイトホスティングの設定は正常に機能しています。

• 404 ページの確認：ブラウザーで、存在しないファイル (例：http://example.com/missing-object) にアクセスしてみます。

  ページに「Welcome to OSS」というタイトルと「This is a 404 page」というメッセージが表示されれば、404 エラーページは正しく設定されています。

手順 1：SPA ホスティングの設定

クライアントサイドルーティングが正しく機能するように、ホスティングパラメーターを設定します。

1. [バケット] ページに移動し、目的のバケット名をクリックして、左側のナビゲーションペインでデータ管理 > 静的ページをクリックします。

2. [設定] をクリックして、次のパラメーターを設定します。

   • [デフォルトのホームページ]：index.html に設定します。

   • [サブディレクトリ]：[無効]を選択します。この設定では、静的 Web サイトのドメインへのリクエスト、またはそのドメイン下のフォワードスラッシュ (/) で終わる任意の URL へのリクエストは、ルートディレクトリのデフォルトホームページを返します。

   • [デフォルトの404ページ]：index.html に設定します (重要な設定：すべてのルートをアプリケーションのエントリポイントにリダイレクトします)。

   • [エラーページのステータスコード]：[200] を選択します (ルート遷移時に正しいステータスコードが返されるようにします)。

3. 設定をクリックします。

手順 2：アプリケーションファイルのアップロード

SPA ファイルをバケットにアップロードして、デプロイを完了します。

1. サンプルアプリケーション demo.zip をダウンロードして展開するか、ご自身のアプリケーションファイルを使用します。

2. 左側のナビゲーションペインで、オブジェクト管理 > オブジェクト をクリックします。

3. demo ディレクトリのすべてのファイル、またはご自身のアプリケーションファイルをアップロードウィンドウにドラッグします。すべてのファイルがリストに追加されたら、アップロード をクリックします。

手順 3：バケット権限の設定

SPA がユーザーにアクセスできるように、パブリックアクセス権限を設定します。

1. バケットのパブリックアクセスブロックを無効にします。

   1. 左側のナビゲーションペインで、権限管理 > 公開アクセス禁止 をクリックします。

   2. 公開アクセス禁止 トグルをクリックします。表示されるダイアログボックスで、アクセス禁止を無効にする と入力し、OK をクリックします。

2. バケットのアクセス権限を公開読み取りに設定します。

   1. [アクセス制御リスト] タブに移動し、[設定] をクリックします。

   2. バケット ACL を [パブリック読み取り] に設定します。表示されるダイアログボックスで、変更する をクリックします。

   3. [保存] をクリックします。

手順 4：アプリケーションデプロイの確認

Web サイトをテストして、SPA がルート遷移を正しく処理することを確認します。

• ホームページアクセスの確認：ブラウザーで、カスタムドメイン名 (例：http://example.com) にアクセスして SPA を表示します。結果は次の図のようになります。

  

• 404 の動作の確認：ブラウザーで、存在しないファイル (例：http://example.com/missing-object) にアクセスしてみます。リクエストはアプリケーションのエントリポイントにリダイレクトされ、200 OK ステータスコードが返されます。

ベストプラクティス

• 安全な転送：HTTPS アクセスの有効化

  現代のブラウザーは HTTP の Web サイトに「安全ではありません」という警告を表示し、検索エンジンは HTTPS のサイトをより高くランク付けします。OSS への HTTPS アクセスのガイドに従って、カスタムドメイン名への HTTPS アクセスを強制します。HTTPS は TLS/SSL を使用して転送中のデータを暗号化し、データの盗難や改ざんを防ぎます。

• パフォーマンスの最適化：CDN アクセラレーションの設定

  静的 Web サイトが全世界のユーザーにサービスを提供したり、同時実行数の多いトラフィックを処理したりする場合は、CDN アクセラレーションを設定して、世界中のエッジノードにコンテンツをキャッシュします。これにより、アクセス速度が向上し、OSS のトラフィックコストが削減されます。

  CDN アクセラレーションが有効になった後、ページはエッジノードにキャッシュされたコンテンツから提供されます。ファイルを上書きした後も、キャッシュの有効期限が切れるまでリクエストは以前のバージョンを返すことがあります。したがって、Web サイトのコンテンツを更新した後は、更新されたファイルまたはディレクトリの CDN キャッシュを更新し、更新が完了した後にのみ Web サイトを確認してください。これにより、古いページがリリース失敗と誤認されるのを防ぎます。

• オリジン間リソース共有 (CORS)：CORS ルールの設定

  SPA はバックエンド API を呼び出したり、サードパーティのリソースにアクセスしたりすることが多く、これはブラウザーの同一オリジンポリシーによって制限される可能性があります。CORS ルールを設定して、許可されたオリジン、メソッド、ヘッダーを指定し、アプリケーションが必要な API や外部リソースにアクセスできるようにします。

• バージョン管理：リリースとロールバックの実装

  OSS のバージョニングを有効にし、Jenkins などの自動化ツールと統合して、迅速なリリースと緊急ロールバックのための CI/CD ワークフローを作成します。

リスクの軽減

• 帯域幅盗用防止：ホットリンク保護の設定

  他の Web サイトが静的リソースに直接リンクすると、トラフィックコストとサーバー負荷が増加します。Referer に基づくホットリンク保護を設定して、許可されたドメインのホワイトリストを作成し、不正な帯域幅の使用を防ぎます。

• アクセス監視：アクセスログの有効化

  リアルタイムログクエリを有効にして、すべてのアクセスリクエストを記録します。これにより、異常なアクセスパターンを特定し、ユーザーの行動を分析し、Web サイトのパフォーマンスを最適化するのに役立ちます。

SPA のページ更新における 404 エラー

シングルページアプリケーションでは、すべてのルートがクライアントサイドの JavaScript によって処理されます。ルート以外のルートに直接アクセスしたり、更新したりすると、サーバーは対応する物理ファイルを見つけることができません。これを解決するには、[デフォルトの404ページ]を index.html に、[エラーページのステータスコード]を 200 に設定してください。この設定により、「見つからない」すべてのパスがアプリケーションのエントリポイントに渡され、クライアントサイドルーターがそれらを正しく処理できるようになります。

静的 Web サイトホスティングの無効化

1. [バケット] ページに移動し、目的のバケット名をクリックして、左側のナビゲーションペインで データ管理 > 静的ページ をクリックします。

2. [設定] をクリックし、デフォルトのホームページ と デフォルトの404ページ の設定をクリアしてから、設定 をクリックして静的 Web サイトホスティング機能を無効にします。

動的コンテンツのサポート

静的 Web サイトホスティングは、HTML、CSS、JavaScript などの静的ファイルのみをサポートします。PHP、Python、Java などのサーバーサイド言語はサポートされていません。動的な機能については、フロントエンドフレームワークを使用したクライアントサイドレンダリングを使用するか、Function Compute のようなサーバーレスサービスを介してバックエンド API を呼び出してください。