SvelteKit・Svelte でハマった(困った)ところ/nextbeattechbar-20221027-2

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 2 自己紹介株式会社ネクストビート CTO 阿部雅哉 2013/4 ~ DeNA ● ゲーム向けのBaaS開発 ● 認証・認可基盤 (OIDC, OAuth2) 2019/1 ~ ネクストビート ● EM & おもてなしHR 開発リード ● 社内共通ライブラリ・ API 開発 ● 2022年1月よりCTO

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 5 現サービス構成基本的に全社で下記言語で開発 ● PlayFramework(Scala) ● Angular ネイティブアプリは Swift & Kotlin 非同期・バッチ処理は Lambda を利用 (Scala で開発し、sbt プラグインや独自の機構で CI/CD 管理)

Slide 6

Slide 6 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 6 刷新後のサービス構成（像）開発言語を TypeScript で統一 NestJS : APIサーバ SvelteKit : Webサーバネイティブアプリは Ionic + Svelte によるクロスプラットフォーム開発 Lambda は Serverless Framework を利用共通ライブラリも含め monorepo 構成 + turborepo を利用し開発中刷新の背景・詳細な構成はまた後日

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 9 script タグを body に埋め込めない？分析で利用するタグには body 内に配置が必要。愚直に script タグを記載すると、下記のようにエラーとなる。 (Svelte のコンパイラが 2つ目のも Svelte の script 部と判断するのでエラーとなってしまう )

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 15 ページネーション時に画像が更新されない ...？ Svelte でページネーションによる DOM 更新時に data-src のみ変更 & src を削除する指示がないので、 Lazy Load により追加された src は削除されずにそのまま残る。原因 1ページ目レンダリング & Lazy Load による画像表示 2ページ目に遷移 . data-src のみ更新され、画像が更新されない

Slide 16

Slide 16 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 16 ページネーション時に画像が更新されない ...？ isLazy の場合は src を消すように指示ではこれで OK ? use:lazyImage 内の IntersectionObserver は発火後に unsubscribe となるので、ページネーション遷移時には Lazy Load が起きず画像が表示されない

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 19 load 関数の fetch の挙動が...? 各ページでは +page.server.ts 内で SvelteKit が提供する fetch を利用し、内部通信経由で API サーバからデータを取得 ● API Client の実装 ○ ベースURL を https://www.hoikushibank.com で固定 ○ fetch を差し替え可能 ● Server での API 実行 ○ server hooks の handleFetch でベースURL を http://hb-api.internal に書き換えるデータ取得時の構成

Slide 20

Slide 20 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 20 load 関数の fetch の挙動が...? ◯ SvelteKit が提供する load関数の fetch 仕様 ● リクエスト先が同一オリジン or サブドメインであれば Credentail (Cookie) 等を渡してくれる ● リクエスト先とオリジンが異なる際は CORS をシミュレート ◯ 前述のデータ取得構成では下記問題が発生オリジンと APIリクエスト先が異なるため 1. Cookie が API サーバに渡されない 2. CORS 制約にて 403 エラー 3. API が連続する際に、途中でセットされた Cookie が後続の APIリクエストに含まれない実は 3 を除いて hooks の externalFetch (1.0.0-next.468 以前) では問題なかった。 fetch の仕様と構成上起きる課題

Slide 21

Slide 21 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 21 load 関数の fetch の挙動が...? Cookie が API に渡されない ● handleFetch にて event.request.headers から Cookie を取得し fetch に渡せば解決 CORS 制約にて 403 エラー ● SvelteKit 側で対処しようがないので、 API側で CORS 許可の対応必要 API が連続する際に、途中でセットされた Cookie が後続の APIリクエストに含まれない ● （現状）SvelteKit の fetch を利用する上では対応策なし解決策これはよし内部通信で CORS 設定... どうしようもない

Slide 22

Slide 22 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 22 load 関数の fetch の挙動が...? 自作の load 関数用 fetch を作りました ● 内部通信時の挙動 ○ CORS を考慮しない ○ request の Cookie を pass through ○ Set-Cookie の Cookie を後続のリクエストに伝搬 ○ (API の Set-Cookie を merge し、SvelteKit のレスポンスに含める ) ● それ以外 ○ 単なる fetch (現状この用途はない ) event.locals に fetch を代入し、各ページの +page.server.ts でその fetch を使って API call を実施というわけで我々の解決策としては ...

Slide 23

Slide 23 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 23 SvelteKit / Svelte でハマった（困った）点 script タグを body に埋め込みたい ● svelte:element を使うか div で囲うページネーション時に画像が更新されない ...? ● key ブロックによるコンポーネントの再更新を意識 (アニメーション等もそう ) 内部通信時の SvelteKit の load 関数における CORS, Cookie 伝搬 ● 自作で fetch の wrapper を作りました

Slide 24

Slide 24 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 24 最後に保育士バンク！が基本的な Webアプリケーションであることと、 Svelte / SvelteKit がチュートリアル & ドキュメントが豊富なので、実際に使っていてハマるというのは少なかったかなと思います。ただ SvelteKit の version up が早いので、その追従や version up 後に起きるバグ等の調査や Issue 確認の方が骨が折れます。

Slide 25

Slide 25 text

Copyright © nextbeat All Rights Reserved Copyright © nextbeat All Rights Reserved 25 最後に保育士バンク！が基本的な Webアプリケーションであることと、 Svelte / SvelteKit がチュートリアル & ドキュメントが豊富なので、実際に使っていてハマるというのは少なかったかなと思います。ただ SvelteKit の version up が早いので、その追従や version up 後に起きるバグ等の調査や Issue 確認の方が骨が折れます。

Slide 26

Slide 26 text