๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

Side project

(10)
[์‚ฝ์งˆ๋กœ๊ทธ] Heroku์—์„œ ์–ด๋””๋กœ ๊ฐˆ์•„ํƒˆ๊นŒ ์™œ ๊ฐˆ์•„ํƒ€์•ผ ํ•˜๋Š”๊ฐ€ Next.js ์™€ Strapi Headless CMS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์—ˆ๊ณ  ๊ฑฐ์˜ 2๋…„๊ฐ„ ์†Œ์†Œํ•˜๊ฒŒ ์—…๋ฐ์ดํŠธ๋„ ํ•˜๊ณ  ๋ฌธ์ œ๋„ ํ•ด๊ฒฐํ•ด๊ฐ€๋ฉฐ ํฌํŠธํด๋ฆฌ์˜ค๋กœ ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ช‡ ๋‹ฌ ์ „ Heroku๊ฐ€ Free tier๋ฅผ ์ค‘๋‹จํ•œ๋‹ค๋Š” ๋‰ด์Šค๋ฅผ ๋“ฃ๊ฒŒ ๋˜์—ˆ๋‹ค. Strapi๋ฅผ Heroku์— ๋ฐฐํฌํ•ด๋†“์•˜๋Š”๋ฐ... ์‚ฝ์งˆํ•˜๋ฉฐ ๋ฐฐํฌํ•˜๊ณ  ํž˜๋“ค๊ฒŒ ๋ชจ์€ ๋ฐ์ดํ„ฐ๋“ค์ธ๋ฐ... ์ง€๊ธˆ ๋” ์ด์ƒ ํ•ด๋‹น ํ”„๋กœ์ ํŠธ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜์ง„ ์•Š์ง€๋งŒ ๊ทธ๋ƒฅ ์ด๋ ‡๊ฒŒ ๋ณด๋‚ด๊ธฐ๋Š” ๋„ˆ๋ฌด ์•„์‰ฌ์› ๋‹ค. ํ•˜์ง€๋งŒ ์•„์ง ์‹œ๊ฐ„์ด ๋‚จ์•˜์œผ๋‹ˆ๊นŒ ํ•˜๊ณ  ์ฐจ์ผํ”ผ์ผ ๋ฏธ๋ฃจ๋‹ค ์˜ค๋Š˜์— ์ด๋ฅด๊ฒŒ ๋œ๋‹ค. Heroku๋Š” 2022๋…„ 11์›” 28์ผ๋ถ€๋กœ Free tier๋ฅผ ์ค‘๋‹จํ•œ๋‹ค๊ณ  ํ•˜๋‹ˆ ์ด์ œ ์—ดํ˜๋„ ์•ˆ๋‚จ์•˜๋‹ค. ๊ทธ ์ „์— ์ด์‚ฌ๋ฅผ ๋งˆ์ณ์•ผํ•œ๋‹ค. ๋Œ€์ฒด ๋ฐฉ์•ˆ์— ๋Œ€ํ•ด์„œ ์ด์•ผ๊ธฐ ํ•ด๋†“์€ ๊ธ€๊ณผ ..
[ํ”Œ์ ๊ธฐ๋ก] NextAuth๋กœ ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ (with Prisma) ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค.
[ํ”Œ์ ๊ธฐ๋ก] Prisma Seeding ๐ŸŒฑ ์š”์ฆ˜ Prisma๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰์ค‘์ธ๋ฐ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ ์ƒˆ๋กœ ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค์ด ๋งŽ๋‹ค. Seeding๋„ ๊ทธ ์ค‘ ํ•œ ๊ฐ€์ง€์ธ๋ฐ ํŠœํ† ๋ฆฌ์–ผ ๋™์˜์ƒ๊ณผ ๊ธ€๋“ค์„ ๋ณด๋‹ค๋ณด๋‹ˆ seeding, seed๋ผ๋Š” ๋‹จ์–ด๊ฐ€ ์ž์ฃผ ๋‚˜์™”๋‹ค. ๋‹น์žฅ ํ•„์š”ํ•ด๋ณด์ด์ง€๋Š” ์•Š์•„์„œ ๋‚˜์ค‘์— ํ•„์š”ํ•  ๋•Œ์— ๋ด์•ผ์ง€ ํ•˜๊ณ  ์ง€๋‚˜์ณค๋Š”๋ฐ ํ•„์š”ํ•œ ์ˆœ๊ฐ„์ด ์™”๋‹ค. (์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋‹ค์‹œํ”ผ Prisma๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋‹ˆ Prisma, Prisma seeding์— ๋Œ€ํ•œ ๋‚˜์˜ ์ดํ•ด๊ฐ€ ์ œํ•œ์ ์ผ ์ˆ˜ ์žˆ๊ณ  ์ด ๊ธ€์ด ๊ณต์‹ ๋ฌธ์„œ์— ๊ธฐ์ดˆํ•ด ์žˆ๊ธดํ•˜์ง€๋งŒ ๋” ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜๊ธฐ ๋ฐ”๋ž€๋‹ค.) Prisma์˜ ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์ด ๋งํฌ๋ฅผ ํ™•์ธํ•˜๋ผ. Seeding your database Learn how to seed your database using Prism..
[ํ”Œ์ ๊ธฐ๋ก] PlanetScale branch ๋ณ€๊ฒฝ ๋ฐ deploy request (Prisma String์˜ default ๊ฐ’) [ํ”Œ์ ๊ธฐ๋ก] Next.js + Prisma + PlanetScale ์„ธํŒ…ํ•˜๊ธฐ (Vercel ๋ฐฐํฌ) ์ด ๊ธ€์€ ๋‹จ์ˆœํžˆ ์„ธํŒ…๋งŒ์„ ์œ„ํ•œ ๊ธ€์ด์ง€ ๋‚ด๋ถ€์ ์ธ ๋กœ์ง์ด๋‚˜ ์Šคํ‚ค๋งˆ ๋“ฑ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ์ „ํ˜€ ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฉฐ, ์–ด๋– ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์—ญ์‹œ ๋‹ค๋ฃจ์ง€ ์•Š๋Š”๋‹ค. PlanetScale์˜ https://planetscal birdmee.tistory.com ์ง€๋‚œ ์„ธํŒ…ํŽธ์—์„œ 8๋ฒˆ์— "promote ํ›„์— main ๋ธŒ๋žœ์น˜๋Š” production์„ ์œ„ํ•œ ๋ธŒ๋žœ์น˜๊ฐ€ ๋˜๊ณ  main ๋ธŒ๋žœ์น˜์— ๋Œ€ํ•ด ์ง์ ‘์ ์ธ ์Šคํ‚ค๋งˆ ๋ณ€๊ฒฝ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ์ด ๊ธ€์„ ์ž‘์„ฑํ•˜๊ธฐ ์ „์— ํ…Œ์ŠคํŠธ ์‚ผ์•„ ๋งŒ๋“ค์–ด ๋ณธ DB์—์„œ ์ด ๋ธŒ๋žœ์น˜์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์ž˜ ๋ชจ๋ฅด๊ณ  promoteํ•œ ์ƒํƒœ์—์„œ ์Šคํ‚ค๋งˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๊ณ  ํ•ด์„œ ์—๋Ÿฌ๋กœ ๋‹นํ™ฉํ–ˆ๋˜ ์ ์ด ์žˆ๋‹ค. " ๋ผ๊ณ  ์ž‘์„ฑํ–ˆ์—ˆ๋‹ค. ๊ทธ๋Ÿผ..
[ํ”Œ์ ๊ธฐ๋ก] Next.js + Prisma + PlanetScale ์„ธํŒ…ํ•˜๊ธฐ (Vercel ๋ฐฐํฌ) ์ด ๊ธ€์€ ๋‹จ์ˆœํžˆ ์„ธํŒ…๋งŒ์„ ์œ„ํ•œ ๊ธ€์ด์ง€ ๋‚ด๋ถ€์ ์ธ ๋กœ์ง์ด๋‚˜ ์Šคํ‚ค๋งˆ ๋“ฑ์— ๋Œ€ํ•œ ์„ค๋ช…์ด ์ „ํ˜€ ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฉฐ, ์–ด๋– ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ ์ธ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ์—ญ์‹œ ๋‹ค๋ฃจ์ง€ ์•Š๋Š”๋‹ค. PlanetScale์˜ https://planetscale.com/blog/how-to-setup-next-js-with-prisma-and-planetscale ๊ธ€์— ๊ธฐ์ดˆํ•œ ๋‚ด์šฉ์ด๋ฉฐ ํ•ด๋‹น ๊ธ€์˜ ๋™์˜์ƒ ๋ฒ„์ „(๋งํฌ) ๋„ ์ฐธ์กฐํ–ˆ๋‹ค. How to set up Next.js with Prisma and PlanetScale A step-by-step guide for using PlanetScale and Prisma with Next.js. planetscale.com 1. PlanetScale ๊ฐ€์ž… / ๋กœ๊ทธ์ธ ํ›„ Create New Database..
[ํ”Œ์ ๊ณ„ํš] ์ƒˆ๋กœ์šด ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•ด๋ณด์ž ์ƒˆ๋กœ์šด ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•  ์‹œ๊ฐ„์ด๋‹ค. ๋ฌด์—‡์ด๋“  ์ง์ ‘ํ•ด๋ด์•ผ ๋Š๋ผ๋Š” ๊ฒƒ๋„ ๋งŽ๊ณ  ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋„ ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค. ์ด๋ฒˆ์—๋Š” ์–ด๋–ค ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด๋ด์•ผ์ง€ ๋ณด๋‹ค ์–ด๋–ค ์Šคํƒ์„ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค๋ฉด์„œ ์‹œ์ž‘ํ•ด๋ณด๊ณ ์ž ๋ถ€๋ฆ‰๋ถ€๋ฆ‰ ์‹œ๋™์„ ๊ฑด๋‹ค. ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ์Šคํƒ / ๊ธฐ์ˆ  ๋ฐ ์ด์œ  Next.js : ์ง€๋‚œ ํ”„๋กœ์ ํŠธ ๋•Œ ์ฒ˜์Œ ์ ‘ํ•ด๋ดค๋Š”๋ฐ ๋” ๊ณต๋ถ€ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค. ๋˜ ๊ณต์‹๋ฌธ์„œ๊ฐ€ ๋งค์šฐ ์นœ์ ˆํ•˜๋‹ค(๊ณ  ํ•œ๋‹ค๋ผ๊ณ  ์–ด๋””์„œ ๋“ค์€ ๊ฒƒ ๊ฐ™์€๋ฐ ์‹ค์ œ๋กœ ๊ทธ๋ ‡๊ฒŒ ๋Š๊ปด์ ธ ๋ธ”๋กœ๊ทธ์˜ Next.js ์นดํ…Œ๊ณ ๋ฆฌ์— ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ผ๋ถ€ ๋ฒˆ์—ญํ•ด๋†“๊ธฐ๋„ ํ•˜์˜€๋‹ค.). PlanetScale : Serverless DB Platform์œผ๋กœ ์ตœ๊ทผ์— Stackoverflow ํŒŸ์บ์ŠคํŠธ๋ฅผ ๋“ฃ๋‹ค๊ฐ€ Next.js CEO์™€ PlanetScale CEO๊ฐ€ ์ด์•ผ๊ธฐ ๋‚˜๋ˆ„๋Š” ๊ฒƒ์„ ๋“ฃ๊ณ  ์ฒ˜์Œ ..
[ํ”Œ์ ๊ธฐ๋ก] ๋‰ด์Šค๋ ˆํ„ฐ ๋ชจ์Œ ์‚ฌ์ดํŠธ NEWใƒปLEใƒปKA NEWใƒปLEใƒปKA(๋‰ด๋ ˆ์นด) โžก๏ธ https://newleka.vercel.app ๐ŸŽฌ ์‹œ์ž‘ ๋ฐ ๊ณ„๊ธฐ ์‹œ์ž‘์€ ์ง„์ง€ํ•˜๊ฒŒ ๊ถ์„œ์ฒด๋กœ ์ž‘์„ฑํ•ด๋ณด๊ฒ ๋‹ค. ์•ฝ ๋ฐ˜๋…„ ์ „์ฏค ์‹œ์ž‘ํ•œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ๋‹ค. (ํŠน๋ณ„ํ•œ ์ผ์ด ์—†์œผ๋ฏ€๋กœ ๊ฑฐ์˜ ๋ฉ”์ธ์ธ) ๋ญ”๊ฐ€๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€๋ฐ ํด๋ก  ์ฝ”๋”ฉํ•˜๋Š” ๊ฑด ์ง€๊ฒน๊ณ ... ๋‚ด๊ฐ€ ์ง์ ‘ ์„œ๋น„์Šค๋ฅผ ์šด์˜ํ•ด๋ณด๊ณ  ์‹ถ์€ ๊ฒƒ๋„ ์žˆ๊ณ , ์ง์ ‘ ๋งŒ๋“ค๋ฉด ๋ญ”๊ฐ€๋ฅผ ๋” ๋งŽ์ด ๋ฐฐ์šฐ์ง€ ์•Š์„๊นŒ ํ•˜๋Š” ์ƒ๊ฐ์œผ๋กœ ์ด๋Ÿฐ์ €๋Ÿฐ ์ƒ๊ฐ์„ ํ•˜๋‹ค๊ฐ€ ๋– ์˜ค๋ฅธ ์•„์ด๋””์–ด์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ํ‰์†Œ์— ๋‰ด์Šค๋ ˆํ„ฐ ๋ณด๋Š” ๊ฑธ ๊ฝค ์ข‹์•„ํ–ˆ๋‹ค. ๋งŽ์€ ๋‰ด์Šค๋ ˆํ„ฐ๋ฅผ ๊ตฌ๋…ํ–ˆ๋˜ ๊ฑด ์•„๋‹ˆ์ง€๋งŒ ํฌํ„ธ ์‚ฌ์ดํŠธ์— ๋Œ์•„๋‹ค๋‹ˆ๋ฉด์„œ ๋ณด๊ฒŒ ๋˜๋Š” ์ •๋ณด๋“ค๊ณผ ๋‹ค๋ฅด๊ฒŒ ๋ˆ„๊ตฐ๊ฐ€ ์ •์„ฑ์„ ๋“ค์—ฌ ๋ชจ์•„๋†“์•˜๊ฑฐ๋‚˜ ์ •๋ฆฌํ•œ ๋˜๋Š” ๋งŒ๋“  ๋ฐ์ดํ„ฐ๋ผ ๊ทธ๋Ÿฐ์ง€ ์งง์€ ์‹œ๊ฐ„์—๋„ ๋งŽ์€ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๊ณ  ์–‘์งˆ์˜ ์ •๋ณด๋“ค์ด ๋งŽ์•˜๋‹ค. ์—ฌ๋Ÿฌ ๋ถ„์•ผ์˜..
[์‚ฝ์งˆ๋กœ๊ทธ] Next.js(Vercel) + Strapi(Heroku) 504 ์—๋Ÿฌ ๋Œ€์ฒ˜ (์ด ๊ธ€์€ 2021๋…„ 7์›” 11์ผ ๊ธฐ์ค€ ๊ธ€์ด๋‹ค.) ์‚ฝ์งˆ์š”์•ฝ๐Ÿ‘จ‍๐Ÿ”ง ์Šคํƒ: Next.js(Vercel) + Strapi - Postgres(Heroku) ์ฆ์ƒ: ์ดˆ๊ธฐ ์ ‘๊ทผ์‹œ 504 ์—๋Ÿฌ๊ฐ€ ๋œธ. (Serverless Function Timeout) ๋Œ€์ฒ˜: ๋งค๋ฒˆ ์„œ๋ฒ„์— ์š”์ฒญํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” getServerSideProps์—์„œ getStaticProps๋กœ ๋ณ€๊ฒฝ ํ›„ revalidate ์„ค์ •. (์—๋Ÿฌ์— ๋Œ€ํ•œ ๊ทผ๋ณธ์ ์ธ ํ•ด๊ฒฐ์ฑ…์ด ์•„๋‹ˆ๋ผ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ๋Œ€์ฒ˜ํ•œ ๊ฒƒ์ด๊ธฐ์— ๋Œ€์ฒ˜๋ผ๊ณ  ์ผ๋‹ค.) ์‚ฝ์งˆ๊ตฌ๊ตฌ์ ˆ์ ˆ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•˜๋‹ค๊ฐ€ ํ•œ๋™์•ˆ ๋‹ค๋ฅธ ํ† ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ์ง€์ž‘๊ฑฐ๋ฆฌ๋‹ค๋ณด๋‹ˆ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ๋Š” ์ €์–ด์–ด ๋ฉ€๋ฆฌ ๋ฉ€์–ด์ ธ๋ฒ„๋ ธ๊ณ  ์†๋Œ€๊ธฐ๋„ ๊ท€์ฐฎ์•„์กŒ๋‹ค. ์†”์งํžˆ ๋งํ•˜๋ฉด ํ•ด๊ฒฐํ•ด์•ผ ํ•  ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ ํ•ด๊ฒฐ์ฑ…์ด ๋ณด์ด์ง€ ์•Š์•„์„œ ๋” ๊ฑด๋“ค๊ธฐ๊ฐ€ ์‹ซ์—ˆ๋‹ค...