step 7 과 이어집니다.
Next.js 배포
우리가 만든 앱을 한번 배포해 봅시다.
일단 github에 레포지토리를 만들고 push 해보시길 바랍니다.
git remote add origin https://github.com/<username>/nextjs-blog.git
git push -u origin main저의 경우에는 이미 레포지토리를 만들고 진행하여 생략하였습니다.
Vercel를 통한 배포
Next.js 에서 가장 쉬운 배포 방법은 vercel 을 통한 배포입니다.
Vercel은 헤드리스 콘텐츠, 커머스 또는 데이터베이스와 통합되도록 설계된 정적 및 하이브리드 애플리케이션을 위한 serverless 플랫폼입니다.
일단 Vercel 계정을 만들어 봅시다.
https://vercel.com/signup 이곳으로 가 계정을 만듭니다. GitHub으로 계속하기를 선택하고 가입 절차를 밟으십시오.
Import your repo
https://vercel.com/import/git 이곳에 가서 자신이 만든 레포지토리를 임포트 해보세요.
그리고 기본 설정을 건드릴 필요 없습니다 vercel 이 알아서 앱을 파악후에 설정해줍니다.
deploy 버튼을 누르게 되면 우리의 앱은 빌드되기 시작합니다.
다끝나면 deployment URLs 을 얻을 수 있게되고 접속하여 웹을 확인해 보세요.
Next.js 와 Vercel
Vercel 은 Next.js 의 창작자로 부터 만들어 졌고 첫번째로 Next.js 를 지원했습니다.
Vercel로 배포할 땐 다음 항목들이 기본적으로 작동합니다.
Static Generation and assets(JS, CSS, 이미지, 글꼴 등)을 사용하는 페이지는 매우 빠르게Vercel Edge Network에서 자동으로 제공됩니다.
Server-Side Rendering 및 API 경로를 사용하는 페이지는 자동으로 분리된 서버리스 함수가 됩니다. 이를 통해 페이지 렌더링 및 API 요청을 무한대로 확장할 수 있습니다.
Vercel 에는 다양한 기능들이 더 있습니다.
- Custom Domains : Vercel에 배포되면 Next.js 앱에 사용자 정의 도메인을 할당할 수 있습니다. 참고 자료 : https://vercel.com/docs/custom-domains
- 환경 변수 : Vercel에서 환경 변수를 설정할 수도 있습니다. 참고 자료 : https://vercel.com/docs/build-step#environment-variables, 이런식의 환경변수 사용 가능 : https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
- Automatic HTTPS : HTTPS는 기본적으로 사용되며(사용자 지정 도메인 포함) 추가 구성이 필요하지 않습니다. SSL 인증서를 자동 갱신합니다.
Preview Deployment for Every Push
이기능은 옵셔널 한번 읽어보고 생각해봅시다.
Vercel로 배포를 완료 했다면 다음과 같이 따라해보세요.
branch를 하나 새로 파고
몇개의 변화를 push 해보세요
새로운 pull request를 만들어 보세요.
풀 리퀘스트 페이지에서 Vercel봇의 코멘트를 볼 수 있습니다.
다음과 같이 풀리퀘스트가 적용된 페이지를 보여주고 확인 할 수 있도록 도와줍니다. 신기.
그리고 풀리퀘스트가 적용된 값이 마음에 들면 머지하게 되면 자동으로 페이지를 적용시켜 줍니다.
Develop, Preview, Ship
Develop: 우리는 Next.js에 코드를 작성하고 실행중인 Next.js 개발 서버를 사용하여 핫 재로드 기능을 활용했습니다.
Preview: 우리는 GitHub에 있는 브랜치에 변경 사항을 푸시했고, Vercel은 URL을 통해 사용할 수 있는 미리보기 배포를 만들었습니다. 이 미리보기 URL을 다른 사용자와 공유하여 피드백을 받을 수 있습니다. 코드 검토 외에도 배포 미리보기를 수행할 수 있습니다.
Ship: We’ve merged the pull request to main to ship to production.
다른 방식의 배포
만약 지금까지의 step을 따라오셨으면 package.json에는 다음과 같은 빌드 및 시작 스크립트가 있어야 합니다.
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}npm run build 를 통해 빌드 진행 해 보세요.
빌드 스크립트는 .next 폴더에 프로덕션 애플리케이션을 빌드합니다.
빌드 후 npm run start 는 정적으로 생성된 페이지와 서버측 렌더링 페이지 및 API 라우트를 모두 지원하는 Node.js 서버를 시작합니다.
