Firebase에서 최신 Next.js를 사용하여 웹사이트 운영하기

2023년 8월 26일 Google IO Extended 인천에서 발표한 자료입니다. Angular Universal, Astro, Django, Flask, Next.js, Nuxt 그리고 SvelteKit 등 다양한 웹 프레임워크를 통합하여 firebase deploy 하나의 명령어로 쉽게 배포할 수 있는 Firebase Hosting을 소개합니다.

Transcript

1. Firebase,Hosting,Next, Firebaseীࢲ ୭न Next.jsܳ ࢎਊೞৈ ਢࢎ੉౟ ਍৔ೞӝ
2. Android GDE ੉थ޹ ীয೐ۨ޷ই ✈ ܻ٘ ೐ۿ౟ূ٘ ѐߊ੗
4. Hosting Section 01
5. ࢲߡ ஹೊఠܳ ؀ৈ೧઱ח ࢲ࠺झ ૒੽ ࢲߡܳ ҳੑೞҊ ਍৔ೡ ೙ਃ হ੉ ഐझ౴ স୓о ઁҕೞח ࢲߡܳ ࠽۰ ࢎਊ ഐझ౴੉ ޖ঺ੋоਃ? Hosting
6. Hosting ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗
7. рױೞѱ ੿ܻೞݶ… ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Hosting 1.ഐझ౴ ࢲߡܳ ࠽ܽ׮ 2.ղ ௏٘ܳ ࢲߡী ৢܽ׮ 3.بݫੋਸ ҳੑೞҊ DNSܳ ࢲߡ৬ োѾೠ׮
8. ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Hosting 1.ec2ܳ ࢎਊ (ࢲߡܳ ࠽ܽ׮) 2.ecsա eks۽ ੉޷૑ܳ ҙܻ (ߡ੹ҙܻ) 3.Github action ژח Jenkins۽ ௏٘ܳ ৢܽ׮ 4.DNS ۨ௏٘ܳ route53ী ١۾ೞҊ ec2 ip৬ োѾ AWSܳ ੉ਊೞݶ…
9. ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Hosting 1.ec2ܳ ࢎਊ (ࢲߡܳ ࠽ܽ׮) 2.ecsա eks۽ ੉޷૑ܳ ҙܻ (ߡ੹ҙܻ) 3.Github action ژח Jenkins۽ ௏٘ܳ ৢܽ׮ 4.DNS ۨ௏٘ܳ route53ী ١۾ೞҊ ec2 ip৬ োѾ AWSܳ ੉ਊೞݶ… 🫠(য۰ਕ…)
10. ਢ झఠ٣ ઺੉ۄ ߓನח ੜ ݽܰחؘ… ష੉ ೐۽ં౟ۄ ߓನী ௼ѱ न҃ॳҊ र૑ ঋ਷ؘ… ೠ ചݶ݅ ੓ח рױೠ ೐۽ં౟ੋؘ ੉ۧѱө૑ ߓನ೧ঠೞա… పझ౟݅ ࡈܻ ೧ࠁҊ र਷ؘ… 🤔
11. ਢ झఠ٣ ઺੉ۄ ߓನח ੜ ݽܰחؘ… ష੉ ೐۽ં౟ۄ ߓನী ௼ѱ न҃ॳҊ र૑ ঋ਷ؘ… ೠ ചݶ݅ ੓ח рױೠ ೐۽ં౟ੋؘ ੉ۧѱө૑ ߓನ೧ঠೞա… పझ౟݅ ࡈܻ ೧ࠁҊ र਷ؘ… 🤗 Simple ߓನ!
12. Firebase Hosting Section 02
13. ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Firebase Hosting 1.ec2ܳ ࢎਊ (ࢲߡܳ ࠽ܽ׮) 2.ecsա eks۽ ੉޷૑ܳ ҙܻ (ߡ੹ҙܻ) 3.Github action ژח Jenkins۽ ௏٘ܳ ৢܽ׮ 4.DNS ۨ௏٘ܳ route53ী ١۾ೞҊ ec2 ip৬ োѾ AWSܳ ੉ਊೞݶ…
14. ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Firebase Hosting Firebase Hostingਸ ੉ਊೞݶ… 😎 1.firebase init 2.firebase deploy
15. ਢ ೐۽ં౟ܳ ഐझ౴ ࢲߡী ߓನ೧ࠁ੗ Firebase Hosting 1.firebase init 2.firebase deploy Firebase Hostingਸ ੉ਊೞݶ… LIVE DEMO 😎
16. firebase init
17. firebase deploy
18. بݫੋ ੗زࢤࢿ ߂ োѾ DNS ੗ز োѾ بݫੋ ߸҃ب оמ
19. ߡ੹ ҙܻ ܀ߔ оמ
20. Integrate Web Framework with Hosting Section 03
21. ਢ ಕ੉૑ܳ ѐߊೞח җ੿ীࢲ ѻח য۰਑ਸ ઴੉ח Ѫ੉ ઱ ݾ੸ ؘ੉ఠ߬੉झ োز, మ೒݁ ഋక੄ ಴ળ, ࣁ࣌ ҙܻ, ௏٘ ੤ࢎਊ ١੄ ӝמਸ ನೣ Web Framework? Web Framework ୹୊: ਤఃߔҗ
22. ೐ۨ੐ਕ௼݃׮ html, css, js۽ ࠽٘ೞҊ ߣٜೞח ߑध੉ ׮নೞ׮ Server Side, Static Generation੉ ೣԋ ࢎਊغח ҃਋ب ੓׮ Web Framework ࠽٘ח ׮নೞ׮ Web Framework
23. ೐ۨ੐ਕ௼ ೐۽ં౟ܳ ߓನ೧ࠁ੗ Web Framework 1.ec2 ੽ࣘ 2.ജ҃ ࣁ౴ (ex: node package ࢸ஖) 3.࠽٘ झ௼݀౟ ૒੽ प೯ (ex: npm run dev) AWSܳ ੉ਊೞݶ…
24. Web Framework 1.ec2 ੽ࣘ 2.ജ҃ ҳ୷ (ex: node package ࢸ஖) 3.࠽٘ झ௼݀౟ ૒੽ प೯ (ex: npm run dev) AWSܳ ੉ਊೞݶ… 🛠 ೐ۨ੐ਕ௼ী ݏѱ ૒੽ ജ҃ ࣁ౴! ೐ۨ੐ਕ௼ ೐۽ં౟ܳ ߓನ೧ࠁ੗
25. Web Framework 1.ec2 ੽ࣘ 2.ജ҃ ҳ୷ (ex: node package ࢸ஖) 3.࠽٘ झ௼݀౟ ૒੽ प೯ (ex: npm run dev) Firebase Hostingਸ ੉ਊೞݶ… 🤔 ജ҃ ࣁ౴ਸ যڌѱ ೞ૑? ೐ۨ੐ਕ௼ ೐۽ં౟ܳ ߓನ೧ࠁ੗
26. Web Framework
27. Web Framework Firebase Hostingਸ ੉ਊೞݶ… ೐ۨ੐ਕ௼ী ݏח ࠽٘ ജ҃ ঌইࢲ ࣁ౴! 1.firebase init 2.firebase deploy 😎 ೐ۨ੐ਕ௼ ೐۽ં౟ܳ ߓನ೧ࠁ੗
28. Web Framework Firebase Hostingਸ ੉ਊೞݶ… ೐ۨ੐ਕ௼ী ݏח ࠽٘ ജ҃ ঌইࢲ ࣁ౴! 1.firebase init 2.firebase deploy 😎 LIVE DEMO ೐ۨ੐ਕ௼ ೐۽ં౟ܳ ߓನ೧ࠁ੗
29. firebase init ೐ۨ੐ਕ௼ ੗ز х૑
30. firebase deploy Server Side х૑ Cloud Functionਵ۽ ߓನ
31. SSR - Cloud Function GCP۽ SSR ҙܻо оמೞ׮
32. Atomic ߓನ ೐ۿ౟ ܀ߔ द ೣԋ ߓನػ Functionsب э੉ ܀ߔ
33. Next.js੄ Static, SSR ݽف х૑ Web Framework Static SSR <Image> <Suspense> ୭न App Routerө૑ ݽف ز੘!
34. Detail Function Section 04
35. ജ҃ ܻ࠙ Detail Function dev, alpha, beta, stage, prod पޖীࢲח ݾ੸ী ٮۄ ׮নೠ ജ҃ ܻ࠙о ೙ਃ
36. ജ҃ ܻ࠙ Detail Function dev, alpha, beta, stage, prod पޖীࢲח ݾ੸ী ٮۄ ׮নೠ ജ҃ ܻ࠙о ೙ਃ ࠁউ ӂೠ ۽٘ ߖ۠झ ࢲߡ-೐ۿ౟ ݒட … AWSܳ ੉ਊೞݶ… Ҋ۰೧ঠೡ Ѫ੉ ݆׮
37. ജ҃ ܻ࠙ - ޷ܻࠁӝ ଻օ Detail Function firebase hosting:channel:deploy {preview_name}
38. ജ҃ ܻ࠙ - ޷ܻࠁӝ ଻օ Detail Function firebase hosting:channel:deploy {preview_name} LIVE DEMO
39. ޷ܻࠁӝ ଻օ ߓನ ޷ܻࠁӝ ଻օҗ पઁ ജ҃ ܻ࠙
40. ഐझ౴ ࢸ੿ Custom Detail Function firebase.jsonਵ۽ ഐझ౴ ࢸ੿ ߸҃ оמ
41. ݃ޖܻ Section 05
42. ࢎप पޖীࢲח… ݃ޖܻ ࠁউ, ӂೠ, ో ഒਊ ١ ؊ ݆਷ ࣁࠗ ࢸ੿੉ ೙ਃ
43. ݃ޖܻ ਢ झఠ٣ ઺੉ۄ ߓನח ੜ ݽܰחؘ… ష੉ ೐۽ં౟ۄ ߓನী ௼ѱ न҃ॳҊ र૑ ঋ਷ؘ… ೠ ചݶ݅ ੓ח рױೠ ೐۽ં౟ੋؘ ੉ۧѱө૑ ߓನ೧ঠೞա… పझ౟݅ ࡈܻ ೧ࠁҊ र਷ؘ… о߶਍ ߓನо ೙ਃೡ ٸ +
44. ݃ޖܻ ਫ਼Ӭ ഘࠁ
45. ݃ޖܻ ਫ਼Ӭ ഘࠁ ѐߊ੗ ݃۝ ҳة೧઱ࣁਃ!
46. Thank You ੉थ޹, ীয೐ۨ޷ই ܻ٘ ೐ۿ౟ূ٘ ѐߊ੗