Skip to content

Vercel에서 여러 GitHub 사이트 배포하기 ​

이전 문서: Vercel에서 여러 GitHub 사이트 배포하기 게시일: 2024-2-27 마지막 수정: 2024-11-18 원래 분류: 🚀 설치 및 배포 태그: 배포 방식, NotionNext 요약: Vercel은 여러 웹사이트를 동시에 배포할 수 있습니다.

웹사이트 하나만으로 요구 사항을 충족할 수 없다면 Vercel에서 여러 웹사이트를 반복 배포할 수 있습니다. Vercel 외에도 Netlify, Cloudflare 등에서도 비슷한 방식으로 여러 사이트를 배포할 수 있습니다.

배포 원리 ​

여러 웹사이트를 배포하기 전에 Vercel의 사이트 배포 원리와 GitHub 프로젝트 관계를 간단히 이해해야 합니다.

Vercel에서 GitHub 프로젝트 가져오기 ​

Vercel은 여러 프로젝트를 배포할 수 있습니다. GitHub 저장소를 Vercel로 가져오거나 다른 방식으로 코드를 업로드할 수 있습니다.

Untitled

Vercel이 GitHub 코드를 감시해 자동 배포 ​

프로젝트를 GitHub 연결로 가져왔다면 Vercel은 저장소의 코드를 자동으로 연결하고 감시합니다. GitHub 코드가 수정되면 사이트를 다시 배포합니다.

Vercel에서 GitHub 연결 끊기 ​

프로젝트에서 disconnect를 통해 GitHub 저장소 연결을 끊을 수 있습니다. 그러면 코드 수정은 실시간으로 감시하지 않습니다. 이 상태에서도 Notion에서 수정한 글과 설정은 계속 실시간으로 읽을 수 있습니다.

Untitled

Vercel 프로젝트를 GitHub와 다시 연결 ​

연결이 끊긴 Vercel 프로젝트나 처음부터 연결하지 않은 프로젝트는 여기에서 수동으로 연결할 수 있습니다.

Untitled

GitHub를 연결한 뒤 감시할 브랜치를 지정할 수 있습니다. 예를 들어 main 브랜치를 지정할 수 있습니다.

연결 후 해당 브랜치의 코드를 임의로 조금만 수정해도 Vercel은 자동으로 코드를 가져와 설치와 배포를 시도합니다.

Vercel과 GitHub의 연결 관계 ​

  1. Vercel 프로젝트와 GitHub 저장소 연결에는 제한이 있습니다.

같은 GitHub 저장소는 Vercel 안에서 최대 3개 프로젝트까지만 연결할 수 있습니다. 그 이상은 허용되지 않습니다.

  1. Vercel 관리 화면에서 현재 프로젝트가 GitHub 저장소의 어느 브랜치에 연결되는지 지정할 수 있습니다.

GitHub 저장소에는 무수히 많은 브랜치를 만들 수 있습니다. 각 브랜치의 코드는 완전히 독립적이며, 각 브랜치를 서로 다른 사이트 용도로 계획할 수 있습니다.

Untitled

여러 NotionNext 사이트를 배포하는 방법 ​

위 특성을 이해했다면 여러 사이트 배포를 시도할 수 있습니다.

GitHub 브랜치 관리 ​

GitHub의 NotionNext 프로젝트에서 여러 브랜치를 만들 수 있습니다. 브랜치 수만큼 웹사이트를 운영할 수 있습니다.

왼쪽 위의 브랜치 이름을 클릭하고 View all branches를 열면 모든 브랜치를 관리할 수 있습니다.

Untitled

new branch를 클릭해 새 브랜치를 만듭니다.

Untitled

예를 들어 저는 deploy/tangly1024.com 브랜치를 만들어 제 웹페이지 배포 전용으로 사용했습니다.

Untitled

이 브랜치의 코드를 수정하려면 왼쪽 위에서 이 브랜치로 전환하면 됩니다.

💡 여러 브랜치를 만드는 것은 필수 단계가 아닙니다. 예를 들어 제가 배포한 여러 프로젝트는 모두 같은 브랜치에 연결되어 있고, Vercel의 서로 다른 프로젝트 환경 변수로 사이트 내용을 바꾸거나 notion_config에서 사이트 정보를 직접 수정합니다.

Vercel의 여러 프로젝트 관리 ​

Vercel 패널 홈에서 새 프로젝트 추가를 클릭합니다.

Untitled

NotionNext 가져오기를 선택합니다.

Untitled

주의할 점은 NotionNext 저장소는 최대 3번까지만 반복 가져올 수 있다는 것입니다. 새 사이트를 더 가져와야 한다면 기존 프로젝트의 GitHub 연결을 끊으세요. 연결 해제 방법은 앞에서 설명했습니다.

프로젝트를 가져온 뒤 이 프로젝트에 Notion_Page_ID를 설정하는 것을 잊지 마세요.

마지막 ​

궁금한 점이 있다면 댓글 영역에 남겨 주세요.

원문 링크 ​

https://docs.tangly1024.com/article/vercel-multi-sites