複数リージョン間で利用可能なAWSサービスを比較出来るWebアプリを作ってみた。

※注:スライド内の構成図中のS3 BucketアイコンがGracierのものを使用しているのは間違いになります。

Transcript

1. 複数リージョン間で利用可能なAWSサービスを 比較出来るWebアプリを作ってみた。 複数リージョン間で利用可能なAWSサービスを 比較出来るWebアプリを作ってみた。 y.kato/aiseki/ブーチョ y.kato/aiseki/ブーチョ
2. もくじ もくじ デモ ＆ 触ってもらう。 デモ ＆ 触ってもらう。 自己紹介 自己紹介 発表内容+経緯 発表内容+経緯 インフラ、Webアプリ説明。 インフラ、Webアプリ説明。 意識した所など。 意識した所など。 提供サービス 比較 提供サービス 比較 EC2インスタンスタイプ 比較 EC2インスタンスタイプ 比較 RDS＿DBエンジンタイプ 比較 RDS＿DBエンジンタイプ 比較 ip_ranges.json 検索 ip_ranges.json 検索
3. 自己紹介
4. 名前 : かとう ゆうし (Yushi Kato) 居住地：北海道札幌市 好きなサービス : CloudFormation,CDK 好きな事 : スペースエイジインテリア収集 ひと言 : 那覇空港で乗り継ぎに失敗し10万円が天国にいきました。 音楽鑑賞(Black Music, 和物, アンビエント etc..) 名前 : かとう ゆうし (Yushi Kato) 居住地：北海道札幌市 好きなサービス : CloudFormation,CDK 好きな事 : スペースエイジインテリア収集 ひと言 : 那覇空港で乗り継ぎに失敗し10万円が天国にいきました。 音楽鑑賞(Black Music, 和物, アンビエント etc..) 自己紹介 自己紹介
5. 発表内容+経緯
6. 突然ですが、 突然ですが、
7. 発端↓ 「大阪リージョンって Code Pipeline 使えないの？？」 発端↓ 「大阪リージョンって Code Pipeline 使えないの？？」
8. ご存知の通り、リージョン間で提供しているサービスには 違いがありますが、皆さんどうやって確認していますか？？ ご存知の通り、リージョン間で提供しているサービスには 違いがありますが、皆さんどうやって確認していますか？？ ？ ？ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/
9. 実際に選択リージョンからサービスのページに飛ぶと 実際に選択リージョンからサービスのページに飛ぶと 「提供してないよ」と表示されますが..。 「提供してないよ」と表示されますが..。
10. https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ たぶんここ↓。 たぶんここ↓。
11. 2リージョンのサービスを パッと比較したい時って たまにありませんか？ 2リージョンのサービスを パッと比較したい時って たまにありませんか？
12. https://zenn.dev/mjxo/articles/3d72f4577a5c8e https://zenn.dev/mjxo/articles/3d72f4577a5c8e すごく昔にこんなブログを書いてました。 すごく昔にこんなブログを書いてました。
13. https://zenn.dev/mjxo/articles/3d72f4577a5c8e https://zenn.dev/mjxo/articles/3d72f4577a5c8e この時はエクセルにコピペして差分を眺めていただけ。 この時はエクセルにコピペして差分を眺めていただけ。
14. 少し前に、これを当時見てくださっていた方が、 TLで話題にしてくださいます。 少し前に、これを当時見てくださっていた方が、 TLで話題にしてくださいます。
15. たまにしか使わないだろうけど いつでも見られれば便利かも。 たまにしか使わないだろうけど いつでも見られれば便利かも。
16. VBAでつくってみました。 やろうと思えばSeleniumでスクレイピングも可能ですが マナー的にはちょっと。。 VBAでつくってみました。 やろうと思えばSeleniumでスクレイピングも可能ですが マナー的にはちょっと。。
17. こうも思いました。 こうも思いました。
18. CLIで情報引っ張ってこられないかも考えましたが.. CLIで情報引っ張ってこられないかも考えましたが.. 「リージョンでの提供サービス」とはちょっと違うようです。 「リージョンでの提供サービス」とはちょっと違うようです。 https://dev.classmethod.jp/articles/service-last-accessed-details/ https://dev.classmethod.jp/articles/service-last-accessed-details/
19. 「こんなのあるよ！」と教えていただきます。 「こんなのあるよ！」と教えていただきます。 https://zenn.dev/shimo_s3/articles/26200d8be2ea6d https://zenn.dev/shimo_s3/articles/26200d8be2ea6d https://zenn.dev/shimo_s3/articles/e1a3021cd263a7 https://zenn.dev/shimo_s3/articles/e1a3021cd263a7
20. 利用できるサービスがjsonでダウンロード可能。 利用できるサービスがjsonでダウンロード可能。 https://aws.amazon.com/jp/blogs/news/subscribe-to-aws-daily-feature-updates-via-amazon-sns/ https://aws.amazon.com/jp/blogs/news/subscribe-to-aws-daily-feature-updates-via-amazon-sns/
21. よし、じゃあ作ってみよう！ よし、じゃあ作ってみよう！
22. の前に、今更ですが の前に、今更ですが
23. 今日発表ひとりだったっけ 今日発表ひとりだったっけ ← ←
25. 自己紹介 自己紹介 名前 : いせき あつし (Atsushi Iseki) 居住地：北海道札幌市 好きなサービス : Gitlab, Supabase, セルフホスティングできるサービス/アプリ 好きな事 : 漫画/アニメ/ゲーム/OSのインストール/開発環境の構築/筋トレ/ワーケーション ひと言 : 火を点けろ、燃え残ったプロジェクト全てに 名前 : いせき あつし (Atsushi Iseki) 居住地：北海道札幌市 好きなサービス : Gitlab, Supabase, セルフホスティングできるサービス/アプリ 好きな事 : 漫画/アニメ/ゲーム/OSのインストール/開発環境の構築/筋トレ/ワーケーション ひと言 : 火を点けろ、燃え残ったプロジェクト全てに
26. 名前 : すだ たかむね (Takamune Suda) 居住地：北海道札幌市 好きなサービス : Firebase, Windy(天気予報) 好きな事 : 登山・パウダー(スノー)ハント・裁判傍聴 ひと言 : 先週末大雪山縦走してきました。 名前 : すだ たかむね (Takamune Suda) 居住地：北海道札幌市 好きなサービス : Firebase, Windy(天気予報) 好きな事 : 登山・パウダー(スノー)ハント・裁判傍聴 ひと言 : 先週末大雪山縦走してきました。 自己紹介 自己紹介
27. 僕達はオフラインイベントで たまたま外に出るタイミング が同じだったメンバーです！ 僕達はオフラインイベントで たまたま外に出るタイミング が同じだったメンバーです！
28. jaws札幌運営の方から登壇のお声かけ ↓ 発表内容決定 ↓ 二人で昼ごはん食べに行った時に話題に (一緒にやる事に) ↓ さっぽろオータムフェストで飲み会。 ↓ 意見感想聞かせてよーの流れで 手伝ってもらいみんなでやる事に。 jaws札幌運営の方から登壇のお声かけ ↓ 発表内容決定 ↓ 二人で昼ごはん食べに行った時に話題に (一緒にやる事に) ↓ さっぽろオータムフェストで飲み会。 ↓ 意見感想聞かせてよーの流れで 手伝ってもらいみんなでやる事に。
30. 今にして思えば私ひとりでは わずかな事しか出来なかったなと思います。 今にして思えば私ひとりでは わずかな事しか出来なかったなと思います。
31. インフラ・Webアプリ説明。
32. こんなものです①。 こんなものです①。
33. こんなものです②。 こんなものです②。
34. こんなものです③。 こんなものです③。
35. 今回cdkで最初に作成していたもの。 今回cdkで最初に作成していたもの。
36. 先ほどの.tsのざっくりした構成図 先ほどの.tsのざっくりした構成図
37. イベントブリッジ(cron)+ラムダで一日一回.jsonを取得 イベントブリッジ(cron)+ラムダで一日一回.jsonを取得 ←これだけBucketDeployment ←これだけBucketDeployment ※lambda、pythonあんまりわかってないマン ※lambda、pythonあんまりわかってないマン ※赤線のエラーはコイツ。 ※赤線のエラーはコイツ。
38. 静的WEBサイトホスティング？ 静的WEBサイトホスティング？
39. 静的WEBサイトホスティングを使った場合 S3BucketをOriginにしてCloudFrontからアクセスする場合、 ・静的Webサイトホスティングを有効化 ・ブロックパブリックアクセス(※以下BPA)を無効化 ・CloudFrontのオリジンには「バケットWebサイトエンドポイント」 (http)を指定([バケット名].s3-website-us-east-1.amazonaws.com) する(オリジンタイプは「S3 static website」) となるイメージ。 静的WEBサイトホスティングを使った場合 S3BucketをOriginにしてCloudFrontからアクセスする場合、 ・静的Webサイトホスティングを有効化 ・ブロックパブリックアクセス(※以下BPA)を無効化 ・CloudFrontのオリジンには「バケットWebサイトエンドポイント」 (http)を指定([バケット名].s3-website-us-east-1.amazonaws.com) する(オリジンタイプは「S3 static website」) となるイメージ。
40. AWS CDKにてCloudFront→S3の連携をしてくれそうな、 「@aws-solutions-constructs/aws-cloudfront-s3」を 利用してみた所、上記とは違い ①静的Webサイトホスティングを無効化 ②BPAを有効化 ③オリジンには 「[バケット名].s3.us-east-1.amazonaws.com」が設 定される。(オリジンタイプ「S3」となる。) ④CloudFrontFunctio側でhttpsecurityheaderを生成しBucketPolicy 側でallow ⑤CloudFront側に"DefaultRootObject": "index.html”が設定 AWS CDKにてCloudFront→S3の連携をしてくれそうな、 「@aws-solutions-constructs/aws-cloudfront-s3」を 利用してみた所、上記とは違い ①静的Webサイトホスティングを無効化 ②BPAを有効化 ③オリジンには 「[バケット名].s3.us-east-1.amazonaws.com」が設 定される。(オリジンタイプ「S3」となる。) ④CloudFrontFunctio側でhttpsecurityheaderを生成しBucketPolicy 側でallow ⑤CloudFront側に"DefaultRootObject": "index.html”が設定
41. websiteIndexDocumentという、 (CFnで言う所のWebsiteConfiguration>IndexDocument) 静的WEBサイトホスティングを設定する箇所を利用しないでも オリジンバケット直下にindex.htmlが存在させる事で正常表示される。 上記のようにアクセスが可能なら (CDKのコンストラクトでこちらがAWSの推奨する形として認められているなら) 静的WEBサイトホスティングの旨味ってそもそも何？？ websiteIndexDocumentという、 (CFnで言う所のWebsiteConfiguration>IndexDocument) 静的WEBサイトホスティングを設定する箇所を利用しないでも オリジンバケット直下にindex.htmlが存在させる事で正常表示される。 上記のようにアクセスが可能なら (CDKのコンストラクトでこちらがAWSの推奨する形として認められているなら) 静的WEBサイトホスティングの旨味ってそもそも何？？
42. https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html
43. ある方から、 「CloudFront を組み合わせない S3 だけで Web サイトをホスティングするケースは ほぼ無いと思います。 本当に軽量でアクセス数の少ないサイト、 たとえばファイルを渡すのみとか町内会の夏祭りご案内とか 考えようと思えばありそうですが、S3静的Webサイトホスティングを あえて選択しないでいいと思います。」 というコメントをいただきます。 つまり、静的WEBサイトホスティングはCloudFrontがあるなら採用しない。 そしてCloudFrontを使わないでやるメリットもない。 という事の様子。 ある方から、 「CloudFront を組み合わせない S3 だけで Web サイトをホスティングするケースは ほぼ無いと思います。 本当に軽量でアクセス数の少ないサイト、 たとえばファイルを渡すのみとか町内会の夏祭りご案内とか 考えようと思えばありそうですが、S3静的Webサイトホスティングを あえて選択しないでいいと思います。」 というコメントをいただきます。 つまり、静的WEBサイトホスティングはCloudFrontがあるなら採用しない。 そしてCloudFrontを使わないでやるメリットもない。 という事の様子。
44. ちなみに、aws-cloudfront-s3を使った場合... ちなみに、aws-cloudfront-s3を使った場合... OAC未対応のためOAIが適用されている。 OAC未対応のためOAIが適用されている。 OAC適用のために書き直してみた。 OAC適用のために書き直してみた。 ※LoggingBucket ×2関連を含まず。 細かい所確認してないので一旦↑のに戻した。 ※LoggingBucket ×2関連を含まず。 細かい所確認してないので一旦↑のに戻した。 [参考にした記事]https://zenn.dev/thyt_lab/articles/d6423c883882b7 [参考にした記事]https://zenn.dev/thyt_lab/articles/d6423c883882b7
45. とりあえずこれでのせてみようと思ったが、 とりあえずこれでのせてみようと思ったが、
46. Static Site Generation（SSG) したものをバケットにおいてみても上手く動作しない.. Static Site Generation（SSG) したものをバケットにおいてみても上手く動作しない..
47. ページ内リンクがAccess Deniedになる ページ内リンクがAccess Deniedになる Next.jsのデフォルトの設定の場合、next exportすると ファイル名に.htmlが付いた状態になる。 ↓ 対処が必要。 Next.jsのデフォルトの設定の場合、next exportすると ファイル名に.htmlが付いた状態になる。 ↓ 対処が必要。 CSPではインラインスクリプトは禁止されている。 ↓ 対処が必要。 CSPではインラインスクリプトは禁止されている。 ↓ 対処が必要。 Consoleにエラーが発生している。 Consoleにエラーが発生している。
48. 前日までに解決せず→コンテナに乗せてみるか？ 前日までに解決せず→コンテナに乗せてみるか？
49. L3(ecs_patterns)を使って書いてみた。200行程度 L3(ecs_patterns)を使って書いてみた。200行程度 「DockerImageAsset」を使っているので、 cdk deploy時にビルドも一緒にやってれくれる。 「DockerImageAsset」を使っているので、 cdk deploy時にビルドも一緒にやってれくれる。
50. 書きながら当然思ってましたが、 書きながら当然思ってましたが、
51. サイトを維持したからといって、 お金が入ってくる訳でもない(商業性がない)為、 「発表用にやってみました」なら良いが、 この構成を採用する事は絶対にない。 ALB,NatGW,Faargate,VPCEの料金 出来れば先ほどのS3の構成でやりたい。 サイトを維持したからといって、 お金が入ってくる訳でもない(商業性がない)為、 「発表用にやってみました」なら良いが、 この構成を採用する事は絶対にない。 ALB,NatGW,Faargate,VPCEの料金 出来れば先ほどのS3の構成でやりたい。
52. という所で、もうひとつ。。 という所で、もうひとつ。。
53. いせきくんからは↓のHobby(無償)プランでアプリの共有もらってました。 いせきくんからは↓のHobby(無償)プランでアプリの共有もらってました。 そもそもなんでAWSにのせたいんだっけ？？ これで良かったりする？ そもそもなんでAWSにのせたいんだっけ？？ これで良かったりする？
54. https://vercel.com/pricing https://vercel.com/pricing コレ。 コレ。
55. https://vercel.com/pricing https://vercel.com/pricing
56. (懇親会で、是非いろいろご意見、 アドバイスいただければ幸いです。) (懇親会で、是非いろいろご意見、 アドバイスいただければ幸いです。)
57. この他、 ・VPC Endpoints ・AWS Services integrated with Service Quotas ・Amazon SageMaker Instance Types ・Amazon Nimble Instance Types ・Amazon MSK Apache Kafka Versions のjson データがある為需要があれば拡張可能で す。( ご意見ください..!) この他、 ・VPC Endpoints ・AWS Services integrated with Service Quotas ・Amazon SageMaker Instance Types ・Amazon Nimble Instance Types ・Amazon MSK Apache Kafka Versions のjson データがある為需要があれば拡張可能で す。( ご意見ください..!)
58. デモ & 触ってもらう。
59. AWS_Multi_Region_Comparison (直訳:AWS複数リージョン比較) AWS_Multi_Region_Comparison (直訳:AWS複数リージョン比較) ロゴ ロゴ
60. (for PC) #jawsug #jawsug_sapporoにUP https://aws-service-utilities.vercel.app/ (for PC) #jawsug #jawsug_sapporoにUP https://aws-service-utilities.vercel.app/ スマホの方はこちら↑ (発表用なので後日変更になる可能性が有り〼) スマホの方はこちら↑ (発表用なので後日変更になる可能性が有り〼)
61. ありがとうございました。
62. EOF