Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX指標・Web品質、コスト、生産性に効く!サーバレス時代のWebサイト運用術 ーAWS Amplify超入門ー|ミツエーリンクスTSD

UX指標・Web品質、コスト、生産性に効く!サーバレス時代のWebサイト運用術 ーAWS Amplify超入門ー|ミツエーリンクスTSD

コンセプトは「楽ヘルシーなWebサイト」

ヘルシーなWebサイトを楽に実現する仕組みと、AWS Amplifyについてまとめました。


ミツエーリンクスTSDのエンジニアリングについて発信しています。
エンジニア積極採用中!
TSD公式エンジニアブログ TSD CoLab

株式会社ミツエーリンクスTSD

F1bcf74c372e3d1b68834eef7163063c?s=128

ミツエーリンクスTSD

December 14, 2021
Tweet

More Decks by ミツエーリンクスTSD

Other Decks in Technology

Transcript

  1. \UX指標・Web品質、コスト、生産性に効く!!/ サーバレス時代のWebサイト運用術 ーAWS Amplify超入門ー

  2. コンセプトは 「楽ヘルシーなWebサイト」 Webサイトの健全性(Healthy Site)を示す重要指標として注目される Web Vitals UX品質の最適化は、あらゆるWebサイトにとって長期的な成功の秘訣 でもWebサイトで優れたユーザ体験を実現するために、 がんばりすぎる必要はないと思う イマドキのWebサイトのヘルシーは、

    ユーザにも開発者にも、おいしく、楽しく、カンタンに
  3. ヘルシーなWebサイトとは? 優れたユーザー体験を実現するためWebサイトの構成要素(Web Vitals) https://web.dev/measure/ Webサイトのユーザー体験が優れているサイト

  4. 当たり前品質を楽に担保したい! https://www.mitsue.co.jp/knowledge/column/20200403.html

  5. 「優れたユーザー体験」を実現するための要素を常に向上させるには がんばらなくても継続的に改善するためには仕組みが必要 アプリケーションの成長を加速させるイノベーションフライホイール https://speakerdeck.com/track3jyo/kontenasabaresuwoshi-ebamodanapurikesiyonninarimasuka?slide=9

  6. 高品質・高頻度・高速で開発を行うためのプラクティス https://aws.amazon.com/jp/amplify/hosting/

  7. モダンアプリケーション開発を構成する要素 自動 テスト リリース 自動化 システム モニタリ ング 疎結合な アーキテ

    クチャ
  8. 楽ヘルシーなWebサイトを実現するアーキテクチャ https://jamstack.org/

  9. ちまたでうわさのJamstack≒楽ヘルシーなユーザー体験 高速・安全・スケーラブルなWeb体験を、 従業員や開発者が無理せず継続的に提供できる仕組み https://www.netlify.com/jamstack/ 1. 高速化 2.安全性 3.スケーラブル 4.従業員体験& 開発者体験

  10. Jamstackアーキテクチャの技術構成要素 事前にデータを埋め込んだ静的HTMLをCDNで配信し、 APIを通じて動的コンテンツを扱うアーキテクチャ https://www.netlify.com/jamstack/ 1. サーバレスで静的サイトをホスティング 2.リリースプロセスの自動化 3. マイクロサービス化

  11. Jamstackを実現するプラットフォーム「AWS Amplify」 https://aws.amazon.com/jp/amplify/

  12. なぜAWS Amplifyなのか? AWS Amplifyにはトータルエクスペリエンスを 向上させるための機能が揃っている https://www.netlify.com/jamstack/ 1. 高速化 2.安全性 3.スケーラブル

    4.従業員体験& 開発者体験
  13. AWS Amplifyとは CDNつき静的Webサイトホスティングと、それを安全・安心に公開更新する ためのリリースプロセス自動化がワンセットになったサービス 開発のための機能 配信のための機能 管理のための機能 • 認証、データベース、 プッシュサービスな

    ど、関連サービスと の連携 • UIコンポーネント • バックエンドの設定 • ホスティング • モニタリング • ユーザー管理 • コンテンツ管理
  14. AmplifyがWebサイトに効くポイント①:CDNつき静的配信サイトホスティング サーバレスでセキュアな静的Webサイト配信環境で、 高速・安全・グローバルに配信 Amazon CloudFront Amazon S3 常時SSL

  15. AmplifyがWebサイトに効くポイント②:スケーラブルでかんたんに拡張 AWSのほかのサービスと連携し、 複雑な要件でも安全かつ簡単に拡張可能 https://aws.amazon.com/jp/products/

  16. AmplifyがWebサイトに効くポイント③:リリースプロセス自動化の仕組み リリースまでのCI/CDパイプラインがフルマネージドで提 供され、開発者体験の向上につながる ソースコード 管理 ビルド テスト デプロイ

  17. AmplifyがWebサイトに効くポイント④:サーバレスで低コスト インフラ管理のあらゆるコストをカット & 従量課金制で使った分だけ料金支払い https://aws.amazon.com/jp/aws-ten-reasons/

  18. 企業Webの課題を解決するAWS Amplifyのベネフィット https://web.dev/measure/ Amplifyを活用することで、最小限の努力で 「ヘルシーWebサイト」を継続的に実現可能

  19. 気合と根性のWebサイト運用から 楽ヘルシーなWebサイト運用になるまで

  20. ミツエーリンクスTSD公式サイトをAWS Amplifyで構築しました https://tsd.mitsue.co.jp/

  21. モダンじゃないWebサイトの運用ワークフロー モダンじゃないWebサイトの運用ワークフロー • ブランチを切って、ローカル環境で開発 • 手動でテストとチェックを実行 -> リソースを手動でビルド • 差分を自力で抽出。開発環境に更新差分をFTPツールでアップロード

    • 開発環境上でチェックを依頼、不備があれば上記のフローを繰り返し • 本番環境へ更新差分をFTPツールでアップロード 問題点 • featureブランチ単位で開発環境が構築できないので、複数人数開発だと 先祖返りが起きやすい • ビルド、コードチェック、テストを手動で実行するのが面倒 • 差分抽出が手間
  22. TSD公式サイトのリリースプロセス ソースコード 管理 ビルド テスト デプロイ • ソースコードの準備 を行うフェーズ •

    バージョン管理 • ブランチ管理 • ソースコードレ ビュー • 編集したソース コードをブラウザ で表示可能な状態 するフェーズ • コンパイルや、静 的HTMLをしたり 生成する • ソースコードの品質 が損なわれていない かを機械的にチェッ クする作業 • アクセシビリティ チェックやテキス トチェック、E2Eテ ストなど • Webサイトを配信す るフェーズ • 開発環境と本番環境 に分かれている 自動化
  23. ミツエーリンクスTSDのJamstackアーキテクチャの更新フロー

  24. 複数人数での開発環境 https://amplify-sns.workshop.aws/ja/70_multi_env/20_branch_autodetection.html

  25. ファイルの追加(GitHub)

  26. ビルド開始

  27. テスト

  28. デプロイ

  29. サイボウズさまによる、コンテンツのMarkdown管理の実践例 コンテンツをMarkdownで管理し、 ビルドでHTMLへ出力する構成 https://blog.cybozu.io/entry/2018/09/21/080000

  30. Amplifyの基本機能:リダイレクト

  31. Amplifyの基本機能:モニタリング

  32. Amplifyの基本機能:ドメイン管理

  33. Amplifyの基本機能:アクセスコントロール

  34. Amazon Location Serviceによる地図表示(Amplify GEO)

  35. Amplify Admin UI(管理画面サービス)

  36. Amplify Admin UIについてはこちらのスライドで! https://speakerdeck.com/mlctsd/amplify-admin-uichao-ru-men-mituerinkusutsdmian-qiang-hui-zi-liao

  37. まとめ 40

  38. AWS AmplifyとAWSが提供する各種サービス、もしくは 外部サービスとの組み合わせが「楽に」 ヘルシーなWebサイトを構築するソリューションのひとつ 楽にヘルシーなWebサイトを実現するアーキテクチャとは https://aws.amazon.com/jp/products/

  39. 「Jamstack効果」で「楽ヘルシー」なWebサイト 楽ヘルシーなWebサイトで ユーザも開発者も、みんな幸せに!!

  40. ご静聴ありがとうございました!