jawssonic2020_AWSサービスで_JAMStackの構築をしてみた.pdf

Transcript

1. AWSサービスで Jamstackの構築をしてみた #jawsug #jawssonic2020
2. Introduction Hisayuki Mori Community : JAWS-UG 名古屋, Facebook : 森 久由生 Twitter : @hisayuki_mori Blog : https://hisa-tech.site Favorite Service : Lambda, Fargate 2
3. JAWS-UG 名古屋支部 ◎ 現在運営メンバー10人 ◎ 内容はその月の担当者がやりたいこと ◎ 初心者向けから専門的なことまで幅広く ◦ 今年はハンズオン多め ◎ 最近はYoutubeにアーカイブしてます。 3 ◎ ほぼ毎月開催 ◦ 当月に大型イベントがなければ開催している ◦ 2020年は2,3月以外は今の所開催してます。 ◦ 2019年も2,4月以外は開催していた
4. アジェンダ ◎ Jamstackとは ◎ 最初の構成 ◎ AWSでの構成 ◎ 利用サービス紹介 ◎ まとめ 4
5. 1. Jamstackとは？ 5
6. そもそもJamstackの基準って？
7. Jamstackとは？ ◎ Webサイト やWeb Application を 構築するため の新しいアーキテクチャ ◦ とはいえもう数年経っている ◦ 提唱しているのはNetlifyのCEO ◎ JavaScript, APIs, Markup のStack ◦ ClientのJavascript ◦ BackendはAPIのみでのアクセス ◦ Build Toolで構築済みのHTML 7
8. 新しいっけ・・・？
9. この構成、特に目新しくないですよね
10. Jamstackじゃない ◎ CMSなどViewの部分もServersideが処理してい る ◦ Headless CMS等のAPIでデータの送受信のみをしている場合は例外 ◎ Viewの部分がServersideに依存する MonolithicなApplication ◎ ViewをSSRで処理して表示しているApplication 10
11. Jamstack Best Practices Entire Project on a CDN ServerSideに依存をさせないため、 全てがCDNに配置できる状態であ ること。 Everything Lives in Git だれがGit cloneしても動く状態であ ること。動作させるための手順があ り、Build＆Local Testが可能である こと。 Modern Build Tools 新しいBuild Toolでも対応できるこ と。 Automated Builds 事前Build済みのHTMLをDeployす るため、常Build処理を自動化する ことでBuild&Deployのプロセスの負 荷を下げる。 Atomic Deploys 不整合を起こさないように、全てを Build、全てをDeploy。差分Deploy はせず、全てUploadするまで更新 はしない。 Instant Cache Invalidation Build&DeployでCDNに最新版を配 布するので、当然そのタイミングで CDNのCasheは消しましょう。 11 すべてを網羅する必要はない
12. 2. 最初の構成 12
13. 最初の構成 13 GIT BUILD＆SSG API Function DEPLOY＆HOSTING＆CDN Identity
14. “ こいつが強い 14
15. 3. AWSでの構成 15
16. AWSでの構成 16 GIT BUILD＆SSG API DEPLOY＆HOSTING＆CDN REST GraphQL CLI SDK 登場サービス多い もうちょいスマートにしたい
17. AWS Cloud 17 多分こんな感じ（静的サイトのキャッシュクリア） Git push Cache clear deploy build hook めんどい ＊やったことないけど
18. ここですごい子が現れる
19. “ Amplify Console 19 Console
20. 4. 利用サービス紹介 20
21. 4. 利用サービス紹介 21 Amplify Consoleの紹介
22. Amplify Consoleの紹介 ◎ RemoteRepositoryの更新検知 ◦ Brunchごとにパイプラインが作れる ◎ 最初からhttps ◦ Certificate Managerで証明書取らなくていい ◎ カスタムドメイン設定可能 ◦ Route53の設定不要 ◎ CDNをデフォルト搭載 ◦ CloudFront不要 ◦ Deploy時にキャッシュクリア ◎ Buildごとのバージョン管理されている ◦ すぐに前バージョンへのロールバックが可能 22
23. “ ほぼ同じ機能のサービスを 見たことある気がする 23
24. Jamstackの視点では
25. JAMSTack Best Practices Entire Project on a CDN Amplify Console Everything Lives in Git Code Commit でも、ConsoleはGithubのイベント拾え る Modern Build Tools ツールの問題なのでなし Automated Builds Amplify Console Atomic Deploys Amplify Console Instant Cache Invalidation Amplify Console 25
26. “ JAMSTack Best Practicesを 4つもクリア！！ 26 Console
27. “ Amplify Console すごい子！！！ 27 Console
28. “ Post Netlify!!!! 28 Console
29. “ とはいえ 29
30. Amplify Consoleの弱いところ ◎ 通知系がちょっと弱い ◦ Build通知はあるけど、Deploy通知がデフォルトではない ◦ 通知種類がメールのみ ◉ まぁLambdaを使ったSlack通知方法は調べると出てくる ◎ API部分はCLIからの操作のみかな？ ◦ LambdaやAppSyncもGithub Pushでdeployされるのかな？ ◉ ここは自分の調査不足でなんとかなるところかもしれない ◎ 初回1年しか無料枠がない ◦ 1年過ぎたあとは従量課金 30
31. 現実の構成
32. AWSの構成 32 GIT CLI Console API REST GraphQL BUILD＆SSG Console DEPLOY＆HOSTING＆CDN
33. 5. まとめ 33
34. まとめ ◎ Jamstackそのものは特に新しいものではない ◎ Amplify Consoleの登場で静的サイト公開が更に 楽になった ◎ なので、Amplify Consoleの登場でAWSと Jamstackの親和性が更に高くなった ◦ Amplify Console一つでBest Practicesの6つのうち4つを網羅できる 34
35. Thanks! ご清聴ありがとうございました 35 24時間本当にお疲れさまでした！