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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

もくじもくじデモ＆触ってもらう。デモ＆触ってもらう。自己紹介自己紹介発表内容+経緯発表内容+経緯インフラ、Webアプリ説明。インフラ、Webアプリ説明。意識した所など。意識した所など。提供サービス比較提供サービス比較 EC2インスタンスタイプ比較 EC2インスタンスタイプ比較 RDS＿DBエンジンタイプ比較 RDS＿DBエンジンタイプ比較 ip_ranges.json 検索 ip_ranges.json 検索

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

名前 : かとうゆうし (Yushi Kato) 居住地：北海道札幌市好きなサービス : CloudFormation,CDK 好きな事 : スペースエイジインテリア収集ひと言 : 那覇空港で乗り継ぎに失敗し10万円が天国にいきました。音楽鑑賞(Black Music, 和物, アンビエント etc..) 名前 : かとうゆうし (Yushi Kato) 居住地：北海道札幌市好きなサービス : CloudFormation,CDK 好きな事 : スペースエイジインテリア収集ひと言 : 那覇空港で乗り継ぎに失敗し10万円が天国にいきました。音楽鑑賞(Black Music, 和物, アンビエント etc..) 自己紹介自己紹介

Slide 5

Slide 5 text

発表内容+経緯

Slide 6

Slide 6 text

突然ですが、突然ですが、

Slide 7

Slide 7 text

発端↓ 「大阪リージョンって Code Pipeline 使えないの？？」発端↓ 「大阪リージョンって Code Pipeline 使えないの？？」

Slide 8

Slide 8 text

ご存知の通り、リージョン間で提供しているサービスには違いがありますが、皆さんどうやって確認していますか？？ご存知の通り、リージョン間で提供しているサービスには違いがありますが、皆さんどうやって確認していますか？？？？ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/

Slide 9

Slide 9 text

実際に選択リージョンからサービスのページに飛ぶと実際に選択リージョンからサービスのページに飛ぶと「提供してないよ」と表示されますが..。「提供してないよ」と表示されますが..。

Slide 10

Slide 10 text

https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ https://aws.amazon.com/jp/about-aws/global-infrastructure/regional-product-services/ たぶんここ↓。たぶんここ↓。

Slide 11

Slide 11 text

2リージョンのサービスをパッと比較したい時ってたまにありませんか？ 2リージョンのサービスをパッと比較したい時ってたまにありませんか？

Slide 12

Slide 12 text

https://zenn.dev/mjxo/articles/3d72f4577a5c8e https://zenn.dev/mjxo/articles/3d72f4577a5c8e すごく昔にこんなブログを書いてました。すごく昔にこんなブログを書いてました。

Slide 13

Slide 13 text

https://zenn.dev/mjxo/articles/3d72f4577a5c8e https://zenn.dev/mjxo/articles/3d72f4577a5c8e この時はエクセルにコピペして差分を眺めていただけ。この時はエクセルにコピペして差分を眺めていただけ。

Slide 14

Slide 14 text

少し前に、これを当時見てくださっていた方が、 TLで話題にしてくださいます。少し前に、これを当時見てくださっていた方が、 TLで話題にしてくださいます。

Slide 15

Slide 15 text

たまにしか使わないだろうけどいつでも見られれば便利かも。たまにしか使わないだろうけどいつでも見られれば便利かも。

Slide 16

Slide 16 text

VBAでつくってみました。やろうと思えばSeleniumでスクレイピングも可能ですがマナー的にはちょっと。。 VBAでつくってみました。やろうと思えばSeleniumでスクレイピングも可能ですがマナー的にはちょっと。。

Slide 17

Slide 17 text

こうも思いました。こうも思いました。

Slide 18

Slide 18 text

CLIで情報引っ張ってこられないかも考えましたが.. CLIで情報引っ張ってこられないかも考えましたが.. 「リージョンでの提供サービス」とはちょっと違うようです。「リージョンでの提供サービス」とはちょっと違うようです。 https://dev.classmethod.jp/articles/service-last-accessed-details/ https://dev.classmethod.jp/articles/service-last-accessed-details/

Slide 19

Slide 19 text

「こんなのあるよ！」と教えていただきます。「こんなのあるよ！」と教えていただきます。 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

Slide 20

Slide 20 text

利用できるサービスが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/

Slide 21

Slide 21 text

よし、じゃあ作ってみよう！よし、じゃあ作ってみよう！

Slide 22

Slide 22 text

の前に、今更ですがの前に、今更ですが

Slide 23

Slide 23 text

今日発表ひとりだったっけ今日発表ひとりだったっけ ← ←

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

自己紹介自己紹介名前 : いせきあつし (Atsushi Iseki) 居住地：北海道札幌市好きなサービス : Gitlab, Supabase, セルフホスティングできるサービス/アプリ好きな事 : 漫画/アニメ/ゲーム/OSのインストール/開発環境の構築/筋トレ/ワーケーションひと言 : 火を点けろ、燃え残ったプロジェクト全てに名前 : いせきあつし (Atsushi Iseki) 居住地：北海道札幌市好きなサービス : Gitlab, Supabase, セルフホスティングできるサービス/アプリ好きな事 : 漫画/アニメ/ゲーム/OSのインストール/開発環境の構築/筋トレ/ワーケーションひと言 : 火を点けろ、燃え残ったプロジェクト全てに

Slide 26

Slide 26 text

名前 : すだたかむね (Takamune Suda) 居住地：北海道札幌市好きなサービス : Firebase, Windy(天気予報) 好きな事 : 登山・パウダー(スノー)ハント・裁判傍聴ひと言 : 先週末大雪山縦走してきました。名前 : すだたかむね (Takamune Suda) 居住地：北海道札幌市好きなサービス : Firebase, Windy(天気予報) 好きな事 : 登山・パウダー(スノー)ハント・裁判傍聴ひと言 : 先週末大雪山縦走してきました。自己紹介自己紹介

Slide 27

Slide 27 text

僕達はオフラインイベントでたまたま外に出るタイミングが同じだったメンバーです！僕達はオフラインイベントでたまたま外に出るタイミングが同じだったメンバーです！

Slide 28

Slide 28 text

jaws札幌運営の方から登壇のお声かけ ↓ 発表内容決定 ↓ 二人で昼ごはん食べに行った時に話題に (一緒にやる事に) ↓ さっぽろオータムフェストで飲み会。 ↓ 意見感想聞かせてよーの流れで手伝ってもらいみんなでやる事に。 jaws札幌運営の方から登壇のお声かけ ↓ 発表内容決定 ↓ 二人で昼ごはん食べに行った時に話題に (一緒にやる事に) ↓ さっぽろオータムフェストで飲み会。 ↓ 意見感想聞かせてよーの流れで手伝ってもらいみんなでやる事に。

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

今にして思えば私ひとりではわずかな事しか出来なかったなと思います。今にして思えば私ひとりではわずかな事しか出来なかったなと思います。

Slide 31

Slide 31 text

インフラ・Webアプリ説明。

Slide 32

Slide 32 text

こんなものです①。こんなものです①。

Slide 33

Slide 33 text

こんなものです②。こんなものです②。

Slide 34

Slide 34 text

こんなものです③。こんなものです③。

Slide 35

Slide 35 text

今回cdkで最初に作成していたもの。今回cdkで最初に作成していたもの。

Slide 36

Slide 36 text

先ほどの.tsのざっくりした構成図先ほどの.tsのざっくりした構成図

Slide 37

Slide 37 text

イベントブリッジ(cron)+ラムダで一日一回.jsonを取得イベントブリッジ(cron)+ラムダで一日一回.jsonを取得 ←これだけBucketDeployment ←これだけBucketDeployment ※lambda、pythonあんまりわかってないマン ※lambda、pythonあんまりわかってないマン ※赤線のエラーはコイツ。 ※赤線のエラーはコイツ。

Slide 38

Slide 38 text

静的WEBサイトホスティング？静的WEBサイトホスティング？

Slide 39

Slide 39 text

静的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」) となるイメージ。

Slide 40

Slide 40 text

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”が設定

Slide 41

Slide 41 text

websiteIndexDocumentという、 (CFnで言う所のWebsiteConfiguration>IndexDocument) 静的WEBサイトホスティングを設定する箇所を利用しないでもオリジンバケット直下にindex.htmlが存在させる事で正常表示される。上記のようにアクセスが可能なら (CDKのコンストラクトでこちらがAWSの推奨する形として認められているなら) 静的WEBサイトホスティングの旨味ってそもそも何？？ websiteIndexDocumentという、 (CFnで言う所のWebsiteConfiguration>IndexDocument) 静的WEBサイトホスティングを設定する箇所を利用しないでもオリジンバケット直下にindex.htmlが存在させる事で正常表示される。上記のようにアクセスが可能なら (CDKのコンストラクトでこちらがAWSの推奨する形として認められているなら) 静的WEBサイトホスティングの旨味ってそもそも何？？

Slide 42

Slide 42 text

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html

Slide 43

Slide 43 text

ある方から、「CloudFront を組み合わせない S3 だけで Web サイトをホスティングするケースはほぼ無いと思います。本当に軽量でアクセス数の少ないサイト、たとえばファイルを渡すのみとか町内会の夏祭りご案内とか考えようと思えばありそうですが、S3静的Webサイトホスティングをあえて選択しないでいいと思います。」というコメントをいただきます。つまり、静的WEBサイトホスティングはCloudFrontがあるなら採用しない。そしてCloudFrontを使わないでやるメリットもない。という事の様子。ある方から、「CloudFront を組み合わせない S3 だけで Web サイトをホスティングするケースはほぼ無いと思います。本当に軽量でアクセス数の少ないサイト、たとえばファイルを渡すのみとか町内会の夏祭りご案内とか考えようと思えばありそうですが、S3静的Webサイトホスティングをあえて選択しないでいいと思います。」というコメントをいただきます。つまり、静的WEBサイトホスティングはCloudFrontがあるなら採用しない。そしてCloudFrontを使わないでやるメリットもない。という事の様子。

Slide 44

Slide 44 text

ちなみに、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

Slide 45

Slide 45 text

とりあえずこれでのせてみようと思ったが、とりあえずこれでのせてみようと思ったが、

Slide 46

Slide 46 text

Static Site Generation（SSG) したものをバケットにおいてみても上手く動作しない.. Static Site Generation（SSG) したものをバケットにおいてみても上手く動作しない..

Slide 47

Slide 47 text

ページ内リンクがAccess Deniedになるページ内リンクがAccess Deniedになる Next.jsのデフォルトの設定の場合、next exportするとファイル名に.htmlが付いた状態になる。 ↓ 対処が必要。 Next.jsのデフォルトの設定の場合、next exportするとファイル名に.htmlが付いた状態になる。 ↓ 対処が必要。 CSPではインラインスクリプトは禁止されている。 ↓ 対処が必要。 CSPではインラインスクリプトは禁止されている。 ↓ 対処が必要。 Consoleにエラーが発生している。 Consoleにエラーが発生している。

Slide 48

Slide 48 text

前日までに解決せず→コンテナに乗せてみるか？前日までに解決せず→コンテナに乗せてみるか？

Slide 49

Slide 49 text

L3(ecs_patterns)を使って書いてみた。200行程度 L3(ecs_patterns)を使って書いてみた。200行程度「DockerImageAsset」を使っているので、 cdk deploy時にビルドも一緒にやってれくれる。「DockerImageAsset」を使っているので、 cdk deploy時にビルドも一緒にやってれくれる。

Slide 50

Slide 50 text

書きながら当然思ってましたが、書きながら当然思ってましたが、

Slide 51

Slide 51 text

サイトを維持したからといって、お金が入ってくる訳でもない(商業性がない)為、「発表用にやってみました」なら良いが、この構成を採用する事は絶対にない。 ALB,NatGW,Faargate,VPCEの料金出来れば先ほどのS3の構成でやりたい。サイトを維持したからといって、お金が入ってくる訳でもない(商業性がない)為、「発表用にやってみました」なら良いが、この構成を採用する事は絶対にない。 ALB,NatGW,Faargate,VPCEの料金出来れば先ほどのS3の構成でやりたい。

Slide 52

Slide 52 text

という所で、もうひとつ。。という所で、もうひとつ。。

Slide 53

Slide 53 text

いせきくんからは↓のHobby(無償)プランでアプリの共有もらってました。いせきくんからは↓のHobby(無償)プランでアプリの共有もらってました。そもそもなんでAWSにのせたいんだっけ？？これで良かったりする？そもそもなんでAWSにのせたいんだっけ？？これで良かったりする？

Slide 54

Slide 54 text

https://vercel.com/pricing https://vercel.com/pricing コレ。コレ。

Slide 55

Slide 55 text

https://vercel.com/pricing https://vercel.com/pricing

Slide 56

Slide 56 text

(懇親会で、是非いろいろご意見、アドバイスいただければ幸いです。) (懇親会で、是非いろいろご意見、アドバイスいただければ幸いです。)

Slide 57

Slide 57 text

この他、・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 データがある為需要があれば拡張可能です。( ご意見ください..!)

Slide 58

Slide 58 text

デモ & 触ってもらう。

Slide 59

Slide 59 text

AWS_Multi_Region_Comparison (直訳:AWS複数リージョン比較) AWS_Multi_Region_Comparison (直訳:AWS複数リージョン比較) ロゴロゴ

Slide 60

Slide 60 text

(for PC) #jawsug #jawsug_sapporoにUP https://aws-service-utilities.vercel.app/ (for PC) #jawsug #jawsug_sapporoにUP https://aws-service-utilities.vercel.app/ スマホの方はこちら↑ (発表用なので後日変更になる可能性が有り〼) スマホの方はこちら↑ (発表用なので後日変更になる可能性が有り〼)