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

F425aff2e1f934fc1e5fa95b1f933068?s=47 boiyama
March 24, 2018

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

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

March 24, 2018
Tweet

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. ͖ ͬ ͔ ͚ SEOରࡦ͠ͳ͍ͱ͍͚ͳ͘ͳͬͨ ࣗ෼Έ͍ͨͳ௿εΩϧΤϯδχΞͰ΋Ͱ͖ΔSSRͱϗε ςΟϯάͷํ๏͕஌Γ͍ͨ

  4. S S R ͷ Π ϯ ϑ ϥ ཁ ݅

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

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

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

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

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

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

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

    ϓϩδΣΫτΛ࡞੒͢Δ 3. ϓϩδΣΫτΛׂΓ౰ͯΔ 4. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘
  14. 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 ʹ ର Ԡ ͯ͠ ͍ Δ
  15. σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2.

    Firebase ʹσϓϩΠ͢Δ
  16. Pros • ͔ͳΓ؆୯ • ؆୯ͳ GUI ͱ CLI • ؆୯ͳ

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

    AWS ্ͷόοΫΤϯυ͔Βσʔλऔಘ͕͋Δ • CloudFormation ͱ͔ Terraform ͱ͔Ͱ؅ཧ͠ͳ͍ͱ͍͚ͳ͍ • ϓϥοτϑΥʔϜଆͰ ACL ͕΄͍͠ • Google App Engine Node.js Standard ؀ڥ͕ Early Access Program Λ ΍͍ͬͯΔͷͰɺίʔϧυελʔτ͕࣌ؒࠔΔ৔߹͸͜Ε͕͍͍͔΋
  18. α ϯ ϓϧί ʔ υ 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
  19. T h a n k y o u