Containerどこに置く？

歌舞伎座.tech #13 「フロントエンドアーキテクチャ勉強会」の資料です。

Transcript

1. $POUBJOFSͲ͜ʹஔ͘ʁ
   !TIJCF
   Վ෣ب࠲5FDI
   

   View Slide

2. View Slide

3. ϢʔβʔΠϯλϏϡʔΛαΫοͱͰ͖ΔΑ͏ʹ͢Δ
   NFZBTVCBDPͱ͍͏αʔϏεΛ։ൃதͰ͢ɻ
   ؾʹͳΔํ͸ࣄલొ࿥͓ئ͍͠·͢
   NFZBTVCBDP
   

   View Slide

4. ˏTIJCF
   γϕ
   σβΠφʔϑϩϯτΤϯυΤϯδχΞ
   

   View Slide

5. ͜͜೥͘Β͍41"ॻ͍͍ͯ·͢
   #BDLCPOF3FBDU
   
   

   View Slide

6. ࠓ೔͸3FEVYͷDPOUBJOFSʹؔ͢Δ

   ͪΐͬͱͨ͠࿩Λ͠·͢
   

   View Slide

7. $POUBJOFSͱ͸
   w 3FEVYͷTUPSFͰ؅ཧ͍ͯ͠Δঢ়ଶ΍BDUJPOΛ$PNQPOFOU
   ʹ઀ଓʢDPOOFDUʣͰ͖Δ
   w 3FEVYͷੈքͱ3FBDUͷੈքΛૄ݁߹ʹͰ͖Δ
   

   View Slide

8. 1SFTFOUBUJPOBM$PNQPOFOU
   $POUBJOFS$PNQPOFOU
   3FEVY
   

   View Slide

9. View Slide

10. DPOOFDUFE
    

    View Slide

11. $PNQPOFOUͷσΟϨΫτϦߏ੒
    Ͳ͏ͯ͠Δʁ
    

    View Slide

12. σΟϨΫτϦͷ௚Լʹ͸
    ίϯϙʔωϯτͷΈ
    ϧʔϧ
    

    View Slide

13. ϧʔςΟϯάʹج͍ͮͨσΟϨΫτϦߏ੒
    ϧʔϧ
    

    View Slide

14. DBNQBJHOT
    DBNQBJHOTDSFBUF
    DBNQBJHOT
    DBNQBJHOTFEJU
    ΩϟϯϖʔϯҰཡ
    Ωϟϯϖʔϯ࡞੒
    Ωϟϯϖʔϯৄࡉ
    Ωϟϯϖʔϯฤू
    1BUI 1BHF5JUMF
    ϧʔςΟϯάʹج͍ͮͨσΟϨΫτϦߏ੒
    

    View Slide

15. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    ΩϟϯϖʔϯҰཡ
    Ωϟϯϖʔϯ࡞੒
    Ωϟϯϖʔϯৄࡉ
    Ωϟϯϖʔϯฤू
    $BNQBJHOTKTY
    $SFBUFKTY
    DPNQPOFOUT
    

    View Slide

16. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    ΩϟϯϖʔϯҰཡ
    Ωϟϯϖʔϯ࡞੒
    Ωϟϯϖʔϯৄࡉ
    Ωϟϯϖʔϯฤू
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPNQPOFOUT
    

    View Slide

17. JNQPSU$BNQBJHOTGSPN$BNQBJHOT
    FYQPSUEFGBVMU$BNQBJHOT
    DPNQPOFOUT$BNQBJHOTJOEFYKTY
    

    View Slide

18. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPNQPOFOUT
    $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPOUBJOFST
    

    View Slide

19. JNQPSU$SFBUFGSPNDPNQPOFOUT$BNQBJHO$SFBUF
    $POUBJOFS͔Β$PNQPOFOUͷݺͼग़͠
    ૬ରύεͭΒ͍
    

    View Slide

20. $POUBJOFSΛޙ͔Β௥Ճ͢Δ࣌
    JNQPSU$SFBUFGSPN$SFBUF
    JNQPSU$SFBUFGSPNDPOUBJOFST$BNQBJHO$SFBUF
    Өڹൣғ޿͗ͯͭ͢Β͍
    

    View Slide

21. ͦ͜ͰɺJOEFYKTYʹ஫໨
    

    View Slide

22. ͍ͭ͜ɺ΄΅Կ΋ͯ͠ͳ͍
    

    View Slide

23. View Slide

24. JOEFYKTYDPOUBJOFSͱͯ͠ར༻͢Δ
    

    View Slide

25. DPOOFDU͕ඞཁͳ࣌͸DPOUBJOFSɺ

    ෆཁͳ࣌͸FYQPSU༻ͱͯ͠ػೳͤ͞Δ
    

    View Slide

26. JNQPSU$BNQBJHOTGSPN$BNQBJHOT
    FYQPSUEFGBVMU$BNQBJHOT
    

    View Slide

27. JNQPSU\DPOOFDU^GSPNSFBDUSFEVY
    GVODUJPONBQ4UBUF5P1SPQT
    \ʜ^
    GVODUJPONBQ%JTQBUDI5P1SPQT
    \ʜ^
    FYQPSUEFGBVMUDPOOFDU NBQ4UBUF5P1SPQT NBQ%JTQBUDI5P1SPQT
    $BNQBJHOT
    
    JNQPSU$BNQBJHOTGSPN$BNQBJHOT
    

    View Slide

28. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPNQPOFOUT
    $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPOUBJOFST
    

    View Slide

29. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPNQPOFOUT
    $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPOUBJOFST
    ؙ͝ͱෆཁ
    

    View Slide

30. ϝϦοτ σϝϦοτ
    

    View Slide

31. ϝϦοτ
    σϝϦοτ
    DPNQPOFOU㱻DPOUBJOFSؒͰ૬ରύε͕

    ෳࡶʹͳΒͳ͍
    DPOUBJOFSΛ༰қʹ௥ՃͰ͖Δ
    

    View Slide

32. ϝϦοτ
    σϝϦοτ
    DPOUBJOFSΛ༰қʹ௥ՃͰ͖Δ
    DPNQPOFOUDPOUBJOFS

    ʹݶఆ͞Εͯ͠·͏
    DPNQPOFOU㱻DPOUBJOFSؒͰ૬ରύε͕

    ෳࡶʹͳΒͳ͍
    

    View Slide

33. ཧ૝࿦Ͱݴ͑͹ɾɾɾ
    DPOUBJOFSDPNQPOFOUOO
    ͚ͩͲɺ
    ࣮ࡍ໰୊ɺͰ΋ࠔΒͳ͍ʢԶௐ΂
    

    View Slide

34. ͳͷͰ
    

    View Slide

35. $BNQBJHOT
    $SFBUF
    %FUBJM
    &EJU
    JOEFYKTY
    $BNQBJHOTKTY
    JOEFYKTY
    $SFBUFKTY
    DPNQPOFOUT
    DPOUBJOFS
    DPOUBJOFS
    

    View Slide

36. ΦεεϝͰ͢
    

    View Slide

37. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    
    !TIJCF
    

    View Slide