Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
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
96
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
240803 Webエンジニアが_One_Observability_Workshop_から始めるO11y.pdf
east_takumi
0
19
240516「のうさば」から紐解く サメの郷土料理のお話
east_takumi
0
42
240423 CloudFrontのOACが Lambda Functions URLに対応!! ...って何が嬉しいの?
east_takumi
0
16
新卒から4年重ねて持ってる荷物をおろしたい
east_takumi
0
130
231207 主催をしたいまだからこそ言いたい!これからは「コミュニティ」だ!
east_takumi
0
39
230902 業務でAWS触らないけど自分がAWS認定試験の勉強する理由
east_takumi
0
150
20230825 外部サービス提供のAPIを利用する機能を作るときの頭の中
east_takumi
0
420
20230722 Webエンジニアの Cloudflare Pagesハンズオン 挑戦記
east_takumi
0
88
20230723 Snyk みんな触ってみない?(圧
east_takumi
0
57
Other Decks in Technology
See All in Technology
Fediverse Discovery Providers overview
andypiper
0
170
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
320
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
LLVM/ASMを使った有限体の高速実装
herumi
0
120
PDF Viewer作成の今までとこれから
hunachi
0
470
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
不動産 x AIことはじめ~データの真価を拓くために
estie
0
110
Technical Writing Meetup vol.35
soracom
PRO
2
120
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
580
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Speed Design
sergeychernyshev
22
430
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Thoughts on Productivity
jonyablonski
66
4.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Building Your Own Lightsaber
phodgson
101
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Infographics Made Easy
chrislema
239
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
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
最後に... 応援いただきありがとうございました!!