$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20220121 AWS Amplifyで運用した背景と結果 WEBサイトの構成について
Search
Takumi Abe
January 22, 2023
Technology
0
99
20220121 AWS Amplifyで運用した背景と結果 WEBサイトの構成について
2022/01/21 (金) JAWS PANKRATION 2021 ~振り返り~にて発表した登壇資料。
https://jaws-ug.doorkeeper.jp/events/130606
Takumi Abe
January 22, 2023
Tweet
Share
More Decks by Takumi Abe
See All by Takumi Abe
241116 Momento CacheみたいなのをAWSだけでできないか考えてみた
east_takumi
0
5
241012 おらたちに力をわけてくれ!!JAWS FESTA 2023から1年、地方とコミュニティのこれからを語り合いたい!
east_takumi
0
130
241004_JAWSPANKRATION2024-オペレーションの振り返り
east_takumi
0
14
240803 Webエンジニアが_One_Observability_Workshop_から始めるO11y.pdf
east_takumi
0
28
240601 最近GAしたAI Gatewayってなんだ?
east_takumi
0
9
240516「のうさば」から紐解く サメの郷土料理のお話
east_takumi
0
61
240423 CloudFrontのOACが Lambda Functions URLに対応!! ...って何が嬉しいの?
east_takumi
0
30
新卒から4年重ねて持ってる荷物をおろしたい
east_takumi
0
140
231207 主催をしたいまだからこそ言いたい!これからは「コミュニティ」だ!
east_takumi
0
47
Other Decks in Technology
See All in Technology
セキュリティベンダー/ユーザー双方の視点で語る、 Attack Surface Managementの実践 - Finatextパート / cloudnative-architecture-of-asm
stajima
0
2.5k
Kubernetesを知る
logica0419
15
3.8k
Entra ID の基礎(Japan Microsoft 365 コミュニティ カンファレンス 2024)
murachiakira
3
1.9k
プルリクが全てじゃない!実は喜ばれるOSS貢献の方法8選
tkikuc
15
2.1k
Bytebaseで実現する データベース管理の効率化
shogo452
1
130
レガシーシステムへのDatadog APM導入奮闘記
mtakeya4062
0
130
ONNX推論クレートの比較と実装奮闘記
emergent
0
250
4年で17倍に成長したエンジニア組織を支えるアーキテクチャの過去と未来
sansantech
PRO
1
4.6k
Engineer Recruting Deck
siva_official
PRO
1
3.1k
TypeScript100%で作るMovable Typeプラグイン
usualoma
2
260
RAMP2024
takeyukitamura
3
220
Microsoft 365と開発者ツールの素敵な関係
kkamegawa
1
1.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Unsuck your backbone
ammeep
669
57k
Done Done
chrislema
181
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
1
210
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Visualization
eitanlees
145
15k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
0
49
[RailsConf 2023] Rails as a piece of cake
palkan
52
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Transcript
AWS Amplifyで運用した背景と結果 WEBサイトの構成について Takumi Abe
メンバー紹介 リーダー Shigeru Oda Kohei Otani Takumi Abe
アジェンダ • AWS Amplify採用経緯 • リリースタイムライン • 実現できなかったこと • 費用やGoogle
Analyticsの結果 • 今回の反省と総括
AWS Amplify採用の経緯 • DAYSからの反省 ◦ 登壇者情報掲載やニュースリリースを同じサイト上で実現&更新を自動化 したい ◦ 情報更新の際に他の人の編集が影響しないようにしたい
Shifter運用との比較 Shifter(Word Press)運用の場合 • メリット ◦ デザインテンプレートやプラグインが豊富 ◦ URLやOGP画像などをマニュアルで登録できる •
デメリット ◦ 更新する際に作業中のすべてが本番反映される ▪ masterに直commitしてるイメージ ◦ 自動化に一苦労(PHPができれば問題なし?) master master master おっしゃ!!! 更新できた まだ作業中だったの に!? 一コマ劇場 一方その頃…
AWS Amplify採用の経緯 • DAYSからの反省 ◦ 登壇者情報掲載やニュースリリースを同じサイト上で実現&更新を自動化 したい ◦ 情報更新の際に他の人の編集が影響しないようにしたい フルスクラッチで作ってみたら全部行けるかも!?
であれば、Amplify使ってみよう!!!←ココ
当初作ろうとしてたの構成
当初作ろうとしてたの構成
使用した技術 • Nuxt.js (2.15.x) • TailwindCSS • AWS Amplify
リリースタイムライン 8月中旬 初期プロジェクト作成 コンテンツをmarkdownで管理 10月上旬 サイトリリース 8月下旬 OGP設定 9月下旬 全体レイアウト調整
2ヶ国語対応(英語・日本語) 10月中旬 Google Analytics設置 newsページのprevnext設置 favicon設置 11月上旬 バーガーメニュー実装 タイムゾーン対応 各種リンク置き換え 11月上旬 newsページの言語切替実装 登壇者情報公開の半自動実装 タイムテーブル公開 11月中旬 newsページ言語切り替えバグ修正 newsページのprevnext修正 11月下旬 follow upページ作成 登壇者資料公開
リリースタイムライン 8月中旬 初期プロジェクト作成 コンテンツをmarkdownで管理 10月上旬 サイトリリース 8月下旬 OGP設定 9月下旬 全体レイアウト調整
2ヶ国語対応(英語・日本語) 10月中旬 Google Analytics設置 newsページのprevnext設置 favicon設置 11月上旬 バーガーメニュー実装 タイムゾーン対応 各種リンク置き換え 11月上旬 newsページの言語切替実装 登壇者情報公開の半自動実装 タイムテーブル公開 11月中旬 newsページ言語切り替えバグ修正 newsページのprevnext修正 11月下旬 follow upページ作成 登壇者資料公開
2ヶ国語対応(英語・日本語) nuxt/i18n - 自動ルート生成や検索エンジン最適化、翻訳メッセージの遅延読み込みを実現 - コンポーネントごとに翻訳もできる - ただし、自動翻訳ではないため、翻訳文章を自身で用意する必要ある
2ヶ国語対応(英語・日本語) 実装部分 日本語 英語
配信コンテンツをmarkdownで管理 nuxt/content - GitベースのヘッドレスCMSとして機能する - Markdown、JSON、YAML、XML、CSVファイルといったファイルをMongoDBのAPI ような機能で扱える - Markdownの文章をそのままコンテンツとして展開できる
配信コンテンツをmarkdownで管理 変数を設定でき、 呼び出せばvueファイル上で 判定条件などに利用可能 実際に公開してるニュース記事の 本文
登壇者情報公開の半自動化 • nuxt/contentを使って、CSVの内容をインポートし変数に格納 • (レコード番号) -1 が配列番号になり、↑上記で格納した変数から対象の情報を取り出 す • 取り出した個々人の情報をHTMLに表現
CSVをアップロードするだけで、登壇者情報が更新できる
登壇者情報公開の半自動化 ハードコーディングになったわけ - nuxt/contentの仕様のため - CSVの1レコード≠1つのJSON 参考:https://content.nuxtjs.org/ja/writing CSV Markdown
実現できなかったこと • パンくずリストの設置 • GASでのAPI実装 • SNSへの自動投稿 • SNSシェアボタン •
PDFプラグインの実装 • 国旗の自動更新 • テスト
実現できなかったこと • パンくずリストの設置 • GASでのAPI実装 • SNSへの自動投稿 • SNSシェアボタン •
PDFプラグインの実装 • 国旗の自動更新 • テスト
GASでのAPI実装をしなかった背景 • セキュリティについての調査時間不足 ◦ 個人情報(メアド、電話番号)を含む可能性もあったため • 回避パターン案 ◦ スプレッドシートに個人情報を持たせない ▪
一番確実だが、手作業を必要としヒューマンエラーが発生する可能性あり ◦ スプレッドシート(Google)側でブロッキングできる? ▪ 不確定事項が大きかった
費用やGoogle Analyticsの結果 費用 2021.10 $9.89 ¥1126.9 2021.11 $13.05 ¥1486.9 合計
$22.94 ¥2613.8
費用やGoogle Analyticsの結果 Google Analytics リクエストのあった国々( ver 世界地図)
費用やGoogle Analyticsの結果 Google Analytics リクエストのあった国々( ver 世界地図)
費用やGoogle Analyticsの結果 Google Analytics ページビューの変動 10.11~12.06
今回の反省と総括 • Amplifyについて ◦ previewがすごく役立った ▪ リポジトリに入ってない人にも確認してもらいやすい (コレ自体がいいかどうかはさておき) ▪ ブランチごとにプレビューできるからレビューしやすい
◦ デプロイ爆速だった ▪ nuxt初期プロたてて、反映までが半日いらないのは神 ▪ ドメインなどの選定が完了していることが前提
今回の反省と総括 • Amplifyについて ◦ previewがすごく役立った ▪ リポジトリに入ってない人にも確認してもらいやすい (コレ自体がいいかどうかはさておき) ▪ ブランチごとにプレビューできるからレビューしやすい
◦ デプロイ爆速だった ▪ nuxt初期プロたてて、反映までが半日いらないのは神 ▪ ドメインなどの選定が完了していることが前提 • デザイン案を早めに決めると動きやすい ◦ デザインの調整でかなり時間を食った • GASでのAPIできれば自動化にむけて敵なし ◦ セキュリティ事項だけ注意すれば大丈夫 ...と思う! • Markdownファイルに呼び出しidつけて管理しても良かった ◦ 登壇者情報ページの概要だけ、レイアウトが崩れやすかった
メンバーへ Shigeru Oda Kohei Otani
最後に... 応援いただきありがとうございました!!