Web サイトを独自ドメインで配信するには ～AWSサービスを使用しサーバレスで構築～

自己紹介 名前 中嶋 頌磨(なかしま しょうま) 所属 株式会社エーピーコミュニケーションズ 業務 ・AWS環境の運用・設計構築業務　 ・機能追加のテストやリリース作業 経歴 ・21新卒で教育業界へ就職 ・2022年8月にIT業界へ ・2022年11月にプロジェクトへアサイン

今回のLTに参加させて頂いたきっかけ 現場経験も半年が経ったか ら、一度LT枠で今までやって きた事話してみないか？ やります！！！ ・アウトプットすることで自身の理 解が深まるかも！ ・作業内で躓いたことは話のネ タにできそうかも！ ・話す内容は「静的ウェブサイトホスティ ング」の作業が使える！！ 私 上司

お客様からの依頼「静的ウェブサイトホスティング」 HTMLファイルをブラ ウザアクセスで開ける 簡単な構成を検証環 境に作って～ お客様 AWSのサービス使っ たらできそうじゃな い！？ あ！S3に格納したらできる んじゃないかな！？ そしたら、その方向で調査 進めてみましょう！

S3に加えて、 CloudFormation・Route53・ACM使ったら できんじゃん！！ 調査中・・・ 暗号化通信にできるし、URLも 任意のものにできるじゃん！

使用するAWSサービスについての説明 ・S3 ・Route53 ・CloudFront ・AWS Certificate Manager（ACM）

●S3 ・AWSが提供するオンラインストレージサービス ・大量のデータを保存することが出来る 　「htmlファイルを格納」 ・高い拡張性・耐久性や低コスト ●Route53 ・AWSが提供するフルマネージドなDNSサービス ・ドメイン登録・管理・運用 　「例）xxxxx.xxx.abcdefg.net」 ・DNS ルーティング機能 ・DNS ヘルスチェック機能

●CloudFront ・静的/動的なウェブコンテンツの配信速度を高速化させる ・Amazon S3 ウェブサイトのパフォーマンスを高めることがでる 　　・代替ドメインを設定できる ●AWS Certificate Manager（ACM） ・AWS のサービスと接続されたリソースを使用した SSL/TLS 証明書のプロビジョニングと管理 ・AWS でリソース管理をしていて、https 通信を 実行する際に使用 自動：https://zxcvbvbnn.cloudfront.net/ 代替：https://nakashima-test.abcdefg.net

①ドメインのIPアドレス教えて ③証明書と鍵返します ⓪証明書提供 ②証明書リクエスト検証 ユーザ ④鍵で暗号化されたリ クエストを投げる 暗号化されたhttps通信 S3バケット内のhtml ファイルを取得 代替ドメイン名にてアクセス ACM CloudFront Route53 S3 【静的ウェブサイトホスティング構築】 【AWS Cloud】

Route53 ACM S3 HTML CloudFront ユーザ 通信 【身近なものに置き換えて】 ～音楽ショップへライブDVDの買い物～

検証環境で構築する際に躓いた点 ①ACMの設定による躓き ②S3バケット名の設定による躓き

①ACMの設定による躓き ・原因：Route53にてドメインを登録したのち、ACMにて証明書を発行 　⇒発行時の完全修飾ドメイン名の設定値を「*.abcdefg.net」としなかったこと ・深掘り：「*.」を付けないとサブドメインに対応できなかった ⇒各種記事を参照した際にその記事を鵜呑みにしたことが今回の躓きの根本部分 ・今後の対応：情報収取の精度向上・詰まったら試す 　 ⇒記事を参照する際は、あくまで参考値とする 　 ⇒実際に検証環境で試し、精査し次に繋げていく abcdefg.net xxx.abcdefg.net zzz.abcdefg.net 独自ドメイン サブドメイン

②S3バケット名の設定による躓き ・ドメイン名とS3バケット名を同じにする必要があるという記事を参照 ⇒結論：同じでなくても問題なし！ ⇒問題点：S3バケット名はわかりやすよう、他の名前を付ける必要があった ・原因：ACMの設定ミスを引きずった事 ⇒参照した記事の設定がACMに「*.」を付与していなかったことがS3バケット名にも影響を及ぼした ⇒ドメイン名とS3バケット名を異なる設定にした記事は「*.」を付与 abcdefg.net abcdefg.net ドメイン名 S3バケット名 xxx.abcdefg.net S3-xxx-aaa ドメイン名 S3バケット名 ミス・・・。 これを作りたい

まとめ　 ●ドメインに関する知識が不足していた事 ●ACMの設定時に「*.」を付与しなかったことが、S3バケット名にも影響を出していた ●今回の構成は比較的AWS初学者向けの環境 ●手広くやるより、1つの事を深掘りしていく方が性に合っているかも 【参考URL】 https://www.kagoya.jp/howto/it-glossary/domain/web-01/ https://t-dilemma.info/static-website-hosting-by-aws-2020#Amazon_Route_53 https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html https://qiita.com/sugurutakahashi12345/items/bd99e6b32e4f5f0e8096 https://zenn.dev/wakkunn/articles/66a6e8372611dc