ϑ ϩ ϯ τ Τ ϯ υ ͷ α ʔόʔ Ϩε S S R ฤ 2 0 1 8 . 3 . 2 4 M A N A B I YA

P ro f i l e • ϑϩϯτΤϯυΤϯδχΞ at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa

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

S S R ͷ Π ϯ ϑ ϥ ཁ ݅ ୺తʹݴ͏ͱ Express ͕ಈ͘ͱ͜ͳΒͰ͖Δ Մ༻ੑͷ͜ͱͱ͔Α͘Θ͔Βͳ͍ͷͰɺαʔόϨεͰ΍ Γ͍ͨ

ࢼ ͯ͠ Έ ͨ ΋ ͷ • AWS ελοΫ: Lambda + API Gateway + Cloudfront • Firebase ελοΫ: Functions + Hosting

Ճ ͑ͯ React ͷ SSR ༻ϑϨʔϜϫʔΫ σʔλऔಘͷ͋Δ React ίϯϙʔωϯτΛ αʔόʔαΠ υϨϯμϦϯά͢Δͷ͸ΊΜͲ͍͘͞ ͜ͷϑϨʔϜϫʔΫΛ࢖͏ͱ؆୯ʹͳΔ

No content

؀ ڥ ߏ ங ख ॱ 1. S3 όέοτΛ࡞Δ 2. Lambda ༻ͷ IAM Role Λ࡞Δ 3. Lambda ؔ਺Λ࡞Δ 4. WebαΠτΤϯυϙΠϯτͱͯ͠ API Gateway Λ࡞Δ 5. ϧʔτϦιʔεʹϓϩΩγϦιʔεΛ௥Ճ͢Δ 6. Ϧιʔεʹ ANY ϝιουΛ௥Ճ͢Δ 7. APIΛσϓϩΠ͢Δ 8. Lambda ؔ਺ʹݖݶΛ௥Ճ͢Δ 9. CloudFront σΟετϦϏϡʔγϣϯΛ࡞੒͢Δ 10. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘

L a m b d a ͱ E x p re s s ͷ ౷ ߹ E x p re s s ͱ N e x t ͷ ౷ ߹

σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2. ੒Ռ෺Λ zip ͢Δ 3. S3 ʹΞοϓϩʔυ͢Δ 4. S3 ͔Β Lambda ؔ਺Λߋ৽͢Δ

Pros • ॊೈͳ CDN Ωϟογϡͷίϯτϩʔϧ • AWS WAF ʹΑΔॊೈͳΞΫηείϯτϩʔϧ Cons • FaaS ͳͷͰίʔϧυελʔτͷ౓ʹ਺ඵ͔͔Δ • खॱ͕ෳࡶ • ઃఆΛཧղ͢Δͷʹ͕͔͔࣌ؒΔ • SAM ͱ͔ Terraform ͱ͔Λ࢖ͬͨํ͕͍͍

No content

؀ ڥ ߏ ங ख ॱ 1. Firebase ίϯϑΟάϑΝΠϧΛ࡞੒͢Δ 2. ϓϩδΣΫτΛ࡞੒͢Δ 3. ϓϩδΣΫτΛׂΓ౰ͯΔ 4. Next.js ΞϓϦέʔγϣϯ༻ͷؔ਺Λॻ͘

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 ʹ ର Ԡ ͯ͠ ͍ Δ

σ ϓ ϩ Π ख ॱ 1. Next.js ͷΞϓϦέʔγϣϯΛϏϧυ͢Δ 2. Firebase ʹσϓϩΠ͢Δ

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

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

α ϯ ϓϧί ʔ υ 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

T h a n k y o u