LoginSignup
52
51

More than 1 year has passed since last update.

@ushi_osushi

AWSでS3/Route53/CloudFrontを使用してWEBサイトを公開する手順を解説

Last updated at Posted at 2022-06-28

はじめに

この記事では、AWSを使用してWEBサイトを公開する手順を解説します。
Route53で独自ドメインを取得してS3で公開、CloudFrontで常時SSL化（HTTPS化）までを記載しました。
AWS以外でドメインを取得されている方でも問題ないように書いていますのでご安心ください。

AWSアカウントの登録方法や設定の説明は省きますが、アカウント登録からされる方はこちらの記事(AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ)がおすすめです。設定する項目が多く大変だと思いますが、IAMユーザーでのログインに切り替えるなどセキュリティ面でとても重要なこともあるので忘れずに行いましょう。

Route53でドメインを取得

まずはRoute53でドメインを取得しましょう。
us-east-1.console.aws.amazon.com_route53_v2_home.jpg
検索窓にRoute53と入力してダッシュボードを表示し、「ドメインの登録」に登録したいドメイン名を入力して「チェック」をクリックします。

us-east-1.console.aws.amazon.com_route53_v2_home-(1).jpg
入力したドメイン名の使用可否がわかり、料金も表示されています。
利用可能であればカートに入れて、「続行」をクリックから個人情報の入力などを終えるとドメインを購入することができます。

Route53でホストゾーンを作成

ドメインを取得したらRoute53でホストゾーンを作成しましょう。

ホストゾーンは1ゾーン0.5ドル/月です。
26個以降のホストゾーンは0.1ドルに割引、1ゾーンで10,000レコードを超える場合は0.0015ドルの追加課金となります。
Amazon Route 53 料金表
us-east-1.cons1ole.aws.amazon.com_route53_v2_hostedzones.jpg
Route53のダッシュボードページやサイドバーなどからホストゾーンのページに移動し、「ホストゾーンの作成」をクリックします。

us-east-1.console.aws.ama3zon.com_route53_v2_hostedzones.jpg
「ドメイン名」に取得したドメイン名を入力して「ホストゾーンの作成」をクリックします。

これでホストゾーンの作成が完了しました。

ホストゾーンとドメインを紐付ける

ドメインの取得とホストゾーンの作成が完了したら、その2つを紐付けましょう。
ホストゾーンのネームサーバーとドメインのネームサーバーを同じ値にすることで紐付けることができます。
この紐付けを先に行っておかないと、これから行うACM証明書の発行ができません。
us-east-1.consfdsdfsdfole.aws.amazon.com_route53_v2_home.jpg
Route 53のダッシュボードから作成したホストゾーンのページに移動します。
NSとSOA、2つのレコードがあると思います。
このうちNSの「値/トラフィックのルーティング先」に記載されているテキストがホストゾーンのネームサーバーになります。

us-east-1.console.fdsfsdfsdfsdfsaws.amazon.com_route53_v2_home.jpg
同じくRoute 53のダッシュボードなどから今度は購入したドメインのページに移動します。
こちらにはドメインに設定されているネームサーバーが記載されています。
「ネームサーバーの追加/編集」からネームサーバーの値がホストゾーンの値と同じになるようにしましょう。

Route53以外でドメインを購入した方は、ドメインを購入したサービス側でネームサーバーの値をホストゾーンと同じ値に設定してください。

ACMでSSL証明書を発行する

HTTPS接続をするためにはSSL証明書が必要なので、ACM(AWS Certificate Manager)で証明書を発行しておきます。
証明書の発行は無料です。
acm_1.jpg
検索窓に「Certificate Manager」と入力してACMのページに移動します。
画面右上のリージョンをバージニア北部に変更してから、「証明書をリクエスト」をクリックします。

リージョンの変更を忘れないように注意しましょう。
バージニア北部以外のリージョンで発行されたACMは、CloudFrontでの作業時に使用できません。

acm_2.jpg
証明書タイプはデフォルトのまま「次へ」をクリックします。

acm_3.jpg
「完全装飾ドメイン名」にドメイン名を入力して、そのほかはデフォルトのまま「リクエスト」をクリックします。

acm_4.jpg
証明書の発行が完了しました。

ステータスが保留中の検証から変わらない場合

acm_5.jpg
証明書の発行まではしばらく時間がかかることがありますが、変わらない場合は作成した証明書の詳細ページから「Route 53でレコードを作成」をクリックしてレコードを作成しましょう。
レコード作成後しばらく待つとステータスが発行済みに切り替わります。

時間がかかりそうなら待っている間にS3の設定を行なってしまいましょう。
証明書はS3作業後のCloudFrontで使用します。

S3でバケットを作成する

S3(Simple Storage Service)はストレージサービスです。
ここにindex.htmlなどの必要なファイルを入れていきましょう。
URLとか気にしないのであれば、S3だけでも公開できちゃいます。

S3はAWSにサインアップしてから12か月は毎月5GBまで無料で使用することができます。
AWS 無料利用枠

無料期間終了後は標準クラスで0.023USD/GBとなります。
Amazon S3 の料金

では、S3にバケットを作成していきましょう。
s3_1.jpeg
検索窓に「S3」と入力してS3のページを表示し、「バケット作成」をクリックします。

s3_2.jpeg
バケット名を入力します。

バケット名はドメイン名と完全に同じでなければいけません。
example.comがドメイン名なら、example.comがバケット名になります。

s3_3.jpeg
「パブリックアクセスをすべてブロック」のチェックを外します。
チェックを付けたままだとバケット内のファイルを公開できませんので注意してください。
ただ、後から設定で変更することができます。
パブリックアクセスのオフに対する承認チェックボックスにだけチェックを入れて、他はデフォルトのままで大丈夫なので「バケットの作成」をクリックします。

s3_4.jpeg
バケットの作成が終わったら、作成したバケットのページに移動して必要なファイルをS3にアップロードしておきましょう。

作成したS3バケットを公開設定する

もう少しS3の設定をしていきます。
s3_5.jpeg
「プロパティ」タブに移動します。

s3_6.jpeg
最下部の「静的ウェブサイトホスティング」の編集をクリックします。

s3_7.jpeg
「静的ウェブサイトホスティング」は「有効にする」を選択し、
「インデックスドキュメント」にWEBサイトのHTMLファイル名(ここではindex.html)を入力して、「変更の保存」をクリックします。

s3_8.jpeg
今度は「アクセス許可」タブに移動して、バケットポリシーの「編集」をクリックします。

s3_9.jpg
ポリシーに下記のコードをコピペします。Resourceのところは作成したバケット名に変更して「変更の保存」をクリックします。

バケットポリシーに何も記入されていないデフォルトの状態で編集画面に行くと、空欄に見えて半角スペースだけが自動で挿入されています。
コピペの方法によっては最初の{の前に半角スペースが混入してしまう可能性があり、そうなるとエラーになって保存できませんので注意しましょう。

ポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::ここはS3のバケット名/*"
        }
    ]
}

これでS3の設定は完了です。

S3からページが表示できるか確認してみる

s3_10.jpg
再び「プロパティ」タブに戻って、「バケットウェブサイトエンドポイント」のURLをクリックしてちゃんと設定ができたか確かめてみましょう。
自分のサイトが表示されていれば問題なしです。

index.html内で読み込んでいるパスにhttpが混入していると、そのhttpで読み込んでいるファイルはサイトに反映されないので注意が必要です。読み込むパスは全てhttpsで書きましょう。

CloudFrontでディストリビューションを作成する

S3だけではURLがhttpから始まっているので、アドレスバーに「保護されていない通信」と出続けてしまいます。
このままだと第三者に悪用される可能性があるのでhttpsにするためにCloudFrontを使用します。

CloudFrontには無期限の無料枠があり、それを超えるデータ転送やアクセスが発生しなければずっと無料です。
Amazon CloudFront の料金

無料利用枠

  • 1 TB のデータ転送 (アウト)
  • 1,000 万件の HTTP または HTTPS リクエスト
  • 2,000,000 件の CloudFront Function 呼び出し

cl_1.jpg
検索窓に「CloudFront」と入力してCloudFrontのページを表示し、「CloudFrontディストリビューションを作成」をクリックします。

cl_2.jpg
「オリジンドメイン」をクリックするとS3で作成したバケットが出てくるので選択します。
そうすると「名前」の欄も自動で埋まります。

cl_3.jpg
「ビューワープロトコルポリシー」は「Redirect HTTP to HTTPS」を選択します。
これでhttpのアクセスもhttpsにリダイレクトしてくれます。

cl_4.jpg
「代替ドメイン名（CNAME）」に取得したドメイン名を入力します。
「カスタムSSL証明書」をクリックすると証明書一覧が出てくるので、先ほど作成した証明書を選択します。
選択すると「レガシークライアントサポート」などの新しい設定項目が表示されますがデフォルトのままで良いです。

cl_5.jpg
「デフォルトルートオブジェクト」にはS3のインデックスドキュメントで設定したのと同じファイル名を入力します。
今回の場合はindex.htmlです。
「ディストリビューションを作成」をクリックして作成します。

CloudFrontからページが表示できるか確認してみる

cl_6.jpg
ディストリビューションを作成するとデプロイ状態になり、デプロイには数分〜数十分程度の時間がかかります。
デプロイが完了したら、「最終変更日」がデプロイから日付に変わります。

では、この段階で「ディストリビューションドメイン名」に記載されているURLをアドレスバーに入力してみましょう。
S3にアップロードしたページが表示されていれば完了です。
これでS3とCloudFrontを紐付けることができました。

Route53でホストゾーンとCloudFrontを紐付ける

route9.jpg
いよいよ最後の仕上げです。
再びRoute53に戻って、最初に作成したホストゾーンのページから「レコードの作成」をクリックします。

route10.jpg
「トラフィックのルーティング先」のトグルスイッチをONにして、CloudFrontを選択し、枠が新しく表示されるので作成したCloudFrontディストリビューションを選択して「レコードを作成」をクリックします。

作成したディストリビューションが選択肢として出てこない場合、単純に反映が遅れているだけか、CloudFrontで「代替ドメイン名（CNAME）」の入力が正しくない可能性があります。

CloudFrontを使用せず公開したい場合はここでCloudFrontではなくS3のエンドポイントを設定すればOKです。

これで全ての作業が終わりました！
取得したドメインをブラウザで入力するとあなたのサイトが表示されます！
（筆者はレコードの作成からサイト反映まで10分程度かかりました）

さいごに

AWSは専門用語とカタカナばかりで慣れるまでは頭が痛くなりますね…
各サービスのドキュメントに目を通そうとしても、私たちが普段使っている日本語と同じ言語で書かれているとは到底思えません…

作成したポートフォリオの公開などで参考にしていただけたら嬉しいです。

誤字や脱字、発信した情報に間違い等ございましたらご指摘頂けますと幸いです:bow:

52
51
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
52
51