【Next.js】Next.js로 만든 앱을 Vercel에 배포하는 방법 【React】

소개

Vercel은 Next.js를 개발하는 회사에서 정적 사이트와 서버리스 기능을 호스팅하는 클라우드 플랫폼입니다.
JAMStack 웹사이트와 서비스를 GUI로 쉽게 배포할 수 있다.
Next.js에 이르러서는, 우치로 배포하지 않으면 본령 발휘할 수 없어요-적인 김으로 Vercel이 배포를 추천하고 있다.
요금 플랜은 3개가 있지만, 비영리의 개인 운용이나 포트폴리오용이라면 무료의 Hobby 플랜으로 OK.
종량 과금도 아니기 때문에 기본 무료로 사용할 수 있다.

배포 방법

먼저 만든 앱의 리포지토리를 GitHub에 생성한다.
빨간색 원을 클릭합니다.
그런 다음 여기에 저장소 이름을 입력합니다.
뭐든지 좋지만, 기본 만들고 있는 앱의 디렉토리명이라든지.
입력하면 다른 모든 건너뛰고 가장 마지막 "Create repository"를 클릭

가능하면 vscode 여기에서 커밋 메시지를 넣고 빨간색 원을 클릭하십시오.
커밋 메시지는 무엇이든 좋지만, 처음이라면 "initial commit"라든지.


github이 만든 리포지토리의 페이지에 가서 커맨드 라인에서 소스 코드 올린다면 이것이라. 같은 김으로 쓰여진 소스 코드를 입력

~$ git remote add origin https://github.com/ユーザー名/リポジトリ名.git

~$ git push -u origin main

여기까지 하고 Github를 리로드 하면 파일이 제대로 오르고 있을 것.
그런 다음 Vercel에 로그인하고 New Project를 클릭하십시오.

Import Git Repository를 배포하려는 앱의 Import를 클릭합니다.
개인의 경우 PERSONAL ACCOUNT 클릭

이 화면에서 RESTAPI 등을 만들어 거기에서 API로 교환하거나 환경 변수가 필요한 경우는 Environment Variables에 입력한다. 완료되면 추가를 클릭합니다.

환경 변수 주위를 OK라면 Deploy를 클릭으로 올바르게 배포 할 수 있으면 색종이가 춤을 춥니 다! !

배포 후 업데이트

업데이트는 vscode에서 commit하고 터미널에서 git push -u origin main에서 배포가 실행 즉시 반영된다.