Alibaba Cloud Object Storage Service(OSS)で静的 Web サイトをホストするとします。 ドメイン(examplewebsite.com など)を登録したので、 http://examplewebsite.com および http://www.examplewebsite.com へのリクエストは OSS コンテンツから処理する必要があります。 OSS でホスティングする 既存の静的 Web サイトを持っている場合でも、最初から始める場合でも、この例を使用して Alibaba Cloud OSS で Web サイトをホストする方法を学ぶことができます。

前提条件

このチュートリアルでは、以下のサービスについて説明します。

  • ドメイン名登録

    examplewebsite.com などの登録ドメイン名がない場合は、登録する登録機関を選択してください。 Alibaba Cloud はドメイン名登録サービスも提供しています。 詳しくは、「Alibaba Cloud Domainサービス」をご参照ください。

  • Alibaba Cloud OSS

    Alibaba Cloud OSS を使用してバケットを作成し、サンプルの Web サイトページをアップロードし、 他のユーザーがコンテンツを閲覧できるように権限を設定してから、 Web サイトホスティング用にバケットを設定します。 この例では、 http://examplewebsite.com および http://www.examplewebsite.com に対するリクエストを許可したいので、2つのバケットを作成します。 コンテンツを 1 つのバケットだけでホストし、コンテンツをホストする バケットに要求をリダイレクトするように他のバケットを構成します。

  • ALibaba Cloud DNS

    ドメインネームシステム(DNS)プロバイダとして、Alibaba Cloud DNS を構成します。 この例では、ドメイン名を Alibaba Cloud DNS に追加し、OSS 割り当てアクセスドメイン名の代わりにドメイン名を使用して OSS バケットにアクセスできるように CNAME レコードを定義します。

    この例では、Alibaba Cloud DNS を使用しています。 Alibaba Cloud DNS を使用すること をお勧めします。 ただし、さまざまなレジストラを使用して、 OSS バケットを指す CNAME レコードを定義できます。

このチュートリアルでは、ドメイン名として examplewebsite.com を使用しています。 このドメイン名を登録したものに置き換えます。

手順 1:ドメインを登録する

すでに登録済みドメインをお持ちの場合は、この手順をスキップできます。 Web サイトをホストしたことがない場合は、 まず examplewebsite.com などのドメインを登録します。 Alibaba Cloud Domain サービスを使用してドメインを登録できます。

詳細については、「Alibaba Cloud Domainクイックスタートでドメイン名を購入する」をご参照ください。

手順 2:バケットを作成して設定し、データをアップロードする

examplewebsite.com などのルートドメインと http://www.examplewebsite.com などのサブドメインの両方からの要求をサポートするために、2 つのバケットを作成します。 http://www.examplewebsite.com. 一方のバケットはコンテンツを格納するために使用され、もう一方のバケットは コンテンツを格納するバケットに要求をリダイレクトするために使用されます。

手順 2.1:2つのバケットを作成する

このステップでは、Alibaba Cloud アカウントの認証情報を使用して Alibaba Cloud OSS コンソールにログオンし、次の 2 つのバケットを作成します。

  • originbucket:コンテンツを保存する
  • redirectbucket:リクエストを originbucket にリダイレクトする
  1. OSS コンソールにログインします。
  2. たとえば、originbucketredirectbucket の 2 つのバケットを作成します。1 つはコンテンツを格納するためのもの、 もう 1 つはコンテンツを格納するバケットに要求をリダイレクトするためのものです。 2つのバケットのアクセス 制御リスト(ACL)を「公開読み取り」に設定して、誰もがバケットの内容を 見ることができるようにします。

    詳細な手順については、「バケットの作成」をご参照ください。

  3. originbucketredirectbucket のアクセスドメイン名を書き留めます。 後の手順でそれらを使用します。 次の図に示すように、 バケットの概要タブページでバケットのアクセスドメイン名を見つけることができます。

  4. ウェブサイトのデータを originbucket にアップロードします。

    あなたはあなたのコンテンツをルートドメインバケット originbucket の外にホストし、 あなたはサブドメインバケット redirectbucket のリクエストを ルートドメインバケット originbucket にリダイレクトします。 どちらのバケットにもコンテンツを保存 できます。

    この例では、コンテンツを originbucket バケットでホスト します。 コンテンツは、テキストファイル、写真、ビデオなど、あらゆる種類のファイルにすることができます。 Web サイトをまだ作成していない場合は、この例では 2 つのファイルしか必要ありません。 一方のファイルは Web サイトのホームページとして使用され、もう一方のファイルは Web サイトのエラーページとして使用されます。

    たとえば、次の HTML を使用して index.html という名前のファイルを 1 つ作成し、 それをバケットにアップロードできます。 後の手順では、このファイル名を Web サイトのデフォルトのホームページとして使用します。

    <html>
       <head>
            <title>Hello OSS! </title>
           <meta charset = "utf-8">
       </head>
        <body>
           <p>Now host on Alibaba Cloud OSS</p>
           <p>This is the index page</p>
        </body>
     </html>

    次の HTML を使用して error.html という名前の別のファイルを作成し、それをバケットにアップロードします。 このファイルは、Web サイトの 404 エラーページとして使用されています。 後の手順で、このファイル名を Web サイトのデフォルトの 404 ページとして使用します。

     <html>
    <head>
       <title>Hello OSS! </title>
       <meta charset="utf-8">
    </head>
    <body>
       <p>This is the 404 error page</p>
    </body>
    </html>
手順 2.2:Webサイトホスティング用のバケットを設定する

Web サイトホスティング用のバケットを設定すると、OSS に 割り当てられたアクセスドメイン名を使用して Web サイトにアクセスできます。

このステップでは、originbucket を Web サイトとして設定します。

  1. OSS コンソールにログインします。
  2. バケット名リストから、originbucket を選択します。
  3. [基本設定]タブをクリックして、Static Page 領域を見つけます。
  4. [編集]をクリックしてから、以下の情報を入力します。
    • デフォルトホームページ:インデックスページ(Web サイトの index.html に相当)。 バケットに保存されている HTML ファイルのみを 使用できます。 この例では、 index.html と入力します。
    • デフォルトの 404 ページ: 誤まったパスにアクセスしたときに返されるデフォルトの404ページ。 バケットに保存されている HTML ファイルと画像ファイルのみを使用できます。 このフィールドを 空白のままにすると、デフォルトの 404 ページが無効になります。 この例では、 error.html と入力します。
  5. [保存]をクリックします。
手順 2.3:リダイレクト用のインデックスページを設定する

エラーページとo riginbucket のデフォルトのホームページを設定したので、 redirectbucket のデフォルトのホームページも設定する必要があります。

リダイレクト用の インデックスページを設定するには、次の手順を実行します。

  1. OSS コンソールにログインします。
  2. バケット名リストから、redirectbucket を選択します。
  3. [基本設定]タブをクリックして、 静的ページ領域を見つけます。
  4. [編集]をクリックし、 index.html 既定のホームページテキストボックスに入力します。
  5. [保存]をクリックします。

手順 3:ドメイン名を OSS バケットにバインドする

ルートドメイン examplewebsite.com と OSS バケット originbucket ができたので、OSS によって割り当てられたドメイン名の代わりに独自のドメイン名を使用して OSS バケットにアクセスできるように、 ドメインを OSS バケットにバインドします。

この例では、ドメイン examplewebsite.com を OSS バケット originbucket にバインドする前に、 OSS に割り当てられたドメイン名 originbucket.oss-cn-beijing.aliyuncs.com を使用してバケット originbucket にアクセスする必要があります。 ドメイン examplewebsite.com をバインドしたら、 この examplewebsite.com を使用して OSS バケットにアクセスできます。

同様に、OSS が割り当てたドメイン名 originbucket.oss-cn-beijing.aliyuncs.com の代わりに www.examplewebsite.com を使用して OSS バケットにアクセスできるように、サブドメインwww.examplewebsite.com を OSS バケット redirectbucket に バインドする必要もあります。

ルートドメイン examplewebsite.com を OSS バケットの originbucket にバインドするには、次の手順に従います。

  1. OSS コンソールにログインします。
  2. バケット名リストから、 originbucket を選択します。
  3. [ドメイン名]タブをクリックします。
  4. [ユーザードメインのバインド]をクリックして[ユーザードメインのバインド]ダイアログボックスを開きます。
  5. ユーザードメインテキストボックスに、 ルートドメイン examplewebsite.com を入力します。
  6. CNAME レコードを originbucket に定義します。
    • ドメイン名が Alibaba Cloud アカウントで解決されたら、 Add CNAME Record Automatically スイッチを開くことができます。 次に[送信]をクリックします。
    • ドメイン名が Alibaba Cloud のプライマリアカウントで解決されていない場合、 CNAME レコードを自動的に追加スイッチは無効になっています。 CNAME レコードを手動で追加するには、 次の手順を実行し、 [送信]をクリックします。
      1. Alibaba Cloud DNS にドメイン名を追加します。
        • ドメイン名が Alibaba Cloud に登録されている場合は、 自動的に Alibaba Cloud の DNS リストに追加されます。 このステップはスキップできます。
      2. Alibaba Cloud DNS コンソールで、自分のドメイン名を見つけます。
      3. ドメイン名をクリックするか、 [設定]リンクをクリックします。
      4. [レコードの追加]をクリックします。
      5. レコードを追加ダイアログボックスで、 Type ドロップダウンボックスから CNAME を選択し、 Value テキストボックスにバケットの OSS ドメイン名を入力します。 この例では、 originbucket.oss-cn-beijing.aliyuncs.com と入力します。
      6. [確認]をクリックします。
  7. 上記の手順に従って、サブドメイン www.examplewebsite.com を OSS バケット redirectbucket にバインドします。

手順 4:Web サイトのリダイレクトを設定する

Web サイトのホスティング用にバケットを設定し、カスタムドメインを OSS バケットにバインドしたので、 redirectbucket を設定します。 http://www.examplewebsite.com へのすべての要求を http://examplewebsite.com にリダイレクトするようにします。

Web サイトのリダイレクトを設定するには、次の手順に従います。

  1. OSS コンソールにログインします。
  2. バケット名リストから、redirectbucket を選択します。
  3. [基本設定]タブをクリックすると、Back-to-Origin があります。
  4. [編集]をクリックしてから[ルールの作成]をクリックします。
  5. 次のように 404 リダイレクトルールを作成します。
    1. Back-to-Origin で、リダイレクトを選択します。
    2. Back-to-Origin When で、HTTP Status コードを 404 に設定します。
    3. Back-to-Origin URL で、プレフィックスまたはサフィックスを追加を選択し、 originbucket のドメイン名を入力します。 この例では、examplewebsite.com と入力します。
    4. [確認]をクリックします。

手順 5 :(オプション)Alibaba Cloud CDN でウェブサイトをスピードアップ

あなたはあなたのウェブサイトのパフォーマンスを向上させるために Alibaba クラウドコンテンツデリバリーネットワーク(CDN)を使用することができます。 CDN はあなたのウェブサイトファイル(HTML、画像、ビデオなど)を世界中のデータセンターから利用可能にします。 これらはエッジノードと呼ばれます。 訪問者があなたのウェブサイトからファイルを要求すると、Alibaba Cloud CDN は自動的にその要求を最も近いエッジノードにあるファイルのコピーにリダイレクトします。 これにより、訪問者が遠くにあるデータセンターからコンテンツを要求した場合よりもダウンロード時間が短縮されます。

Alibaba Cloud CDN は、指定した期間、コンテンツをエッジノードにキャッシュします。 有効期限よりも長い期間キャッシュされているコンテンツを訪問者がリクエストした場合、CDN はオリジンサーバーをチェックして、コンテンツの新しいバージョンが利用可能かどうかを確認します。 それ以降のバージョンが利用可能な場合、CDN は 新しいバージョンをエッジノードにコピーします。 元のコンテンツに加えた変更は、訪問者がコンテンツを要求したときにエッジノードに複製されます。 ただし、有効期限が切れる前は、コンテンツは以前のバージョンのままです。 元のコンテンツに行った変更がリアルタイムで CDN キャッシュに自動的に更新されるように、 CDN キャッシュの自動更新スイッチを開くことをお勧めします。

CDN を使って originbucket を高速化するには、次の手順に従います。

  1. CDN コンソールに CDN ドメインを追加します。 詳しい手順については、手順 2 をご参照ください。 CDNクイックスタートに CDN ドメインを追加します。
  2. Alibaba Cloud DNS コンソールで CNAME レコードを定義します。 詳しい手順については、 Alibaba Cloud DNSの設定を参照。
  3. OSS コンソールで自動更新 CDN キャッシュスイッチを開きます。
    1. OSS コンソールにログインします。
    2. バケット名リストから、 originbucket を選択します。
    3. [ドメイン名]タブをクリックします。
    4. 自動更新の CDN キャッシュを開く。
  4. CDN で redirectbucket をスピードアップするために前のステップに従ってください。

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

Web サイトが正しく機能していることを確認するには、ブラウザで次の URL を試してください。

URL 結果
http://examplewebsite.com originbucket の索引文書を表示します。
originbucket に存在しないファイルのURL (http://examplewebsite.com/abc など) originbucket のエラードキュメントを表示します。
http://www.examplewebsite.com リクエストを http://examplewebsite.com にリダイレクトします。
http://www.examplewebsite.com/abc リクエストを http://examplewebsite.com/abc にリダイレクトします。
場合によっては、予想される動作を確認するために Web ブラウザのキャッシュを消去する必要があります。

クリーンアップ

静的な Web サイトを学習課題としてのみ作成した場合は、 アカウントに不要な料金が請求されないように、割り当てた Alibaba Cloud リソースを必ず削除します。 Alibaba Cloud リソースを削除すると、 その Web サイトは利用できなくなります。

クリーンアップするには、次の手順に従います。Alibaba Cloud CDN コンソールで

  1. ドメイン名を無効にしてから削除します。
  2. Alibaba Cloud DNS コンソールで CNAME レコードを削除します。
  3. Alibaba Cloud OSS コンソールで OSS ファイルとバケットを削除します。