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

25325b405f9ca72c4c8024727c41cb98?s=47 mori-hisayuki
September 15, 2020

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

25325b405f9ca72c4c8024727c41cb98?s=128

mori-hisayuki

September 15, 2020
Tweet

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時間本当にお疲れさまでした!