Web品質・コスト・生産性に効く！サーバレス時代のWebサイト運用術｜ミツエーリンクスTSD

2021年7月にミツエーリンクスTSD公式サイトのオープンを記念して社内勉強会を開催しました。

フロントエンドの知識だけでもAWS AmplifyでJamstackアーキテクチャなWebサイトがかんたんに構築できたので、ノウハウやポイントを事例を通して話しました。

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

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

Transcript

1. Web品質 ・ コスト ・ 生産性に効く ！ サーバレス時代のWeb サイ ト運用術 ～バックエンドよくわからない元フロントエンドエンジニアでもわりとモダンなWebサイ ト作 れた～
2. はじめに
3. ミツエーリンクスTSD公式サイ トをAWS Amplifyで構築しま した https://tsd.mitsue.co.jp
4. ヘルシーなWebサイ ト ＝ 「Webサイ トのユーザー体験が優れているサイ ト」 https://web.dev/measure/
5. 当たり前品質を楽に担保したい ！ https://www.mitsue.co.jp/knowledge/column/20200403.html
6. 高品質 ・ 高頻度 ・ 高速度で開発を行うためのプラクティ ス https://aws.amazon.com/jp/modern-apps/
7. モダンアプリケーション開発を構成する要素とは モダンアプリケーション開発とは開発プロセスの各種部分および、 それらの間の遷移を自 動化することにより、 変化に迅速に対応することを実現するアーキテクチャ 自動的テスト 安全なリリース自動化 システムモニタリング 疎結合なアーキテクチャ
8. 注目のクラウドサービスAWS Ampify https://aws.amazon.com/jp/amplify/
9. 楽ヘルシーなWebサイ トを実現するため技術
10. 楽ヘルシーなWebサイ トを実現するアーキテクチャ https://jamstack.org/
11. ちまたでうわさのJamstackアーキテクチャ≒楽ヘルシーなユーザー体 験 https://www.netlify.com/jamstack/
12. Jamstackアーキテクチャの技術構成要素 https://www.netlify.com/jamstack/
13. ミツエーリンクスTSD公式サイ トのホスティ ング環境 ： Amplify Console 静的ウェブホスティ ングサービスにアクセスするためのフルマネージド型のツール
14. 気合と根性のWebサイ ト運用から開発者体験爆上がりの サイ ト運用になるまで
15. モダンじゃないWebサイ トの運用ワークフロー ブランチを切って、 ローカル環境で開発 手動でテストとチェ ックを実行 -> リソースを手動でビルド 差分を自力で抽出。 開発環境に更新差分をFTPツールでアップロード 開発環境上でチェ ックを依頼、 不備があれば上記のフローを繰り返し 本番環境へ更新差分をFTPツールでアップロード 問題点 featureブランチ単位で開発環境が構築できないので、 複数⼈数開発だと先祖返り が起きやすい ビルド、 コードチェ ック、 テストを⼿動で実⾏するのが⾯倒 差分抽出が⼿間
16. これを現在のアーキテクチャでやると… ！ ブランチを切ってローカル環境で開発 リポジト リへプッシュ Amplify上でビルド、 テスト、 デプロイ → 超かんたん ！ ！
17. 「Webサイ トの当たり前品質」 を実現する機能
18. 複数人数での開発機能 https://amplify-sns.workshop.aws/ja/70_multi_env/20_branch_autodetection.html
19. Branch autodetection 指定したブランチを検知し、 ホスティ ング環境を自動で構築する機能。 バックエンド環境につ いては、 既存のものを利用するか、 新規で都度作成するかを設定可能。 https://docs.aws.amazon.com/amplify/latest/userguide/pattern-based-feature- branch-deployments.html
20. Web Preview プルリクエストのプレビュー機能。 GitHubと連携し、 既存のフロントエンド環境から完全に 分離された特別なプレビュー用URLにデプロイされる。 https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/pr-previews.html
21. アクセスコントロールによるBasic認証 ブランチ単位でBasic認証の設定が可能。 https://docs.aws.amazon.com/amplify/latest/userguide/access-control.html
22. リダイレク ト フロントエンド環境ごとにBasic認証の設定が可能。 https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html
23. 環境変数 独自の環境変数が設定できるほか、 デフォルトの環境変数が利用可能。 たとえば、 ブランチ 名を取得する環境変数を利用すれば、 開発環境ではGA用のスクリプトを挿入しない、 など ブランチごとにソースコードを出し分けることが可能。 https://docs.aws.amazon.com/amplify/latest/userguide/environment- variables.html
24. モニタリング CloudWatchが組み込まれており、 とくに設定なしでサイ トの監視が可能。 https://docs.aws.amazon.com/amplify/latest/userguide/access-logs.html
25. ペラ1のWebサイ トをオウンドメディ アにするための技術 （今後の展望）
26. 足りない機能はサービスを追加する ミツエーリンクスTSD公式サイ トはペラ1のサイ トだが、 今後はオウンドメディ アとして進 化していく予定 マイクロサービスアーキテクチャなので、 機能拡張のためにはサービスを追加する方針
27. Amplify Admin UIを用いたオウンドメディ ア
28. Amazon Location Serviceの地図機能 https://aws.amazon.com/jp/location/
29. ほかにも、 AWSの技術を組み合わせてこんなことができそう ！ Amazon PinpointのAnalitics的な活用 メッセージの一斉送信、 顧客管理、 レスポンス分析のできるサービス Google Analytics的な使い方ができないか （ユーザー行動の収集など） Amazon Personalize アプリケーションを使用するユーザー向けに個別化したレコメンデーションを簡単 に追加できる、 開発者向けの機械学習サービス 関連リンク系ができそう Amazon Interactive Video Service (Amazon IVS) リアル配信プラッ トフォーム セミナーの配信など。 スト ックした動画は配置できるのか…？ などなど。 これからもミツエーリンクスTSD公式サイ トは進化します ！