Deploying your Next.js App ①③ - 한국어
마지막 기본 강좌, next.js 앱을 운영할 수 있게 배포할 것이다.
Next.js 개발자들이 만든 플랫폼인 Vercel로 어떻게 배포하는지 알아본다. 또, 배포 옵션에 대해 다룬다.
사전 준비 : 이 과정에서는 GitHub 계정이 필요하다.
이 강좌에서 배울 것은
- Vercel를 이용해 Next.js 앱을 배포하는 방법
- DPS 작업 : 개발, 미리보기, 배송(배포)
- 자신의 호스팅 서버에 Next.js 앱을 배포하는 방법
깃헙에 푸시
배포하기 전에, 아직 푸시하지 않았다면 깃헙에 Next.js 앱을 푸시해보자. 쉽게 배포하도록 해줄 것이다.
- 개인의 깃헙 계정에서는,
newjs-blog라는 새로운 저장소를 생성하자. - 저장소는 비공개이거나 공개일 수 있다. README나 다른 파일을 미리 셋팅할 필요는 없다.
- repo 세팅에 대해 더 필요한 도움이 있다면 깃허브 가이드를 찾아보자.
그리고나서 :
- 로컬 Next.js 앱에서 깃 저장소를 초기화하지 않았다면 지금 하자.
- 깃헙 저장소(레포지토리)로 푸시
GitHub로 푸시하려면, 커멘드창에 깃헙 username을 입력해야 한다.
git remote add origin https://github.com/<username>/nextjs-blog.git
git push -u origin main
이제 깃헙 저장소가 준비됐고, 다음 페이지로 계속 가자.
Vercel로 배포
Next.js를 운영하기 위해 배포하는 것은 Next.js의 개발자들이 만든 플랫폼인 Vercel을 사용하면 쉽게 된다.
Vercel 은 정적이고, 헤드리스 콘텐츠, 커머스나 데이터데이스와 통합하기 위해 구축된 하이브리드 애플리케이션으로 서버가 없는 플랫폼이다. 우리는 개발과 미리보기, 제공을 프론트엔드 팀이 쉽게 할 수 있도록 기본적으로 만들어놓았다. 당신은 이것을 무료로 사용할 수 있다.
Vercel 계정 만들기
먼저, https://vercel.com/signup에서 Vercel 계정을 만들자. 깃헙을 이용해 계정을 생성할 수 있다.
nextjs-blog 저장소를 가져오기
가입하면, Vercel에서 nextjs-blog 저장소를 가져온다. 여기에서 할 수 있다 : https://vercel.com/import/git
- 깃헙을 위한 Vercel 설치가 필요할 것이다. 모든 저장소에 연결할 수 있다.
- Vercel을 설치하면, nextjs-blog를 가져온다.
기본으로 제공되는 셋팅 값을 변경할 필요 없이 사용하면 된다. Vercel은 자동으로 당신의 앱을 위한 셋팅을 감지한다.
- 프로젝트 이름
- 최상위 폴더
- 구축 명령
- 출력 폴더
- 개발 명령
배포할 때, Next.js앱의 구축이 시작될 것이다. 그것은 1분 이내에 끝난다.
도움도 가능하다 : 만약 배포가 실패한다면, 언제든지 GitHub Discussions에서 도움을 받을 수 있다. 배포에 대해 더 알고 싶다면 문서를 읽어보자.
작업이 끝나면, 배포된 URL을 받을 수 있다. url 을 클릭하면 Next.js 스타터 페이지를 볼 수 있게 된다.
축하해요! Next.js 앱을 운영하기 위해 배포했어요.
다음 장에서는Vercel과 추천하는 workflow에 대해 자세히 다룰 것이다.
번역 : 2022. 11. 29.
영어를 잘하지 못하므로 부정확할 수 있습니다. 더 정확한 설명 or 번역이 있다면 댓글 환영합니다 *
출처
'Next.js' 카테고리의 다른 글
| Next.js : Next.js and Vercel - 한글 (0) | 2023.01.04 |
|---|---|
| Next.js : Fetching Data at Request Time - 한글 (0) | 2022.11.20 |
| Next.js : getStaticProps Details - 한글 (0) | 2022.11.07 |
| Next.js : Implement getStaticProps - 한글 (0) | 2022.11.06 |
| Next.js : Creating a simple blog architecture - 한글 (0) | 2022.11.05 |