Migration to Next.js App Router and Best Solution Found on K8s

既存のオープンチャットの小さなウェブサービスを統合されたCI/CD環境で管理するために k8s 環境に移行しました。
KubernetesでFEプロジェクトを運営する際に知っておくと良いFE向けのヒントを共有します。
また、既存のクライアントサイドレンダリング (CSR) プロジェクトをNext.jsのApp Routerを使用してサーバーサイドレンダリング (SSR) に移行する際に経験も共有します。

Transcript

1. Migration to nextjs and best solution we found on kubernetes -*/&
   
   $POUFOUT
   4FSWJDF
   8FC +VOH
   ,ZV
   4VOH +P
   +FPOH
   (FVO
2. $POUFOUT 01 Best solution we found on Kubernetes - About Open Chat - How We Migrated to Kubernetes - Our Kubernetes Architecture Migration to Nextjs App Router - NextJS on Kubernetes - TroubleShooting - What’s Next 02
3. 3FBMUJNF
   DPNNVOJDBUJPO *OUFSFTUCBTFE
   $PNNVOJUZ &BTZ
   UP
   VTF "OPOZNJUZ 8IBU
   JT
   0QFO
   $IBU
4. 0QFO
   $IBU 4FBSDI 8IBU
   JT
   0QFO
   $IBU 0QFO
   $IBU
   8FC
   1PSUBM
5. Deployment Jenkins Server BE WAS WAS WAS WAS .JHSBUJPO
   UP
   ,VCFSOFUFT Builder Builder Builder
6. Jenkins Servers Builder for A service Builder for B service Builder for C Service Development Deployment .JHSBUJPO
   UP
   ,VCFSOFUFT Development C Server B Server A Server Pre-Release Deployment Production Deployment Pre-Release C Server B Server A Server Production C Server B Server A Server
7. .JHSBUJPO
   UP
   ,VCFSOFUFT Independence Versatility Integration .VMUJ
   5FOBODZ
   PO
   ,VCFSOFUFT
8. 5FOBOU 101 102 103
9.  "
   UFOBOU
   JT
   B
   MPHJDBMMZ
   TFQBSBUFE
   HSPVQ
   PG
   VTFST
   UFBNT
   PS
   TFSWJDFT
   VTJOH
   TIBSFE
   JOGSBTUSVDUVSF  &BDI
   UFOBOU
   IBT
   JOEFQFOEFOU
   DPOUSPM
   PWFS
   UIFJS
   PXO
   XPSLMPBET  -JLF
   EJGGFSFOU
   QFPQMF
   MJWJOH
   JO
   TFQBSBUF
   SPPNT
   PG
   POF
   BQBSUNFOU
   CVJMEJOH Cluster Namespace Tenant A Namespace Tenant B Namespace Tenant C 5FOBOU
10. 3FTPVSDF
    *TPMBUJPO Cluster Tenant A CPU Tenant B CPU Tenant C CPU Memory Memory Memory
11. 5SBGGJD
    4FHSFHBUJPO *OHSFTT
    $POUSPMMFS Cluster *OHSFTT 4FSWJDF Tenant A *OHSFTT 4FSWJDF Tenant B /tenant-a /tenant-b
12. .BOBHFNFOU
    BOE
    .POJUPSJOH PULL Metrics Data Source Kubernetes Prometheus Grafana Grafana Dashboard
13. Phase - Phase is suffix for environment - Phase is involved with domain Stage - separate and manage the frontend development environment itself, even though it is under the same domain and path - if developer want to deploy two different versions of the main application, it can deploy them as ‘A-Pre-release’ , ‘A-Pre-release2’ .VMUJ
    5FOBODZ
    4USBUFHZ "QQMJDBUJPO 1IBTF 4UBHF /BNFTQBDF " 1SFSFMFBTF  "1SFSFMFBTF " 1SFSFMFBTF  "1SFSFMFBTF # %FWFMPQNFOU  #%FWFMPQNFOU # %FWFMPQNFOU  #%FWFMPQNFOU
14. Production Cluster Production Phase C-Development Development Cluster Development Phase A-Development B-Development Pre-Release Phase A-Pre-Release B-Pre-Release C-Pre-Release Stage : 1 .VMUJ
    5FOBODZ
    4USBUFHZ Stage : 2 A-Pre-Release2 B-Pre-Release2 A B C
15. .VMUJ
    5FOBODZ
    %FWFMPQNFOU Helm Chart (templates) Values ArgoCD
16. root-app (App of Apps) Helm-based ArgoCD Apps A (Helm Chart) B (Helm Chart) C (Helm Chart) Development Cluster A-pre-release A-pre-release2 B-pre-release Pre-release-apps B-pre-release2 Production Cluster A B Production-apps .VMUJ
    5FOBODZ
    %FWFMPQNFOU
17. Argocd-applications/values.pre-release.yaml Argocd-applications/templates/a.yaml .VMUJ
    5FOBODZ
    %FWFMPQNFOU
18. .VMUJ
    5FOBODZ
    %FWFMPQNFOU Argocd-applications/values.pre-release.yaml
19. )PX
    UP
    4FU
    3FTPVSDF
20. - CPU resource is compressible resource - Node.JS is single thread. - 1.0 core is Best? $16
    3FTPVSDF
21. - Libuv also utilizes CPU resources, and consequently, requires a more generous allocation of CPU resources - 1.15 is acceptable Node.JS V8 Libuv CPU 1.0 $16
    3FTPVSDF $16
    3FRVFTU $16
    -JNJU 10% 514 ."9
    514 ."9
    $16
    6TBHF $PSF1PE  
    $PSF    
22. Memory - incompressible resources - Out of Memory Risk - In Node.js, for a machine with 2 GiB of memory, it is recommended to allocate 1.5 GiB Memory (requests & limit) Max-old-space-size 1500Mi 1024 2000Mi 1536 .FNPSZ
23. CPU Limit : Where CPU throttling begins Request : amount guaranteed by kubernetes Memory Limit : Level Where process are killed Request : amount guaranteed by kubernetes $16
    .FNPSZ
    3FRVTU
    
    -JNJU
24. Migration to Nextjs App Router • NextJS on ,VCFSOFUFT • TroubleShooting • What’s Next 02
25. FE Kubernetes CSR Hybrid CSR & SSR For Better FCP & LCP /FYU+4
    PO
    ,VCFSOFUFT
26. - FCP(First Contentful Paint) : when the browser renders the first content from the DOM, providing feedback to the user that the page is loading - LCP(Largest Contentful Paint) : the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load 8IZ
    /FYU+T
27. CSR SSR 8IZ
    /FYU+T
28. NextJS on K8s 8IBU
    JT
    TUBOEBMPOF
29. We upload static assets to CDN and serve them from there. 8IBU
    JT
    TUBOEBMPOF
30. normal standalone 8IBU
    JT
    TUBOEBMPOF
31. - Applying animations between page transitions using Prefetching - Implementing Tab UI using native History API - Server Action Version Skew (Under Investigation) 5SPVCMFTIPPUJOH
32. "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH
33. "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH main: ‘/’ search: ‘/search’
34. Network - 3G "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH
35. "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH
36. "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH
37. Prefetch = false Prefetch = true "QQMZJOH
    BOJNBUJPOT
    CFUXFFO
    QBHF
    USBOTJUJPOT
    VTJOH
    1SFGFUDIJOH
38. )PX
    DBO
    XF
    NBJOUBJO
    UIF
    UBC
    TUBUF
    XIFO
    UIF
    GPMMPXJOH
    DPOEJUJPOT
    FYJTU
    
    8IFO
    FOUFSJOH
    BOPUIFS
    QBHF
    BOE
    SFUVSOJO H
    UIF
    QSFWJPVTMZ
    TFMFDUFE
    UBC
    NVTU
    CF
    NBJOUBJ OFE *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1*
39. 
    
    4QFDJGZ
    SPVUF
    QBUIT
    GPS
    FBDI
    UBC
    VTJOH
    %ZOBNJD
    3PVUF 
    DBUFHPSZ<UBC*E> 
    
    1FSGPSN
    GFUDIJOH
    GPS
    FBDI
    UBC
    EBUB
    PO
    UIF
    TFSWF S
    TJEF  8IFO
    DIBOHJOH
    UBCT
    IBOEMF
    63-
    DIBOHFT
    VTJOH
    SPVUFSSFQMBDF *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1*
40. *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1* 4FSWFS
    4JEF
    "1*
    DBMMT
    B SF
    NBEF
    FWFSZ
    UJNF
    B
    UBC
    JT
    DIBOHFE *U
    BMTP
    QFSGPSNT
    "1*
    D BMMT
    GPS
    UBCT
    UIBU
    IBWF
    BMSF BEZ
    CFFO
    WJTJUFE
41. *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1* 5BC
    TDSPMMJOH
    JT
    DPOGJHVSFE
    BT
    JOOFS
    TDSPMM
    XJUIJO
    UI F
    UBCT
    CVU
    TJODF
    UIF
    QBHF
    SFMPBET
    EVF
    UP
    SPVUFSSFQMBDF
    UIF
    QSFWJPVT
    TDSPMM
    QPTJUJPO
    NVTU
    CF
    GPSDJCMZ
    SFTUPS FE
    XIJDI
    DSFBUFT
    BO
    BXLXBSE
    69
42. *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1*
43. *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1*
44. Router.replace History API *NQMFNFOUJOH
    5BC
    6*
    VTJOH
    OBUJWF
    )JTUPSZ
    "1*
45. Error : Failed to find Server Action `${actionId}`. This request might be from older or newer deployment 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
46. 1. Create a server action 2. Run next build(actionID : 00aa~~) 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
47. 3. Run next start 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
48. 1. Rename the server action function to getCookie 2. Run next build (actionID : 006c~~) The user is still seeing the old version of the Next.js client… getCookie Changed! (00aa => 006c) 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
49. 3. Run next start 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
50. What's the reason for this issue? Old Client (id: 00aa~~) Old Server (id: 00aa~~) New Server (id: 006c~~) 1. request 2. Roll out 3. request 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
51. 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
52. 1. Retains the previous version of server actions 2. Set the NEXT_SERVER_ACTIONS_ENCRYPTION_KEY environment variable 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
53. Old Client (id: 00aa~~) Old Server (id: 00aa~~) New Server (id: 00aa~~, 006c~~) 1. request 2. Roll out 3. request 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
54. Old Client (id: 00aa~~) Old Server (id: 00aa~~) New Server (id: 006c~~) New Client (id: 006c~~) GW Check cookie or header Old client’s request New client’s request 4FSWFS
    "DUJPO
    7FSTJPO
    4LFX
55. NextJS App Router Server Cache 0VS
    /FYU
    "DUJPO
    
    *OUFHSBUF
    EJTUSJCVUFE
    OFYUKT
    DBDIF Mechanism What Where Purpose Duration Request Memoization Return values of functions Server Re-use data in a React Component tree Per-request lifecycle Data Cache Data Server Store data across user requests and deployme nts Persistent (can be revalidated) Full Route Cache HTML and RSC payload Server Reduce rendering cost and improve performan ce Persistent (can be revalidated)
56. Next Server Next Server Next Server Next Server LB cache cache cache cache 0VS
    /FYU
    "DUJPO
    
    *OUFHSBUF
    EJTUSJCVUFE
    OFYUKT
    DBDIF
57. Use custom cache solution to integrate distributed cache Next Server Next Server Next Server Next Server LB External Store (e.g. redis) 0VS
    /FYU
    "DUJPO
    
    *OUFHSBUF
    EJTUSJCVUFE
    OFYUKT
    DBDIF
58. 0VS
    /FYU
    "DUJPO
    
    *OUFHSBUF
    EJTUSJCVUFE
    OFYUKT
    DBDIF
59. Thank you @CSW @CSE @openchat