{"id":41040,"date":"2024-11-06T02:46:23","date_gmt":"2024-11-06T02:46:23","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41040"},"modified":"2024-11-26T06:37:45","modified_gmt":"2024-11-26T06:37:45","slug":"48-next-js%ec%99%80-nest-js%eb%a5%bc-%eb%b0%b0%ed%8f%ac%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95-%ed%99%98%ea%b2%bd%eb%b3%80%ec%88%98-%ec%84%a4%ec%a0%95%ea%b3%bc-%eb%b9%8c%eb%93%9c-%ec%b5%9c%ec%a0%81","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41040\/","title":{"rendered":"48.Next.js\uc640 Nest.js\ub97c \ubc30\ud3ec\ud558\ub294 \ubc29\ubc95, \ud658\uacbd\ubcc0\uc218 \uc124\uc815\uacfc \ube4c\ub4dc \ucd5c\uc801\ud654 \ubc29\ubc95"},"content":{"rendered":"

<\/p>\n

1. \uc11c\ub860<\/h2>\n

\ubaa8\ub358 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \uc8fc\ubaa9\ubc1b\uace0 \uc788\ub294 Next.js\uc640 Nest.js\ub294 \uac01\uac01 React\uc640 Node.js\uc758 \uac15\ub825\ud55c \ub3c4\uad6c\uc785\ub2c8\ub2e4. Next.js\ub294 \uc11c\ubc84 \uc0ac\uc774\ub4dc \ub80c\ub354\ub9c1(SSR)\uacfc \uc815\uc801 \uc0ac\uc774\ud2b8 \uc0dd\uc131(SSG)\uc744 \uc9c0\uc6d0\ud558\ub294 React \ud504\ub808\uc784\uc6cc\ud06c\uc774\uba70, Nest.js\ub294 \ud6a8\uc728\uc801\uc778 \uc11c\ubc84 \uc0ac\uc774\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub3c4\ub85d \ub3d5\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 Next.js\uc640 Nest.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud558\ub294 \ubc29\ubc95, \ud658\uacbd\ubcc0\uc218 \uc124\uc815, \ube4c\ub4dc \ucd5c\uc801\ud654 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

2. Next.js \ubc30\ud3ec\ud558\uae30<\/h2>\n

2.1. Next.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ube4c\ub4dc\ud558\uae30<\/h3>\n

Next.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud558\uae30 \uc804\uc5d0 \uba3c\uc800 \ube4c\ub4dc\ud574\uc57c \ud569\ub2c8\ub2e4. \ubc30\ud3ec \uc2dc \ube4c\ub4dc \ubc84\uc804\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n

npm run build<\/code><\/pre>\n
\uc774 \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 .next<\/code> \ub514\ub809\ud130\ub9ac\uc5d0 \ucd5c\uc801\ud654\ub41c \ube4c\ub4dc\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc774 \ube4c\ub4dc\ub97c \uc11c\ubc84\uc5d0 \ubc30\ud3ec\ud558\uc5ec \uc2e4\uc81c \uc11c\ube44\uc2a4\ub97c \uc81c\uacf5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
2.2. Next.js \ubc30\ud3ec \ubc29\ubc95<\/h3>\n
2.2.1. Vercel\uc744 \uc0ac\uc6a9\ud55c \ubc30\ud3ec<\/h4>\n
Next.js\ub294 Vercel\uc774 \ub9cc\ub4e0 \ud504\ub808\uc784\uc6cc\ud06c\uc774\ubbc0\ub85c, Vercel\uc744 \ud1b5\ud574 \ubc30\ud3ec\ud558\ub294 \uac83\uc774 \uac00\uc7a5 \uac04\ub2e8\ud569\ub2c8\ub2e4. Vercel\uc5d0 \ud68c\uc6d0\uac00\uc785\ud55c \ud6c4 \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 GitHub \ub610\ub294 GitLab \ub808\ud3ec\uc9c0\ud1a0\ub9ac\ub97c \uc120\ud0dd\ud558\uc138\uc694. Vercel\uc740 \uc790\ub3d9\uc73c\ub85c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac10\uc9c0\ud558\uace0 \ubc30\ud3ec\ud560 \uc900\ube44\ub97c \ud569\ub2c8\ub2e4.<\/p>\n
2.2.2. \ub137\ub9ac\ud30c\uc774(Netlify) \uc0ac\uc6a9\ud558\uae30<\/h4>\n
\ub137\ub9ac\ud30c\uc774\ub294 \uc815\uc801 \uc0ac\uc774\ud2b8\uc640 \uc11c\ubc84\ub9ac\uc2a4 \uae30\ub2a5\uc744 \uac16\ucd98 \uc778\uae30 \uc788\ub294 \ud638\uc2a4\ud305 \uc11c\ube44\uc2a4\uc785\ub2c8\ub2e4. Netlify \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \uc5f0\uacb0\ud55c \ud6c4, Build Command\ub97c npm run build<\/code>, Publish Directory\ub97c out<\/code>\ub85c \uc124\uc815\ud55c \ud6c4 \ubc30\ud3ec\ub97c \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
2.2.3. AWS\uc5d0 \ubc30\ud3ec\ud558\uae30<\/h4>\n
AWS Elastic Beanstalk\ub97c \uc0ac\uc6a9\ud574 Next.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud560 \uc218\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. Elastic Beanstalk \ud658\uacbd\uc744 \uc0dd\uc131\ud558\uace0, Docker \ub610\ub294 Node.js \ud50c\ub7ab\ud3fc\uc744 \uc120\ud0dd\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc5c5\ub85c\ub4dc\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n
3. Nest.js \ubc30\ud3ec\ud558\uae30<\/h2>\n
3.1. Nest.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ube4c\ub4dc\ud558\uae30<\/h3>\n
Nest.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud574 \ube4c\ub4dc\ud569\ub2c8\ub2e4:<\/p>\n
npm run build<\/code><\/pre>\n
\uc774 \uba85\ub839\uc5b4\ub294 dist<\/code> \ub514\ub809\ud130\ub9ac\uc5d0 \ucef4\ud30c\uc77c\ub41c JavaScript \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
3.2. Nest.js \ubc30\ud3ec \ubc29\ubc95<\/h3>\n
3.2.1. Heroku\ub97c \ud1b5\ud55c \ubc30\ud3ec<\/h4>\n
Heroku\ub294 \ube60\ub974\uac8c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud558\uae30\uc5d0 \uc801\ud569\ud55c \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc785\ub2c8\ub2e4. Heroku CLI\ub97c \uc0ac\uc6a9\ud574 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud55c \ud6c4, git push heroku main<\/code> \uba85\ub839\uc5b4\ub85c \ubc30\ud3ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
3.2.2. AWS EC2\uc5d0 \ubc30\ud3ec\ud558\uae30<\/h4>\n
AWS EC2 \uc778\uc2a4\ud134\uc2a4\uc5d0 Nest.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ubc30\ud3ec\ud558\ub824\uba74 Node.js \ubc0f Git\uc744 \uc124\uce58\ud558\uace0, \ud544\uc694\ud55c \uc885\uc18d\uc131\uc744 \uc124\uce58\ud55c \ud6c4, \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ud074\ub860\ud558\uc5ec \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
3.2.3. Docker\ub97c \uc0ac\uc6a9\ud55c \ubc30\ud3ec<\/h4>\n
Nest.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 Docker \ucee8\ud14c\uc774\ub108\ub85c \uac10\uc2f8\uc11c \ubc30\ud3ec\ud558\uba74, \ud658\uacbd\uc5d0 \uad6c\uc560\ubc1b\uc9c0 \uc54a\uace0 \uc2e4\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Dockerfile\uc744 \uc791\uc131\ud55c \ud6c4, docker build<\/code> \uba85\ub839\uc5b4\ub85c \uc774\ubbf8\uc9c0\ub97c \uc0dd\uc131\ud558\uace0, docker run<\/code> \uba85\ub839\uc5b4\ub85c \ucee8\ud14c\uc774\ub108\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n
4. \ud658\uacbd\ubcc0\uc218 \uc124\uc815<\/h2>\n
4.1. Next.js \ud658\uacbd\ubcc0\uc218 \uc124\uc815<\/h3>\n
Next.js\uc5d0\uc11c\ub294 .env.local<\/code> \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uc5ec \ube44\ubc00 \uc815\ubcf4\ub97c \uc800\uc7a5\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, API \ud0a4\ub098 \ub370\uc774\ud130\ubca0\uc774\uc2a4 \uc5f0\uacb0 \ubb38\uc790\uc5f4\uc744 \uc815\uc758\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
DATABASE_URL=my_database_url<\/code><\/pre>\n
\ud658\uacbd\ubcc0\uc218\ub294 process.env.DATABASE_URL<\/code>\uc744 \ud1b5\ud574 \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Next.js\ub294 \ud658\uacbd\ubcc0\uc218\uac00 NEXT_PUBLIC_<\/code>\ub85c \uc2dc\uc791\ud558\uc9c0 \uc54a\ub294 \uacbd\uc6b0 \ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc774\ub4dc\uc5d0\uc11c \uc811\uadfc\ud560 \uc218 \uc5c6\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n
4.2. Nest.js \ud658\uacbd\ubcc0\uc218 \uc124\uc815<\/h3>\n
Nest.js\uc5d0\uc11c\ub294 @nestjs\/config<\/code> \ud328\ud0a4\uc9c0\ub97c \uc0ac\uc6a9\ud558\uba74 \ud658\uacbd\ubcc0\uc218 \uad00\ub9ac\uac00 \ud3b8\ub9ac\ud574\uc9d1\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc774 \uc124\uce58\ud558\uace0 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
npm install @nestjs\/config<\/code><\/pre>\n
\uadf8 \ud6c4, ConfigModule<\/code>\uc744 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ubaa8\ub4c8\uc5d0 \ucd94\uac00\ud558\uace0, .env<\/code> \ud30c\uc77c\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud658\uacbd\ubcc0\uc218\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n
DATABASE_URL=my_database_url<\/code><\/pre>\n
\uadf8 \ud6c4, this.configService.get('DATABASE_URL')<\/code>\ub97c \uc0ac\uc6a9\ud574 \ud658\uacbd\ubcc0\uc218\uc5d0 \uc811\uadfc\ud569\ub2c8\ub2e4.<\/p>\n
5. \ube4c\ub4dc \ucd5c\uc801\ud654 \ubc29\ubc95<\/h2>\n
5.1. Next.js \ube4c\ub4dc \ucd5c\uc801\ud654<\/h3>\n
Next.js\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uae30 \uc704\ud574 \uba87 \uac00\uc9c0 \ubc29\ubc95\uc774 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n