自分の好きなドメインを利用して HP を公開してみよう！

Alibaba Cloud では OSS(Object Strage Service) という名前のサービスがあります
名前の通りストレージサービスです

このサービスは HP の公開もできます
今回は独自ドメインを取得するところからページの公開までをやっていきましょう！

作業概要

1. ドメインの取得(## 今回は省略します)
2. Alibaba Cloud DNS でドメインの設定
3. OSS の設定
4. OSS と Alibaba Cloud DNS の紐付け
5. 独自ドメインでアクセス
6. おまけ

作業手順

ドメインの取得(お名前ドットコム)

お好きなレジストリ、レジストラでドメインを取得してください

お名前ドットコム
https://www.onamae.com/

ムームードメイン
https://muumuu-domain.com/

どこでドメインを取得しても金額以外は違いはありません

Alibaba Cloud DNS でドメインの設定

コンソール画面に入り、画面左上のハンバーガメニューから[ Alibaba Cloud DNS ]を選択します

[ Add Domain Name ]を選択

入手したドメインを入力

ネームサーバの値をメモします

ドメインを購入したサイトで、ネームサーバの変更を行います
(今回は[ お名前ドットコム ]を利用しました)

変更されたことを確認してください

変更されると[ DNS Status ]が[ Normal ]になります

OSS の設定

コンソール画面に入り、画面左上のハンバーガメニューから[ OSS ]を選択します

サイドバーからバケットの作成を選択

バケットの名前: ドメイン名
リージョン: 東京
ストレージクラス: スタンダード
公開方式: 読み込みのみ公開
他はデフォルトで大丈夫です

公開について注意がありますが、問題ありませんので先に進みます

バケットができたことを確認したら[ Files ]を選択します

自分の PC で[ index.html ]のファイルを作成します

他の方法で作成していただいて構いません。

[ Upload ]をクリック

[ Public Read ]を選択し、先ほど作成したファイルをアップロードします

[ index.html ]がアップロードされたことを確認します

[ View Details ]を選択

[ index.html ]の URL にアクセスしてみます

OSS にアップロードしたファイルにアクセスできました！！

OSS と Alibaba Cloud DNS の紐付け

OSS のヘッダーから[ Basic Setting ]を選択し、画面下部へスクロールしていきます

[ Static Pages ]の[ Configure ]をクリック

[ Default Homepage ]に[ index.html ]を選択します

OSS のデフォルトのドメインネームにアクセスします

OSS のデフォルトページで[ index.html ]が表示されるようになりました

OSS のヘッダーから[ Domain Names ]を選択し、[ Bind Confirm Domain Name ]をクリックします

[ Custom Domain Name ]に使いたいドメイン名を入力し、[ Alibaba Cloud DNS ]に自動的に[ CNAME ]が入力されるようにします

完了すると、ドメイン名が表示され、アクセスする準備が整いました

[ Alibaba Cloud DNS ]にアクセスして確認すると、[ CNAME ]レコードが作成されていることが確認できます

実際に独自ドメインにアクセスしたら、画面が表示されました！！

実際に設定が反映されるまでしばらく時間がかかりますので、画面が表示されない場合は待ってみましょう

おまけ

[ Alibaba Cloud DNS ]の設定を自分でやってみてみましょう

画面左上のハンバーガメニューから[ Alibaba Cloud DNS ]を選択します

作成したドメインから[ Configure ]をクリックします

[ Add Record ]をクリックします

[ OSS ]の対象バケットのオリジン URL を記述します

Type: レコードの種類。今回は[ CNAME ]を選択します
Host: 使いたい DNS のホスト名
ISP Line: デフォルトで
Value: DNS の元になる部分です。今回は OSS のオリジンです
TTL: 10(設定が反映されるまでの時間)

設定が追加されたことが確認できました！

終わりに

お疲れ様でした。

静的ファイルに自分の独自ドメインでアクセスできるようになりました！
これで簡単な HP でしたら公開できますね。

次回はこのドメインを SSL(https) にしていきます！