AWS React のページを S3+Cloudfront+ACM+Route53+お名前ドットコムで無料 で公開する

はじめに

前回の記事で、S3とCloudfront で簡単なindex.html を表示するところまでを完成させました。その構成を今回は少し変えてみたいと思います。今回はQIITAの記事でを参考にして、ドメイン名登録をお名前ドットコムから取得して、index.htmlを作成するところまでをやってみます

構成

・ドメイン名はお名前ドットコムから無料のcosicosilife.netを取得しました

・ドメイン名の管理をRoute53に任せるように、権限移譲します

・ACM で証明書を作成 (アメリカ北部のリージョンで作成します)

・S3バケットを作成して、html.indexをいれる(日本のリージョンで作成)

・cloudfront で S3 のバケットを公開するように設定、証明書はACMで作成したものを利用

・Route53 において、Cnameをクラウドフロントのディストリビューション名に向けて、cosicosilife.netと打鍵したらindex.html を表示できるようにする

本記事では、初心者向けのために、お名前ドットコムの箇所から丁寧に説明していきます。

お名前ドットコムからのドメイン名の取得

お名前ドットコムは初期登録については済ませておいてください。クレジットカードの登録については十分にお気を付けください。

ドメイン登録に進みます。そして希望のドメイン名を押して、検索ボタンを押します

.net が無料なので申し込みます

申込内容を確認して 次へ を押します

申し込むボタンを押します

設定に数分かかります

問題なければ、ドメインが登録されているはずです

Route53の設定

Route53 (DNS)の設定を行います。Route 53 にアクセスしてください

開始するをクリック

ホストゾーンを作成 をクリック

先ほど取得したドメイン名とその説明を入力。ゾーンはパブリックを選択

タグは省略して 「ホストゾーンの作成」をクリック

成功すると下記のように、NSとSOAが登録されているはずです

ネームサーバーに注目

ネームサーバーは大きく2種類に分類されます。

1. 権威サーバー

権威サーバーは、特定のドメインに関するDNS情報を持つサーバーです。ドメインの所有者がドメインレジストラに登録するネームサーバーがこれにあたります。権威サーバーは、ドメイン名とIPアドレスの対応情報だけでなく、メールサーバーやWebサーバーなどの情報も保持しています。

2. キャッシュサーバー

キャッシュサーバーは、インターネットユーザーから受け取ったドメイン名解決の問い合わせに対して、権威サーバーから取得した情報を一時的に保存して応答するサーバーです。これにより、同じドメイン名へのアクセスを高速化することができます。

今回のRoute53の設定で指定されたネームサーバは下記になるので、権威サーバをAWSにむけるように、お名前ドットコムから設定します。(これを一般的に権威の委任といいます)

ns-1412.awsdns-48.org.
ns-1988.awsdns-56.co.uk.
ns-1017.awsdns-63.net.
ns-112.awsdns-14.com.

お名前ドットコムのネームサーバの値を変更

お名前ドットコムの、ネームサーバーの設定へ

cosicosilife.netをクリック

ほかのネームサーバを利用のタブをクリック

そこで、AWSで指定された4つのネームサーバーを入れます

設定を保存してください

問題なければ、ネームサーバーの変更のメールが届くはずです。

dig で確認

linux のdig コマンドで確認してみましょう。下記のコマンドで、特定のドメイン名のネームサーバを確認できます


dig cosicosilife.net ns

<途中省略>

;; ANSWER SECTION:
cosicosilife.net. 3340 IN NS ns-112.awsdns-14.com.
cosicosilife.net. 3340 IN NS ns-1017.awsdns-63.net.
cosicosilife.net. 3340 IN NS ns-1412.awsdns-48.org.
cosicosilife.net. 3340 IN NS ns-1988.awsdns-56.co.uk.

指定したネームサーバが登録されていたら成功です

ACMで証明書を発行

S3ストレージが東京リージョンにある場合でも、CloudFrontでS3静的コンテンツを配信する場合に限り、ACM証明書は米国東部(バージニア北部)リージョンで発行する必要があるという制約があります。これは、CloudFrontがグローバルなCDNサービスであり、米国東部リージョンにエッジサーバーが集中しているためです。

今回はACMを使う際にのみ米国東部を使います

ACMにアクセス

作業前に必ずリージョンの設定をして、米国東部(バージニア北部)us-east-1を選択します

AWS Certificate Manager をクリック

証明書をリクエストをクリック

証明書をリクエストで パブリック証明書をリクエスト をクリックします

  • ドメイン名はお名前ドットコムで取得したもの
  • 検証方法はDNS検証

を選択

キーアルゴリズムはそのままで 「リクエスト」ボタンを押します

問題なければ、証明書が発行されます

下記の状態では 保留中の検証 があります

しばらくこの状態が続きますが、これを解除するために再びRoute53で設定を行います。証明書が有効になるためには、ACMで発行された証明書のCname名と値をRoute53で登録する必要があります

ACMでcname レコードを作成

つづいて、cname というレコードを作成します(これについては後述します)

証明書のRoute 53でレコードを作成ボタンを押します

レコードを作成ボタンをクリック

レコード作成まで時間がかかります

1分くらい経過すると、レコードが作成されます,証明書も発行済みとなるはずです。ステータスは

cname をroute53 で登録しなければ、「保留中の検証」は解除されません

DNSの設定が間違ってないければ、下記のように数時間以内で成功となるはずです。

Route53でCNAMEを設定

ACMで証明書を発行する際、Route53にCNAMEレコードを登録する必要がある理由は、ドメイン所有権を検証するためです。

1. ドメイン所有権の検証方法

ACMでは、証明書を発行する前に、ドメインの所有権を検証する必要があります。ドメイン所有権を検証する方法には、以下の2種類があります。

  • DNS検証: ドメインのDNS設定にCNAMEレコードを追加することで、ドメインを所有していることを証明します。
  • メール検証: ドメインの管理者にメールを送信し、記載されたリンクをクリックすることで、ドメインを所有していることを証明します。

2. DNS検証とCNAMEレコード

DNS検証を選択した場合、ACMはドメインのDNS設定にCNAMEレコードを追加するよう指示します。CNAMEレコードは、ドメイン名と別のホスト名を紐づけるレコードです。

ACMが発行するCNAMEレコードには、以下の情報が含まれます。

  • CNAME名: ACMが生成するユニークな名前
  • CNAME値: ACMが指定するホスト名

このCNAMEレコードをRoute53に登録することで、ACMはドメインを所有していることを確認することができます。

Route 53で登録したドメインのホストゾーンを選択します

レコードを作成をクリック

先ほどのACMで発行されたCname を登録します。

  • レコード名はドメイン名を除いた部分を入力
  • レコードタイプは CNAME
  • 値はACMの前述の設定をコピペ

このようにレコードが作成されるはずです

問題なければホストゾーンの設定で 下記のようにINSYNC となっているはずです

S3バケットを作成

前回の記事でもS3バケットを作りましたが、今回も作ってみましょう

バケットの作成をクリックしてください.

この際のリージョンは東京を選択してから行ってください

バケットの作成では 「汎用」を 選択して適当なバケット名を指定してください

その他の設定は変更せずにバケットの作成をクリック

その他の設定を変更せずに、設定して問題ありません

ログのためのs3バケットを作成します

CloudFrontの設定

新規でディストリビューションの作成を行います。

オリジンアクセスについてはLegacy Access もしくは Origin Access control settings を使います

ここではOACを利用します  

下記のようにOrigin access controlが選択できるはずです

ビューワーの設定は Redirect HTTP to HTTPS にして暗号化を有効にします

ログは先ほど作成したログ専用のS3バケットを使います

証明書は先ほどACMで設定したものを使います

WAFは今回はOFFにします(少し課金されますので、、、、節約)

何も問題なければディストリビューションが作成されます

作成されたら下記のようにリージョンを変更してください

また、 Alternative Domain name(CNAMEs)にお名前ドットコムで作成したドメイン名を入れて保存します。これを設定しておかないと、最後にRoute53でエイリアスを設定する際に、ディストリビューション名が出てこないのでご注意ください。

Route53でエイリアスを設定する

Route53 に戻ってホストゾーンをクリックします。エイリアスというのは「別名」という意味です。

ここでは「cosicosilife.net というドメイン名は先ほど作成したディストリビューション名という別名を持つ」ということをRoute53 で登録します。こうすることによって、ブラウザでcosicosilife.netと打鍵すれば、CloudFrontのディストリビューション名に飛ぶことになります。

Route53 のホストゾーンに進んで

レコードを作成 をクリック

  • レコード名=空欄
  • レコードタイプ=A
  • エイリアス=ON
  • トラフィックのルーティング先=CloudFrontのディストリビューションへのアクセスから先ほどのCloudFrontのエントリーを選択
  • ルーティングポリシー =シンプルルーティング

とします

レコードの作成 をクリック

問題なければAレコードが作成されるはずです

S3にテストとして、index.html を置いてみる

テストとして、下記のindex.htmlを置いてみます

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプルなHTMLページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        header, nav, section, footer {
            padding: 20px;
            margin: 10px;
        }
        header {
            background: #f4f4f4;
            text-align: center;
        }
        nav {
            background: #333;
            color: white;
            text-align: center;
        }
        nav a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            display: inline-block;
        }
        nav a:hover {
            background: #575757;
        }
        section {
            background: #e2e2e2;
        }
        footer {
            background: #f4f4f4;
            text-align: center;
        }
    </style>
</head>
<body>

<header>
    <h1>ようこそ私たちのウェブサイトへ</h1>
    <p>これはサンプルのHTMLページです。</p>
</header>

<nav>
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">お問い合わせ</a>
    <a href="#">会社情報</a>
</nav>

<section>
    <h2>私たちについて</h2>
    <p>私たちは、最高のサービスを提供することを目指しています。お客様の満足が私たちの第一の目標です。</p>
    <p>長年の経験と専門知識を活かして、お客様のニーズに合わせたソリューションを提供します。</p>
</section>

<section>
    <h2>サービス</h2>
    <p>私たちは、以下のサービスを提供しています:</p>
    <ul>
        <li>ウェブサイト制作</li>
        <li>アプリケーション開発</li>
        <li>デジタルマーケティング</li>
        <li>ITコンサルティング</li>
    </ul>
</section>

<footer>
    <p>© 2024 私たちの会社. すべての権利を保有します。</p>
</footer>

</body>
</html>

上記のindex.htmlが作成できたら、先ほどのS3のバケットに入れてみます

問題なければ、cloudfront で設定した ディストリビューションリストのURLに/index.html

をつければ下記のようにサイトを閲覧できるはずです

また、cnameを登録してあるので、cosicosilife.net と打鍵しても同じように下記のページが出るはずです。

最後に

いかがでしたでしょうか?これだけできれば、証明書やドメイン名なども無料で用意してAWSで無料枠で静的サイトを運用できるかと思います。本記事が皆様のお役に立てれば幸いです

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です