見ながらやろう！ OSS を使った独自ドメイン HP 公開 

# 自分の好きなドメインを利用して 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 ]を選択します

<img width="1440" alt="1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/17e275a7-36db-5a0a-ca76-08f12a9276ab.jpeg">

[ Add Domain Name ]を選択

<img width="1440" alt="2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/80ae26d9-a970-4550-614f-85231c6b0a2c.jpeg">

入手したドメインを入力

<img width="1440" alt="3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/d9b0bceb-f51c-b53e-489f-28673f800f36.jpeg">

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

<img width="1440" alt="4.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/45fff04c-516e-ef5a-465a-a2864fc27988.jpeg">

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

<img width="1026" alt="5.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/7b043452-3528-d576-4fa1-e62ecfde31af.jpeg">

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

<img width="649" alt="6.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/5a48a9fd-08b3-4d63-0e73-d2717a642167.jpeg">

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

<img width="1438" alt="7.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/5e3e8c18-def7-9b6b-757a-a94e4b64b315.jpeg">

---------

### OSS の設定

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

<img width="1440" alt="8.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/c35ece4b-d9ab-a86b-cc38-d882549b590c.jpeg">

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

<img width="1440" alt="9.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/d9ebd888-aa3a-b9c7-5d8a-7ff6a7741e83.jpeg">

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

<img width="1440" alt="10.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/595d9cd0-a5b8-f07a-584f-0607e1fde55a.jpeg">

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

<img width="1440" alt="11.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/6d82274e-e5bb-2b7d-bda5-564299e4d68e.jpeg">

<img width="1440" alt="12.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/d2adf58c-2b79-904c-e596-990fecdf4dc6.jpeg">

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

<img width="1440" alt="13.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/0a6a86e3-e826-b792-307a-11da0fc85298.jpeg">

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

<font color=red>他の方法で作成していただいて構いません。</font>

<img width="636" alt="14.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/9f954368-3da0-4dc8-db5c-d60f7c718d77.jpeg">

[ Upload ]をクリック

<img width="1439" alt="15.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/8da4a274-e42e-017f-431a-0a8d7404f140.jpeg">

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

<img width="1440" alt="16.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/67a9d6ee-2a31-03a9-7453-a379667110dc.jpeg">

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

<img width="1440" alt="17.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/47202e48-1dd0-26fb-ba77-db0314564c03.jpeg">

[ View Details ]を選択

<img width="1440" alt="18.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/c046bbd2-6927-d343-f0a4-9afa65b19411.jpeg">

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

<img width="1440" alt="19.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/7db53589-8b45-42b6-f212-4073662c2782.jpeg">

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

<img width="828" alt="20.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/2058d4cb-0f17-2742-bd8e-3a9325061708.jpeg">

------------

### OSS と Alibaba Cloud DNS の紐付け

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

<img width="1439" alt="21.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/15d0e526-104c-0e6d-b786-6b7f0552966b.jpeg">

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

<img width="1440" alt="22.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/ed70e73f-0049-125a-0ee8-d211717e21f1.jpeg">

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

<img width="1440" alt="23.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/1f91c1e6-fae3-0c12-c724-8b1675ce4b61.jpeg">

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

<img width="1440" alt="24.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/a9cf01c6-e9f6-445e-68fd-315705351f9e.jpeg">

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

<img width="634" alt="25.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/e60701b9-a106-78f5-59eb-521615465d12.jpeg">

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

<img width="1437" alt="26.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/e2a03338-24a7-bfd4-035b-698b698a0c42.jpeg">

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

<img width="1440" alt="27.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/dd815081-53f6-159d-a8f5-430c449efe91.jpeg">

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

<img width="1440" alt="28.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/5288c8dc-20dc-43ae-6928-3d764fbdb278.jpeg">

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

<img width="1440" alt="29.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/46604a8d-0027-32eb-c61b-c7defe5e7244.jpeg">

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

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

<img width="606" alt="30.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/039dcb78-18fc-b760-9103-7b8f40d54407.jpeg">

-----------

### おまけ

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

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

<img width="1440" alt="31.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/38d3b7ea-489b-2648-1cd0-7778d06ce809.jpeg">

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

<img width="1440" alt="32.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/13b849a1-fa8f-893f-b424-7dfe6b931658.jpeg">

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

<img width="1440" alt="33.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/935aba36-4986-8dab-c487-aedb142f7364.jpeg">

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

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

<img width="1440" alt="34.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/36558603-079a-3e1a-81fb-11106ecac6a3.jpeg">

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

<img width="1440" alt="35.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161922/1f8d93b4-61a6-3af9-26c6-75dfa0ea9add.jpeg">

--------

## 終わりに

お疲れ様でした。

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

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