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

静的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サイトデータを保存するには、パブリック読み取りバケットを作成する必要があります。

OSSコンソールの [バケット] ページで、[バケットの作成] をクリックします。

[バケットの作成] パネルで、次の表に従ってパラメーターを設定します。表に記載されていない他のパラメーターのデフォルト設定を保持します。

パラメーター	説明
バケット名	バケットの名前です。この例では、バケット名をexamplebucketに設定します。
リージョン	バケットが配置されているリージョン。この例では、中国 (杭州) リージョンが選択されています。
ストレージクラス	[標準] を選択します。
アクセス制御リスト (ACL)	[公開読み取り] を選択します。

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

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

ステップ3: webページオブジェクトの作成とアップロード

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

2つのローカルHTMLファイルを作成します。
- デフォルトのホームページファイル
 この例では、次のコンテンツを使用して、静的Webサイトのホームページファイルindex.htmlを生成します。要件に基づいてホームページファイルの内容を指定します。
```
<html>
 <head>
 <title>Hello OSS!</title>
 <meta charset="utf-8">
 </head>
 <body>
 Configure static website hosting for an OSS bucket
 This is the index page
 </body>
 </html>
```
- デフォルト404エラーファイル
 この例では、次のコンテンツを使用して、静的Webサイトの404エラーファイルerror.htmlを生成します。要件に基づいて404エラーファイルの内容を指定します。
```
<html>
<head>
 <title>Hello OSS!</title>
 <meta charset="utf-8">
</head>
<body>
 This is the 404 page
</body>
</html>
```
webページオブジェクトをバケットにアップロードします。
1. 左側のナビゲーションウィンドウで、バケットリスト をクリックします。 [バケット] ページで、目的のバケットを見つけてクリックします。
2. 左側のナビゲーションウィンドウで、ファイル > オブジェクトを選択します。
3. [アップロード] をクリックします。
4. [アップロード] パネルで、[ファイルの選択] をクリックし、[アップロードするファイル] セクションで作成した2つのwebページファイルを選択します。他のパラメーターのデフォルト設定を保持します。
5. [アップロード] をクリックします。

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

左側のナビゲーションツリーで、[データ管理] > [静的ページ] を選択します。
[静的ページ] ページで、[設定] をクリックします。デフォルトホームページをindex.htmlに、デフォルト404ページをerror.htmlに設定します。
説明
サブディレクトリへのアクセスをサブディレクトリ内のindex.htmlオブジェクトにリダイレクトするには、Subfolder Homepageを有効にします。詳細については、「静的Webサイトホスティングの設定」をご参照ください。
[保存] をクリックします。

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

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

ナビゲーションツリーで、[バケット設定] > [ドメイン名] を選択します。
[ドメイン名] ページで、[カスタムドメイン名のマッピング] をクリックします。
[カスタムドメイン名のマップ] パネルで、[カスタムドメイン名] フィールドにexample.comを入力し、[確認] をクリックして [CNAMEレコードの自動追加] を有効にします。
ドメインステータスが有効になるのを待ちます。

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

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

CDN高速化ドメイン名によって生成されたCNAMEを記録します。
1. ナビゲーションツリーで、[バケット設定] > [ドメイン名] を選択します。
2. [ドメイン名] ページで、ドメイン名の [Alibaba Cloud CDN] 列の [未設定] をクリックし、Alibaba Cloud CDNコンソールに移動します。
3. [ドメイン名の追加] ページで、すべてのパラメーターのデフォルト設定を保持します。 [次へ] をクリックし、[ドメイン管理に戻る] をクリックします。
4. ドメイン名example.com.w.kunlunsl.comのCNAME値を記録します。カスタムドメイン名をバケットにマップするときに追加されるCNAMEレコードを変更します。
CDN高速化ドメイン名を解決します。
1. のドメイン名解決ページDNSコンソールドメイン名を見つけて、DNS設定[アクション] 列に表示されます。
2. カスタムドメイン名をマップするときに自動的に追加されるCNAMEレコードを検索します。 [操作] 列の [変更] をクリックします。
3. [DNSレコードの変更] ページで、[レコード値] の値をexample.com.w.kunlunsl.comに変更します。他のパラメーターのデフォルト設定を保持し、[OK] をクリックします。

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

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

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

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

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

バケットにマップされているドメイン名を削除します。詳細については、「アクセラレーションの無効化」をご参照ください。
Alibaba Cloud DNSに追加されたCNAMEレコードを削除します。詳細については、「DNSレコードの削除」をご参照ください。
作成したバケットと、バケットにアップロードされたオブジェクトを削除します。詳細については、「オブジェクトの削除」および「バケットの削除」をご参照ください。