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 がスラッシュ (/) で終わるかどうかに依存します。

         • オブジェクトリクエスト：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. サンプルファイルまたは既存のプロジェクトファイルをアップロードウィンドウにドラッグします。ファイルがリストに追加されたら、[アップロード] をクリックします。

ステップ 3：バケット権限の設定

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

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

   1. 左側メニューで、権限管理 > 公開アクセス禁止 をクリックします。

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

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

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

   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 ホスティングの設定

ホスティングパラメータを設定して、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. [アクセス制御リスト] タブに移動し、[Set] をクリックします。

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

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

ステップ 4：アプリケーションデプロイの検証

Web サイトをテストして、SPA が正常にデプロイされ、ルート遷移を処理できることを確認します。

• ホームページアクセスの検証：ブラウザで、カスタムドメイン名 (例：http://example.com) にアクセスして SPA を開きます。結果は次の図のとおりです。

  

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

ベストプラクティス

• セキュアなトランスポート：HTTPS アクセスの有効化

  最新のブラウザは HTTP Web サイトに対して「安全でない」という警告を表示し、検索エンジンは HTTPS サイトをより高く評価します。HTTPS経由でのOSSへのアクセスガイドに従って、カスタムドメイン名に対して HTTPS アクセスを強制する必要があります。HTTPS プロトコルは TLS/SSL を使用して転送中のデータを暗号化し、データの盗難や改ざんを防ぎ、Web サイトのセキュリティとユーザーの信頼を向上させます。

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

  静的 Web サイトがグローバルなユーザーにサービスを提供する場合、または高同時実行性のトラフィックを受信する場合は、CDN アクセラレーションを設定できます。これにより、コンテンツが世界中のエッジノードにキャッシュされ、アクセス速度が大幅に向上し、OSS トラフィックコストが削減されます。

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

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

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

  本番環境では、新しいバージョンを迅速にリリースし、緊急ロールバックを実行する機能が必要です。OSS のバージョニング機能を有効にし、Jenkins などの自動化ツールと統合して、完全な CI/CD ワークフローを作成します。これにより、リリース効率とシステムの安定性が向上します。

リスク軽減

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

  他の Web サイトが静的リソースに直接リンクすると、追加のトラフィックコストとサーバー負荷が発生する可能性があります。Referer ベースのホットリンク防止を設定することで、許可されたドメインのホワイトリストを作成できます。これにより、未承認の Web サイトが帯域幅を消費するのを効果的に防ぎ、コストを管理できます。

• アクセスモニタリング：アクセスログの有効化

  本番環境では、セキュリティ監査、パフォーマンス分析、トラブルシューティングのために、完全なアクセスレコードが必要です。リアルタイムログクエリを有効にして、すべてのアクセスリクエストの詳細情報を記録します。これにより、異常なアクセスパターンを特定し、ユーザー行動を分析し、Web サイトのパフォーマンスを最適化できます。

SPA ページのリフレッシュ時の 404 エラー

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

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

1. バケットページに移動し、対象バケットの名前をクリックします。次に、左側メニューで、データ管理 > 静的ページ をクリックします。

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

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

静的 Web サイトホスティングは、HTML、CSS、JavaScript などの静的ファイルのみをサポートします。PHP、Python、Java などのサーバーサイド動的言語はサポートされません。動的な機能が必要な場合は、フロントエンドフレームワークでクライアントサイドレンダリングを使用するか、Function Compute などのサーバーレスサービスを使用してバックエンド API を呼び出すことができます。