Netlify로 React 포트폴리오 배포하는 법 — GitHub 연동까지

GitHub에 코드를 올렸는데, 그걸 실제 URL로 접속할 수 있는 사이트로 만들려면 어떻게 해야 할까.

React 포트폴리오를 로컬에서 완성한 뒤 딱 이 단계에서 막혔다.

여러 배포 플랫폼 중 Netlify를 선택했다. 무료로 쓸 수 있고, GitHub 저장소와 연동하면 푸시할 때마다 자동으로 배포까지 해준다. 처음엔 GitHub 연동 방법도 몰랐고 빌드 설정도 헷갈렸는데, 막상 해보니 단계가 단순했다.

Netlify 가입 — GitHub 계정으로 바로 연결

netlify.com에 접속해서 GitHub 계정으로 로그인하면 된다. 별도 가입 없이 GitHub 연동이 바로 된다. 로그인하면 대시보드 화면이 나온다.

GitHub 저장소 연동하는 법

처음에 GitHub 연동을 어디서 하는지 몰라서 헤맸는데, 경로는 간단하다.

• 1 대시보드에서 Add new site 클릭
• 2 Import an existing project 선택
• 3 GitHub 선택 후 권한 허용
• 4 배포할 저장소(repository) 선택

연동이 완료되면 아래처럼 Deploys 화면에서 배포 이력을 확인할 수 있다. 푸시할 때마다 자동으로 새 항목이 쌓인다.

GitHub 연동 후 Deploys 화면 — 푸시할 때마다 자동으로 배포 이력이 쌓인다

빌드 설정 — 이 두 가지만 확인하면 된다

저장소를 선택하면 빌드 설정 화면이 나온다. 처음엔 뭘 입력해야 하는지 몰라서 헷갈렸는데, React 프로젝트라면 아래 두 가지만 맞게 들어가 있으면 된다.

Build command: pnpm build Publish directory: dist

Build & deploy 설정 화면 — Build command와 Publish directory 두 가지를 확인한다

💡 npm run build인지 pnpm build인지 헷갈릴 때 4편에서 pnpm으로 패키지를 설치했다면 pnpm build를 입력하면 된다. npm을 사용했다면 npm run build로 입력한다. Publish directory는 Vite 기반 React 프로젝트라면 dist가 기본값이다.

Deploy — 버튼 하나로 배포 완료

빌드 설정을 확인했으면 Deploy site 버튼을 클릭한다. 1~2분 안에 배포가 완료되고 https://프로젝트명.netlify.app 형태의 URL이 생긴다. 이 주소로 실제 접속이 가능하다.

💡 이후 수정 사항은 자동 반영된다 GitHub 저장소에 푸시할 때마다 Netlify가 자동으로 다시 빌드하고 배포한다. 로컬에서 수정 → git push 하면 사이트에 바로 반영되는 구조다.

배포 완료 후 netlify.app 주소로 실제 접속한 화면

Netlify는 GitHub 저장소를 연동하는 것만으로 React 프로젝트를 무료로 배포할 수 있는 플랫폼이다.
빌드 설정은 Build command(pnpm build)와 Publish directory(dist) 두 가지만 확인하면 된다.
배포 후에는 GitHub에 푸시할 때마다 자동으로 사이트에 반영된다.