20220121 AWS Amplifyで運用した背景と結果 WEBサイトの構成について

2022/01/21 (金) JAWS PANKRATION 2021 ～振り返り～にて発表した登壇資料。
https://jaws-ug.doorkeeper.jp/events/130606

Transcript

1. AWS Amplifyで運用した背景と結果 WEBサイトの構成について Takumi Abe
2. メンバー紹介 リーダー Shigeru Oda Kohei Otani Takumi Abe
3. アジェンダ • AWS Amplify採用経緯 • リリースタイムライン • 実現できなかったこと • 費用やGoogle Analyticsの結果 • 今回の反省と総括
4. AWS Amplify採用の経緯 • DAYSからの反省 ◦ 登壇者情報掲載やニュースリリースを同じサイト上で実現&更新を自動化 したい ◦ 情報更新の際に他の人の編集が影響しないようにしたい
5. Shifter運用との比較 Shifter（Word Press）運用の場合 • メリット ◦ デザインテンプレートやプラグインが豊富 ◦ URLやOGP画像などをマニュアルで登録できる • デメリット ◦ 更新する際に作業中のすべてが本番反映される ▪ masterに直commitしてるイメージ ◦ 自動化に一苦労（PHPができれば問題なし？） master master master おっしゃ！！！ 更新できた まだ作業中だったの に！？ 一コマ劇場 一方その頃…
6. AWS Amplify採用の経緯 • DAYSからの反省 ◦ 登壇者情報掲載やニュースリリースを同じサイト上で実現&更新を自動化 したい ◦ 情報更新の際に他の人の編集が影響しないようにしたい フルスクラッチで作ってみたら全部行けるかも！？ であれば、Amplify使ってみよう！！！←ココ
7. 当初作ろうとしてたの構成
8. 当初作ろうとしてたの構成
9. 使用した技術 • Nuxt.js (2.15.x) • TailwindCSS • AWS Amplify
10. リリースタイムライン 8月中旬 初期プロジェクト作成 コンテンツをmarkdownで管理 10月上旬 サイトリリース 8月下旬 OGP設定 9月下旬 全体レイアウト調整 2ヶ国語対応（英語・日本語） 10月中旬 Google Analytics設置 newsページのprevnext設置 favicon設置 11月上旬 バーガーメニュー実装 タイムゾーン対応 各種リンク置き換え 11月上旬 newsページの言語切替実装 登壇者情報公開の半自動実装 タイムテーブル公開 11月中旬 newsページ言語切り替えバグ修正 newsページのprevnext修正 11月下旬 follow upページ作成 登壇者資料公開
11. リリースタイムライン 8月中旬 初期プロジェクト作成 コンテンツをmarkdownで管理 10月上旬 サイトリリース 8月下旬 OGP設定 9月下旬 全体レイアウト調整 2ヶ国語対応（英語・日本語） 10月中旬 Google Analytics設置 newsページのprevnext設置 favicon設置 11月上旬 バーガーメニュー実装 タイムゾーン対応 各種リンク置き換え 11月上旬 newsページの言語切替実装 登壇者情報公開の半自動実装 タイムテーブル公開 11月中旬 newsページ言語切り替えバグ修正 newsページのprevnext修正 11月下旬 follow upページ作成 登壇者資料公開
12. 2ヶ国語対応（英語・日本語） nuxt/i18n - 自動ルート生成や検索エンジン最適化、翻訳メッセージの遅延読み込みを実現 - コンポーネントごとに翻訳もできる - ただし、自動翻訳ではないため、翻訳文章を自身で用意する必要ある
13. 2ヶ国語対応（英語・日本語） 実装部分 日本語 英語
14. 配信コンテンツをmarkdownで管理 nuxt/content - GitベースのヘッドレスCMSとして機能する - Markdown、JSON、YAML、XML、CSVファイルといったファイルをMongoDBのAPI ような機能で扱える - Markdownの文章をそのままコンテンツとして展開できる
15. 配信コンテンツをmarkdownで管理 変数を設定でき、 呼び出せばvueファイル上で 判定条件などに利用可能 実際に公開してるニュース記事の 本文
16. 登壇者情報公開の半自動化 • nuxt/contentを使って、CSVの内容をインポートし変数に格納 • (レコード番号) -1 が配列番号になり、↑上記で格納した変数から対象の情報を取り出 す • 取り出した個々人の情報をHTMLに表現 CSVをアップロードするだけで、登壇者情報が更新できる
17. 登壇者情報公開の半自動化 ハードコーディングになったわけ - nuxt/contentの仕様のため - CSVの1レコード≠1つのJSON 参考：https://content.nuxtjs.org/ja/writing CSV Markdown
18. 実現できなかったこと • パンくずリストの設置 • GASでのAPI実装 • SNSへの自動投稿 • SNSシェアボタン • PDFプラグインの実装 • 国旗の自動更新 • テスト
19. 実現できなかったこと • パンくずリストの設置 • GASでのAPI実装 • SNSへの自動投稿 • SNSシェアボタン • PDFプラグインの実装 • 国旗の自動更新 • テスト
20. GASでのAPI実装をしなかった背景 • セキュリティについての調査時間不足 ◦ 個人情報（メアド、電話番号）を含む可能性もあったため • 回避パターン案 ◦ スプレッドシートに個人情報を持たせない ▪ 一番確実だが、手作業を必要としヒューマンエラーが発生する可能性あり ◦ スプレッドシート（Google）側でブロッキングできる？ ▪ 不確定事項が大きかった
21. 費用やGoogle Analyticsの結果 費用 2021.10 $9.89 ¥1126.9 2021.11 $13.05 ¥1486.9 合計 $22.94 ¥2613.8
22. 費用やGoogle Analyticsの結果 Google Analytics リクエストのあった国々（ ver 世界地図）
23. 費用やGoogle Analyticsの結果 Google Analytics リクエストのあった国々（ ver 世界地図）
24. 費用やGoogle Analyticsの結果 Google Analytics ページビューの変動 10.11~12.06
25. 今回の反省と総括 • Amplifyについて ◦ previewがすごく役立った ▪ リポジトリに入ってない人にも確認してもらいやすい （コレ自体がいいかどうかはさておき） ▪ ブランチごとにプレビューできるからレビューしやすい ◦ デプロイ爆速だった ▪ nuxt初期プロたてて、反映までが半日いらないのは神 ▪ ドメインなどの選定が完了していることが前提
26. 今回の反省と総括 • Amplifyについて ◦ previewがすごく役立った ▪ リポジトリに入ってない人にも確認してもらいやすい （コレ自体がいいかどうかはさておき） ▪ ブランチごとにプレビューできるからレビューしやすい ◦ デプロイ爆速だった ▪ nuxt初期プロたてて、反映までが半日いらないのは神 ▪ ドメインなどの選定が完了していることが前提 • デザイン案を早めに決めると動きやすい ◦ デザインの調整でかなり時間を食った • GASでのAPIできれば自動化にむけて敵なし ◦ セキュリティ事項だけ注意すれば大丈夫 ...と思う！ • Markdownファイルに呼び出しidつけて管理しても良かった ◦ 登壇者情報ページの概要だけ、レイアウトが崩れやすかった
27. メンバーへ Shigeru Oda Kohei Otani
28. 最後に... 応援いただきありがとうございました！！