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
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
Search
Daichi Igarashi
August 27, 2024
Programming
0
280
Amebaチョイス立ち上げの裏側 ~依存システムとの闘い~
Muddy Web #9
の登壇資料です。
Daichi Igarashi
August 27, 2024
Tweet
Share
More Decks by Daichi Igarashi
See All by Daichi Igarashi
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
390
Other Decks in Programming
See All in Programming
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.3k
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
220
sqlcを利用してsqlに型付けを
kamiyam
0
240
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
110
CSC509 Lecture 03
javiergs
PRO
0
140
Real-time message handling and notifications with API Platform and Symfony
alli83
1
110
Serverless renderování Webových komponent
rarous
PRO
0
100
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
140
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
140
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
250
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
190
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6k
Fireside Chat
paigeccino
32
3k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
It's Worth the Effort
3n
183
27k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Building Adaptive Systems
keathley
38
2.2k
Being A Developer After 40
akosma
84
590k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Code Review Best Practice
trishagee
62
17k
What's new in Ruby 2.0
geeforr
341
31k
Transcript
Amebaチョイス 立ち上げの裏側 ~依存システムとの闘い~
自己紹介 2 AmebaLIFE事業本部 五十嵐 大地(Daichi Igarashi) X: @mr_ynu_2014_no4 / GitHub:
Dai7Igarashi • 20新卒 フロントエンジニア@Ameba • Ameba Pick → ブログ → Amebaチョイス 立ち上げ → Owl出向中 • SEO関連の開発を多数経験 • 目標はフルスタック
アジェンダ 3 • Amebaチョイスを取り巻く技術 • しんどかったこと・乗り越えた方法 • 成果と振り返り • 締め
Amebaチョイスを取り巻く技術 4
サービス紹介 5 2024年5月15日リリースした、商品比較メディア。 「Amebaチョイス」を検索してみてね!
開発経緯 6 去年 Ameba x CyberOwl によるライフスタイル管轄が誕生。 CyberOwlのノウハウ・システムを利用し、Ameba発のSEOメディア立ち上げへ。
記事配信の大まかな流れ 7 商品モジュール (SSR)
記事配信の大まかな流れ 8 記事本文エリア (SSR)
記事配信の大まかな流れ 9 ページ全体 (SSR)
記事配信の大まかな流れ 10 なんか複雑すぎん🤔?
microCMSでやる場合の比較 11 vs
microCMSでやる場合の比較 12 vs OwlのCMSについては 詳しく触れません(ご容赦🙏)
しんどかったこと・乗り越えた方法 13
制約と願望 14 • DB参照モジュールは ◦ SSRしてCMSに返す ◦ 個々でhydration用scriptを実行 • CMSはSSR結果を記事配信サーバに返す
• Amebaで標準化されつつある構成が良い†1 • DB更新系&SEO対策のためSSR必須 • App Router使いたい(使ってみたい) • ウィジェットサーバは分離したい <直感 †1. Muddy Web #4 「Amebaブログの会員画面システム刷新の道程」を真似たい
しんどかったこと1. 記事用CMSのレスポンスがHTMLのため、UI作りが難しい 15 記事本文はHTML(文字列)で返されるので、Reactコンポーネント作りが無理。 CMS側でclassを自由につけられるので、それでひたすら頑張る... これについては工夫の余地がなかったので諦め😇
しんどかったこと1. 記事用CMSのレスポンスがHTMLのため、UI作りが難しい 16 CMSが返すDOM構造で対応不可なUIは、createPortalでDOMに差し込む(荒技)
しんどかったこと2. ウィジェットhydration用scriptがNative ESM + libモードでビルド必須 17 これだけならViteが良さそうだが、Viteでのサーバビルドは不都合が多い。 • express動かすのにvite-plugin-nodeなどが必要。 ◦
CJSでのサーバ実行自体に必要そうだが、ロックインがヤダ(制御が難しい)。 • importするライブラリによってはESM→CJSがうまくいかずエラーになる。 ◦ vite-plugin-esmoduleとか色々試したが、やはり制御が難しいのでヤダ。
しんどかったこと2. ウィジェットhydration用scriptがNative ESM + libモードでビルド必須 18 そこで、クライアントはvite・サーバはtsup(esbuild)でビルドを分けた。
しんどかったこと3. viteとtsupに分けたらcss modulesの同期取れない懸念出てきた 19 CSS Modulesは、仕様は決まっているが実装は各々。 ビルドツールが異なると、SSR↔hydration間のclass名が不一致の懸念あり†1。 そこで、viteビルドのhash値をtsup側でSSR結果に埋め込むようにした。 †1. hydration後の結果を強制的に正にする方法は、出来ない場合があるのでやらない
vite tsup
しんどかったこと4. デプロイ方法を良く考えないと修正リリース時に障害が起きる 20 ウィジェットのhydrationエントリファイルは choice-widget.js のみ。 これは事前にCMSに登録するもので、バージョニングするには工夫が必要。 バージョニングしない状態で、Amebaプラットフォームに沿って • クライアント用assetを先にS3に保存
• ローリングアップデートによるサーバデプロイ を行うと、修正リリース時のみhydrationエラーの可能性が出てくる。
しんどかったこと4. デプロイ方法を良く考えないと修正リリース時に障害が起きる 21 この問題に対しては • デプロイ戦略の変更は変更コスト・金銭コストを鑑みて一旦やらない • バージョニングはメンテナンス性を鑑みて一旦やらない ことにし、代わりに •
後方互換性を持たせた段階リリース • リリースに関するドキュメントの整備 で暫定対応。
しんどかったこと5. App RouterではCache-Controlを使ったCDN制御が難しい 22 キャッシュの責務はCDNに一任し、アプリケーションのキャッシュは切りたい。 force-dynamic等を指定すると、 • アプリケーションのキャッシュはOFFになる • が、Cache-ControlがApp
Router側で制御される(private等が付与される) www.ameba.jpのFastlyはAmebaチョイス以外も管理しており、 Cache-Controlを見てキャッシュ判定をしているので、そこは汚したくない。 ※ Cache-Control的にはキャッシュしないのにCDN側でキャッシュさせるのはそもそも不自然
しんどかったこと5. App RouterではCache-Controlを使ったCDN制御が難しい 23 そこでApp Router用にカスタムCache-Controlヘッダを作成。 Fastly側でCache-Controlを上書き。 Fastly(vcl)
成果と振り返り 24
成果 25 • Owlのシステムを使った(Owl以外での)開発実績を作った • Amebaのプラットフォーム上で開発出来た • Amebaで標準化されている構成のため、新規参入コストを低く出来た • ロックインを極力避け、制御や移管が容易な状態に出来た
振り返り 26 • ビルドが複雑化したので、ウィジェットサーバを分離しておいて助かった • ビルド・hydration・キャッシュの深い部分を学べた💪 • App Router導入のメリットを検証出来ていないのが心残り😢 •
リリース障害等、テストで未然に障害を防げる仕組みがあると良い
締め 27
28 とても勉強になる開発でした。 本日はご清聴ありがとうございました!