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

フロントエンドのサーバーレス SSR編

boiyama
March 24, 2018

フロントエンドのサーバーレス SSR編

boiyama

March 24, 2018
Tweet

More Decks by boiyama

Other Decks in Programming

Transcript

  1. ϑ ϩ ϯ τ Τ ϯ υ ͷ α ʔόʔ

    Ϩε S S R ฤ 2 0 1 8 . 3 . 2 4 M A N A B I YA
  2. P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL

    • GitHub: boiyaa
 Twitter: boiyaaaaaa
  3. S S R ͷ Π ϯ ϑ ϥ ཁ ݅

    ୺తʹݴ͏ͱ Express ͕ಈ͘ͱ͜ͳΒͰ͖Δ Մ༻ੑͷ͜ͱͱ͔Α͘Θ͔Βͳ͍ͷͰɺαʔόϨεͰ΍ Γ͍ͨ
  4. ࢼ ͯ͠ Έ ͨ ΋ ͷ • AWS ελοΫ: Lambda

    + API Gateway + Cloudfront • Firebase ελοΫ: Functions + Hosting
  5. Ճ ͑ͯ React ͷ SSR ༻ϑϨʔϜϫʔΫ σʔλऔಘͷ͋Δ React ίϯϙʔωϯτΛ αʔόʔαΠ

    υϨϯμϦϯά͢Δͷ͸ΊΜͲ͍͘͞ ͜ͷϑϨʔϜϫʔΫΛ࢖͏ͱ؆୯ʹͳΔ
  6. ؀ ڥ ߏ ங ख ॱ 1. S3 όέοτΛ࡞Δ 2.

    Lambda ༻ͷ IAM Role Λ࡞Δ 3. Lambda ؔ਺Λ࡞Δ 4. WebαΠτΤϯυϙΠϯτͱͯ͠ API Gateway Λ࡞Δ 5. ϧʔτϦιʔεʹϓϩΩγϦιʔεΛ௥Ճ͢Δ 6. Ϧιʔεʹ ANY ϝιουΛ௥Ճ͢Δ 7. APIΛσϓϩΠ͢Δ 8. Lambda ؔ਺ʹݖݶΛ௥Ճ͢Δ 9. CloudFront σΟετϦϏϡʔγϣϯΛ࡞੒͢Δ 10. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘
  7. L a m b d a ͱ E x p

    re s s ͷ ౷ ߹ E x p re s s ͱ N e x t ͷ ౷ ߹
  8. σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2.

    ੒Ռ෺Λ zip ͢Δ 3. S3 ʹΞοϓϩʔυ͢Δ 4. S3 ͔Β Lambda ؔ਺Λߋ৽͢Δ
  9. Pros • ॊೈͳ CDN Ωϟογϡͷίϯτϩʔϧ • AWS WAF ʹΑΔॊೈͳΞΫηείϯτϩʔϧ Cons

    • FaaS ͳͷͰίʔϧυελʔτͷ౓ʹ਺ඵ͔͔Δ • खॱ͕ෳࡶ • ઃఆΛཧղ͢Δͷʹ͕͔͔࣌ؒΔ • SAM ͱ͔ Terraform ͱ͔Λ࢖ͬͨํ͕͍͍
  10. ؀ ڥ ߏ ங ख ॱ 1. Firebase ίϯϑΟάϑΝΠϧΛ࡞੒͢Δ 2.

    ϓϩδΣΫτΛ࡞੒͢Δ 3. ϓϩδΣΫτΛׂΓ౰ͯΔ 4. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘
  11. F u n c t i o n ͱ N

    e x t ͷ ౷ ߹ F i re b a s e F u n c t i o n s ͷ H T T P τ Ϧ Ψ ʔ ͸ ඪ ४ Ͱ E x p re s s ʹ ର Ԡ ͯ͠ ͍ Δ
  12. Pros • ͔ͳΓ؆୯ • ؆୯ͳ GUI ͱ CLI • ؆୯ͳ

    CDN Ωϟογϡίϯτϩʔϧͱૉૣ͍ద༻ • ΧελϜυϝΠϯઃఆ΋·ͨ؆୯Ͱূ໌ॻ͸ϑϧϚωʔδυ Cons • FaaS ͳͷͰίʔϧυελʔτͷ౓ʹ਺ඵ͔͔Δ • ߏங࣌ʹ Web ίϯιʔϧʹΞΫηε͢Δඞཁ͕͋Δ
  13. · ͱ Ί • Firebase Α͔ͬͨ • AWS Λݕ౼͢Δέʔε: •

    AWS ্ͷόοΫΤϯυ͔Βσʔλऔಘ͕͋Δ • CloudFormation ͱ͔ Terraform ͱ͔Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ • ϓϥοτϑΥʔϜଆͰ ACL ͕΄͍͠ • Google App Engine Node.js Standard ؀ڥ͕ Early Access Program Λ ΍͍ͬͯΔͷͰɺίʔϧυελʔτ͕࣌ؒࠔΔ৔߹͸͜Ε͕͍͍͔΋
  14. α ϯ ϓϧί ʔ υ h t t p s

    : / / g i t h u b . c o m / b o i y a a / f ro n t e n d - s e r v e r l e s s - p a t t e r n s