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

ステップ 1: 静的 Web サイトホスティングを構成する

デフォルトのインデックスページとエラーページを構成して、Web サイトの基本的なアクセスルールを設定します。これにより、ユーザーはサイトを閲覧でき、アクセスエラーが発生したときに直接表示されるエラーメッセージを受け取ることができます。

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

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

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

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

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

     • 有効: このオプションは、それぞれが独自のインデックスページを持つ複数の独立したコンテンツセクション (/blog/ や /docs/ など) を含む複雑な Web サイトに適しています。個別のインデックスページを有効にする場合は、サブフォルダ 404 ルールも構成する必要があります。これは、ユーザーが存在しないファイルをリクエストしたときにシステムがどのように応答するかを定義します。

       • リダイレクト (デフォルト): ディレクトリにリダイレクトします。リクエストされたファイルが見つからない場合、システムは対応するディレクトリにインデックスページが存在するかどうかを確認します。インデックスページが存在する場合、システムは 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 が存在するかどうかを確認します。 存在する場合、Location ヘッダーが .../subdir/ を指す 302 Found が返されます。存在しない場合、404 Not Found が返されます。	存在する場合: インデックスページの内容が表示され、ブラウザのアドレスバーは .../subdir/ に更新されます。 存在しない場合: 404 エラーページが表示されます。
         インデックス	インデックスページの内容を直接返します: 対応するディレクトリにインデックスページが存在するかどうかを確認します。存在する場合、その内容が 200 ステータスコードで返されます。	subdir オブジェクトが見つからず、ルールがトリガーされます。 システムは subdir/index.html が存在するかどうかを確認します。 存在する場合、その内容が 200 OK ステータスコードで返されます。存在しない場合、404 Not Found が返されます。	存在する場合: インデックスページの内容が表示され、ブラウザのアドレスバーは .../subdir のままです。 存在しない場合: 404 エラーページが表示されます。
         NoSuchKey	404 エラーを直接返します: 追加のディレクトリやインデックスページのチェックは行いません。	subdir オブジェクトが見つからず、ルールがトリガーされます。 404 Not Found がすぐに返されます。	subdir/index.html が存在するかどうかに関係なく、常に 404 エラーページが表示されます。

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

   • エラーページのステータスコードには、404 を選択します。

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

ステップ 2: Web サイトファイルをアップロードする

準備した Web サイトの HTML ファイルをバケットにアップロードします。

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

2. 左側のナビゲーションウィンドウで、[オブジェクト管理] > [オブジェクト] を選択します。

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

ステップ 3: バケットのアクセス権限を設定する

ユーザーが Web サイトにアクセスできるように、公開読み取り権限を構成します。

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

   1. 左側のナビゲーションウィンドウで、[アクセス制御] > [パブリックアクセスのブロック] をクリックします。

   2. [パブリックアクセスのブロック] スイッチをクリックします。表示されるダイアログボックスに、[パブリックアクセスのブロックを無効にすることを確認します] と入力し、[OK] をクリックします。

2. バケット ACL を公開読み取りに設定します。

   1. [アクセス制御リスト] タブに切り替えて、[設定] をクリックします。

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

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

ステップ 4: Web サイトの構成を検証する

アクセス テストを実行して、Web サイトホスティングが機能していることを確認します。

• ホームページへのアクセスの検証: ブラウザで、カスタムドメイン名 (例: http://example.com) に移動します。結果は次のように表示されます。

  

• 404 ページの検証: ブラウザで、存在しないファイル (例: http://example.com/missing-object) に移動します。結果は次のように表示されます。

  

ステップ 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. バケット ACL を公開読み取りに設定します。

   1. [アクセス制御リスト] タブに切り替えて、[設定] をクリックします。

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

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

ステップ 4: アプリケーションのデプロイメントを検証する

アクセス テストを実行して、SPA がデプロイされ、ルート遷移を正しく処理できることを確認します。

• ホームページへのアクセスの検証: ブラウザで、カスタムドメイン名 (例: http://example.com) に移動します。結果は次のように表示されます。

  

• 404 ページの検証: ブラウザで、存在しないファイル (例: http://example.com/missing-object) に移動します。リクエストはアプリケーションのエントリポイントにリダイレクトされ、200 OK を返します。結果は次のように表示されます。

  

ベストプラクティス

• 安全な伝送: HTTPS アクセスを有効にする

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

• パフォーマンスの最適化: CDN アクセラレーションを構成する

  静的 Web サイトがグローバルなオーディエンスにサービスを提供している場合や、高い同時トラフィックが発生している場合は、CDN アクセラレーションを構成します。このアプローチでは、コンテンツを世界中のエッジノードにキャッシュし、アクセス速度を大幅に向上させ、OSS のトラフィックコストを削減します。

• クロスドメインアクセス: CORS ルールを構成する

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

• バージョン管理: リリースとロールバックを実装する

  本番環境では、新しいバージョンを迅速にリリースし、緊急ロールバックを実行する機能が必要です。バージョン管理を有効にし、Jenkins などの自動化ツールと統合して、完全な継続的インテグレーションと継続的デプロイメント (CI/CD) パイプラインを作成します。これにより、リリースの効率とシステムの安定性が向上します。

リスク防止

• トラフィック盗用保護: ホットリンク保護を構成する

  他の Web サイトから直接参照される静的リソースは、余分なトラフィックコストとサーバー負荷を引き起こします。ホットリンク保護を構成し、ドメインの許可リストを設定して、他の Web サイトがアセットをホットリンクすることによる帯域幅の盗用を防ぎ、運用コストを管理します。

• アクセスモニタリング: アクセスログを有効にする

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

デプロイした SPA のページをリフレッシュすると表示される 404 エラーを修正するにはどうすればよいですか？

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

静的 Web サイトホスティングを無効にするにはどうすればよいですか？

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

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

静的 Web サイトホスティングは動的コンテンツをサポートしていますか？

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