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

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

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

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

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

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. ご静聴ありがとうございました！