Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jamstackで実装したセゾンカードWebサイトを2年運用お手伝いしてみて

 Jamstackで実装したセゾンカードWebサイトを2年運用お手伝いしてみて

2023/07/14 dist40にて
https://dist.connpass.com/event/284922/

Takeshi Takatsudo

July 14, 2023
Tweet

More Decks by Takeshi Takatsudo

Other Decks in Programming

Transcript

  1. Jamstack:"**LE
    :
    - 1"Web4YE 2
    **
    I'EL222
    & Takazudo DIST. 40 2023. 09.14

    View Slide

  2. :Eit
    =F II
    ED> Y"EHL
    & Takazudo
    (**) [Yt1LY"..,
    x277-

    View Slide

  3. #Tl
    = Y
    Jamstack,"RIX: WebHYt
    2
    =
    Y=
    EFFE
    #
    (2213' =
    i1;"

    View Slide

  4. JamstackEtc
    Eith
    S

    View Slide


  5. -
    L2HTMLEEIIEE. #
    7 =
    It
    EEc HTML,
    Static Site Generator
    SPALYEYEth.
    Headless CMS4" -45:34
    TITI El
    me
    HTMLE!
    ⊥ - -
    -ID JSON TyYK
    -> -100 ETY
    -
    -A
    ->
    0 1= 12Iex
    ↓W
    I
    =a -
    734i
    ) =
    =
    4:t
    E. APIN'S-A

    View Slide

  6. ⊥it
    "LE.
    #L
    TAL 1
    HTML<2
    push 13DA
    -
    r - BY I'T
    Developer git
    -
    push3E[OK! ACI FEETIR 3.
    -
    iE et IE.

    View Slide

  7. -
    ::
    "ICDNIE
    it
    CDN
    B
    *
    API
    HTML
    ↑x
    ③ ⑤ ⑧
    &
    CSS/JS/RE
    E 13DA &

    I
    e
    - 138138 ③
    ⑧s -

    BUF &
    Di ->
    80
    Mettitt"
    Jamstack!

    View Slide

  8. -E
    WebH= 112
    ·
    2021 5A111=1-PIL
    ·
    by +
    1 =
    vt 1-
    x - PXG
    ·
    EYE 11313 ***
    ·
    AWS Amplify
    · micro (MS
    ·
    I 1 ty ·
    GitHub

    View Slide

  9. EnX=
    1 -
    ·
    t*
    ·
    Git
    ·
    M. f27 (MS
    ·
    SSGNYY"
    ·
    i7Fx =
    M

    View Slide

  10. #
    "n
    ·
    ix=
    1-Y 131 CDN HTMLLX
    -
    22TII
    . . .
    -
    S
    REIIKE Mess-
    E
    ·
    EHI=
    --
    ·
    Le-f"E
    y=
    13a'

    View Slide

  11. e
    ·
    'WebF = It IFE
    T
    ·
    X WIE2E
    ·
    WebHtEE:ll T-7
    Its=
    al

    View Slide

  12. -CMS
    ** Etz!
    ·
    A NAI
    14=
    =
    = x7 1=
    7
    "IFT, 2 T53
    · II =
    "***
    175 TE1l
    ·
    Etin (MS1= 7+ -
    DI
    LEC 2IIII
    ·
    IEEE JSON IEL IIEit

    View Slide

  13. 1
    MS
    n-AE* ETIE !
    · I- A1"**
    - =
    =
    ="fil 1
    ·
    -
    ET 4
    At
    a IEC
    1=
    IEI*-

    View Slide

  14. -
    MSI CELWebt -
    ex
    ·
    100 % =
    tB-1 E3 RHEITEn ts
    ·
    "": ..
    ·
    It (32 I3.
    ·
    I7IEEEh.H- xxE]
    ·
    71
    WebH-x #22 3211;
    13 E

    View Slide

  15. #12H
    =
    [Est=
    11ty4*4E9SSG-12
    2117 =
    z
    TET
    1'.
    A EI
    TITEII/EcZ IIE.
    ·
    It HTML. EL
    T1 ·
    4- 1
    "YlzlnEE LEE

    View Slide

  16. Afy
    .- TE
    EICTE" ()
    # I TE
    YH+ 15k57x7AAll.
    15 (
    al: 3xT
    LE.
    AA > Ex:
    4-x". FIAt'2"
    EEFIt" Il

    View Slide

  17. $150/1TB
    -x

    View Slide

  18. -

    View Slide

  19. -
    -
    -

    View Slide

  20. EK

    View Slide

  21. k,
    =
    =
    cAlE
    -
    i
    = >
    t - >
    "*"
    ->

    View Slide

  22. -
    HA LE ItzitTIE
    ·
    ori-t
    ·
    7714 =
    77 -
    7
    1kLz1=
    4.217E2
    113E"TECHIEE]
    Eh,HEELE!

    View Slide

  23. *
    E

    View Slide

  24. Jamstack I =
    "H-1=Vnx
    EiFIIt.

    CSS EEt ⊥D = 1-1-53
    = =
    Xx Y !
    1-
    *st!
    Jamstack n
    EEE 11313 KIE5.

    View Slide

  25. I'l"
    I'lElE!

    View Slide