すべてのプロダクト
Search
ドキュメントセンター

Object Storage Service:カスタムドメイン名を使用して静的Webサイトホスティングを構成する

最終更新日:Feb 23, 2024

静的WebサイトをObject Storage Service (OSS) バケットでホストし、バケットにマップされているs example.comなどのカスタムドメイン名を使用して、ユーザーがWebサイトにアクセスできるようにすることができます。 このチュートリアルでは、既存の静的Webサイトをホストする方法、またはOSSバケットにWebサイトを最初から作成する方法を示します。

ステップ1: ドメイン名の登録

静的Webサイトを構築する前に、Webサイトのドメイン名を登録する必要があります。 Alibaba Cloudドメインを使用してWebサイトのドメイン名を登録することを推奨します。 詳細については、「Alibaba Cloudにドメイン名を登録する方法」をご参照ください。

この例では、example.comはWebサイトのドメイン名として使用されます。

重要

登録されたドメイン名を中国本土のリージョンにあるバケットにマッピングする場合は、中国の産業情報技術省 (MIIT) でドメイン名のICP申請を申請する必要があります。 詳細については、「ファイリング」をご参照ください。

ステップ2: バケットの作成

静的Webサイトをホストし、Webサイトデータを保存するには、パブリック読み取りバケットを作成する必要があります。

  1. OSSコンソールにログインします。

  2. 左側のナビゲーションウィンドウで、[バケット] をクリックします。 表示されるページで、[バケットの作成] をクリックします。

  3. [バケットの作成] パネルで、次の表に従ってパラメーターを設定します。

    パラメーター

    説明

    バケット名

    バケット名をexamplebucketに設定します。

    リージョン

    バケットが配置されているリージョンを選択します。 この例では、中国 (青島) をクリックします。

    ストレージクラス

    [標準] を選択します。

    ACL

    [公開読み取り] を選択します。

    他のパラメーターのデフォルト設定を保持します。 詳細については、「バケットの作成」をご参照ください。

  4. [OK] をクリックします。

ステップ3: webページファイルの作成とアップロード

Webサイトのデフォルトのホームページと404のエラーページファイルを作成し、作成したバケットにファイルをアップロードする必要があります。

  1. オンプレミスデバイスに2つのHTMLファイルを作成します。

    • デフォルトのホームページ

      次のサンプルコードは、静的Webサイトのホームページファイルindex.htmlを生成します。 要件に基づいてホームページファイルの内容を指定します。

      <html>
         <head>
             <title>Hello OSS!</title>
             <meta charset="utf-8">
         </head>
         <body>
             <p> OSSバケットの静的Webサイトホスティングの設定 </p>
             <p>This is the index page</p>
         </body>
       </html> 
    • デフォルトの404エラーページ

      次のサンプルコードは、静的Webサイトの404エラーページファイルerror.htmlを生成します。 要件に基づいて、404エラーページファイルの内容を指定します。

      <html>
      <ヘッド>
         <title>Hello OSS!</title>
         <meta charset="utf-8">
      </head>
      <body>
         <p> これは404ページです </p>
      </body>
      </html> 
  2. webページファイルを宛先バケットにアップロードします。

    1. OSSコンソールにログインします。

    2. 左側のナビゲーションウィンドウで、バケットリスト をクリックします。 [バケット] ページで、目的のバケットを見つけてクリックします。

    3. 左側のナビゲーションツリーで、ファイル > オブジェクト を選択します。

    4. [オブジェクトのアップロード] をクリックします。

    5. [オブジェクトのアップロード] パネルで、[アップロードするファイル] セクションの2つのwebページファイルを選択します。 他のパラメーターのデフォルト設定を保持します。

    6. [オブジェクトのアップロード] をクリックします。

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

  1. 左側のナビゲーションツリーで、[データ管理] > [静的ページ] を選択します。

  2. [静的ページ] ページで、[設定] をクリックします。 次に、デフォルトホームページindex.htmlに、デフォルト404ページerror.htmlに設定します。

    説明

    サブディレクトリへのアクセスをサブディレクトリ内のindex.htmlオブジェクトにリダイレクトするには、Subfolder Homepageを有効にします。 詳細については、「静的Webサイトホスティングの設定」をご参照ください。

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

ステップ5: カスタムドメイン名をバケットにマッピングする

登録されたカスタムドメイン名example.comをexamplebucketバケットにマップします。 その後、ドメイン名を使用してバケットにアクセスできます。

  1. 左側のナビゲーションツリーで、[バケット設定] > [ドメイン名] を選択します。

  2. [ドメイン名] ページで、[カスタムドメイン名のマッピング] をクリックします。

  3. [ドメイン名] フィールドにexample.comを入力し、[CNAMEレコードの自動追加] をオンにします。

  4. [送信] をクリックします。

ステップ5: (オプション) Alibaba Cloud CDNを使用してWebサイトへのアクセスを高速化

Alibaba Cloud CDNを使用して、Webサイトのパフォーマンスを向上させることができます。 Alibaba Cloud CDNは、HTMLファイル、画像、ビデオなどのWebサイトのファイルを世界中のデータセンターにキャッシュします。 訪問者がWebサイトからファイルを要求すると、ファイルのコピーが訪問者に最も近いデータセンターから直接提供されます。 このようにして、ダウンロードが加速されます。

  1. 左側のナビゲーションツリーで、[バケット設定] > [ドメイン名] を選択します。

  2. ドメイン名の横にある [未設定] をクリックし、Alibaba Cloud CDNコンソールに移動します。

  3. [ドメイン名の追加] ページで、次の表に従ってパラメーターを設定します。

    パラメーター

    説明

    リージョン

    アクセスを高速化するリージョンを選択します。 この例では、[中国本土のみ] を選択します。

    加速するドメイン名

    デフォルト設定を使用します。

    ビジネスタイプ

    コンテンツ配信はビジネスタイプによって異なります。 保存したコンテンツとコンテンツの使用状況に基づいてビジネスタイプを選択します。 この例では、[画像と小さなファイル] を選択します。

    リソースグループ

    [Default Resource Group] を選択します。

    オリジンサーバー

    デフォルト設定を使用します。

    ポート

    CDNが使用するポートを選択します。 この例では、[80] を選択します。

  4. [次へ] をクリックし、[ドメイン名一覧に戻る] をクリックします。

  5. ドメイン名example.com.w.kunlunsl.comのCNAME値を記録します。 次に、カスタムドメイン名をバケットにマップするときに追加されるCNAMEレコードを変更します。

    1. Alibaba Cloud DNSコンソールにログインします。

    2. 左側のナビゲーションウィンドウで、[ドメイン名の解決] をクリックします。 表示されたページで、ドメイン名を見つけ、[操作] 列の [DNS設定] をクリックします。

    3. カスタムドメイン名をマップするときに自動的に追加されるCNAMEレコードを検索します。 [変更] をクリックします。

    4. レコード値example.com.w.kunlunsl.comに設定し、他のパラメータのデフォルト設定を保持します。

    5. [OK] をクリックします。

  6. オプション。 [ドメイン名] ページで、[CDNキャッシュの自動更新] をオンにします。

    特定の操作の自動CDNキャッシュ更新を設定する場合は、 チケットを起票してサポートセンターにお問い合わせくださいしてサポートセンターにお問い合わせください。 リクエストが承認されたら、ドメイン名の [自動CDNキャッシュ更新] 列で [サポートされている操作] をクリックし、自動CDNキャッシュ更新をトリガーできる操作を選択します。 サポートされている操作の詳細については、「自動CDNキャッシュ更新の有効化」をご参照ください。

手順 6:Webサイトをテストする

ブラウザに次のURLを入力して、Webサイトが期待どおりに実行されるかどうかを確認します。

  • 静的Webサイトのホームページにアクセスするには、http://example.comにアクセスしてください。 静的Webサイトホスティングが正しく設定されている場合、次のページが表示されます。11

  • バケットに存在しないオブジェクトにアクセスするには、http://example.com/example.txtにアクセスします。 静的Webサイトホスティングが設定されている場合、次のページが表示されます。404

ステップ7: リソースのクリーンアップ

このチュートリアルで作成したリソースは、テストにのみ使用されます。 不要な料金を防ぐため、テストの完了後にこれらのリソースをクリーンアップすることをお勧めします。