Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

1.jpg

[ Add Domain Name ]を選択

2.jpg

入手したドメインを入力

3.jpg

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

4.jpg

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

5.jpg

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

6.jpg

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

7.jpg


OSS の設定

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

8.jpg

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

9.jpg

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

10.jpg

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

11.jpg

12.jpg

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

13.jpg

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

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

14.jpg

[ Upload ]をクリック

15.jpg

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

16.jpg

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

17.jpg

[ View Details ]を選択

18.jpg

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

19.jpg

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

20.jpg


OSS と Alibaba Cloud DNS の紐付け

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

21.jpg

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

22.jpg

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

23.jpg

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

24.jpg

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

25.jpg

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

26.jpg

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

27.jpg

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

28.jpg

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

29.jpg

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

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

30.jpg


おまけ

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

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

31.jpg

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

32.jpg

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

33.jpg

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

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

34.jpg

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

35.jpg


終わりに

お疲れ様でした。

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

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

nago3
AWSが好き、普段はCLIメイン。コンソールでの操作からわかりやすいので、初めての人でもできる内容を挙げていこうと思います。 他はDocker関連。ECS、Fargate、k8sとか。 HPCも好き。
alieaters
Alibaba Cloudを上手に使うためのノウハウの共有を目的としたコミュニティ
https://www.alieaters.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away