Next.js 애플리케이션 배포

Next.js 앱을 호스팅할 수 있는 많은 플랫폼이 있습니다. 그 중에서 저는 Vercel을 더 좋아합니다. Vercel은 Next.js 애플리케이션을 호스팅하는 가장 빠른 방법이며 GitHub에 직접 연결됩니다. 따라서 프로젝트에 새 커밋을 만들 때마다 빌드 프로세스가 트리거되고 새 버전이 자동으로 배포됩니다.

이와 함께 모니터링, 빌드 미리 보기, HTTPS 및 SSL 인증서, Env 변수 및 사용자 정의 도메인 사용과 같이 Vercel 팀에서 제공하는 기타 수많은 기능이 있습니다. 이러한 모든 기능은 Vercel 덕분에 무료입니다. 아직 모르신다면 Next.js는 Vercel 팀에서 만들고 관리합니다!

이제 프로세스에 들어가겠습니다.

GitHub에서 프로젝트를 푸시합니다.

프로젝트의 GitHub에 리포지토리를 만듭니다. 프로세스는 매우 간단합니다. GitHub 계정에 로그인하고 새 저장소를 클릭하기만 하면 됩니다.



리포지토리를 공개 또는 비공개로 유지할 수 있습니다. 완료되면 프로젝트를 GitHub에 푸시해야 합니다. 리포지토리를 만들 때 단계가 제공됩니다. 모든 변경 사항을 커밋하고 브랜치에 푸시하기만 하면 됩니다.
이러한 명령이 혼란스럽다면 다음 명령을 하나씩 실행하십시오.

git commit -m "Ready for Deployment"
git remote add origin "URL for your git origin"
git push -u origin main

이는 저장소에 표시되어야 하는 것과 동일한 명령입니다.

Vercel을 GitHub 계정과 연결:

이제 아래 링크에서 Vercel로 이동하여 GitHub를 사용하여 계정을 만드십시오.

https://vercel.com/

계정을 승인하면 대시보드로 리디렉션됩니다.



대시보드는 이와 유사해야 합니다. 4개의 프로젝트가 실행 중이므로 볼 수 있지만 비어 있어야 합니다.

새 프로젝트를 클릭하십시오

GitHub에서 사용 가능한 모든 프로젝트를 보여주는 페이지가 표시됩니다. 아무 것도 보이지 않으면 Vercel과 GitHub를 연결하는 버튼이 있을 것입니다. 해당 버튼을 클릭하고 Vercel이 GitHub에 액세스하도록 허용합니다.



배포하려는 프로젝트를 선택합니다. 여기에 프로젝트 이름을 입력할 수 있습니다. 이 이름은 배포된 URL에 나타나므로 좋은 이름을 지정해야 합니다.

다른 모든 항목은 비워 둡니다. (빌드 및 설치 명령에 대해 다른 구성이 있는 경우 편집할 수 있습니다.) 기본 앱의 경우 비워 둘 수 있습니다.

이제 프로젝트에서 환경 변수를 사용하는 경우 아래의 환경 변수 설정을 클릭하십시오.

여기에서 개발 모드에서 .env 파일을 사용하여 설정한 환경 변수를 설정할 수 있습니다. 동일한 변수 이름을 사용해야 합니다.



중요한!

브라우저 측에서 사용되는 환경 변수가 있는 경우 변수 앞에 NEXT_PUBLIC_ 를 붙여야 합니다. 기본적으로 env 변수는 Node.js 환경에서만 사용할 수 있으므로 브라우저에서 액세스하려면 이 접두사를 사용해야 합니다.

이제 우리는 배포를 클릭할 수 있는 모든 것을 구성했으므로 Vercel이 마법을 부리는 것을 지켜볼 수 있습니다!

몇 분 후 운이 좋고 오류가 없으면 사이트가 성공적으로 배포됩니다! 사이트 대시보드로 리디렉션됩니다. 배포 중에 문제가 발생하면 빌드 로그를 확인하십시오. 배포 탭에서 해당 로그를 찾을 수 있습니다. 로그를 확인하여 버그를 찾아 해결하고 새 커밋을 푸시합니다. Vercel은 자동으로 새 커밋을 감지하고 사이트 구축을 다시 시작합니다.

내 프로젝트가 성공적으로 배포되었으며 여기에 있습니다!

https://next-js-portfolio-weld.vercel.app/



읽어 주셔서 감사합니다! 블로그가 마음에 드셨다면 좋아요를 누르고 공유하세요. 에 웹 개발 및 프로그래밍에 대한 많은 트윗을 게시합니다. 이러한 콘텐츠가 마음에 들면 나를 팔로우할 수 있습니다! 감사!