[Front-End] Netlify와 Github로 React 프로젝트 배포

프로젝트 Home 화면

 

이번에 React로 만든 facebook 깃허브의 issue페이지를 불러오는 프로젝트다!

Netlify를 사용해 빠르게 배포해보려 한다.

 

Netlify 배포 과정

1. 로그인 후, Add new site 클릭 → Import an existing project 클릭

그럼 이런 화면이 뜬다.

 

2. 나는 GitHub에 올려둔 걸 배포할 거라서 Deploy with GitHub 선택!

 

 

3. Configure the Netlify app on GitHub 클릭 → 레파지토리를 연결해 준다

여기서  All repositories를 눌러 모든 저장소를 연결해 줄 수도 있다.

나는 Only select repositories로 배포할 저장소만 선택해 줬다.

 

 

4. 연결할 branch 설정

나는 main 브랜치와 연결해 줬다.

 

 

5. Build Settings 해주기 → Deploy 프로젝트 → 배포 완료✨

Base directory : Github에 여러 파일이 있을 때, Netlify가 어떤 걸 배포해야 하는지 알려줘야 함.

난 파일들이 모두 최상단에 있어서 Base directory를 비워뒀다. 만약 파일 경로가 기본 설정과 다르다면 경로 파일을 지정해줘야 함!

 

Build command : package.json의 scripts에 있는 명령어를 가져와야 한다.

 

Publish directory : build 할 파일 선택.

 

Add environment variables : 따로 사용한 key값이 있다면 여기에 넣어주면 된다. 난 GitHub API를 사용해서 token 값을 따로 넣어줬다. 

 


 

배포 후, 빌드하는 과정에서 에러가 발생했었는데, 다음 게시글에서 해결 과정에 대해 포스팅하도록 하겠다.👽

 

<배포한 프로젝트 바로가기>

 

Facebook Issues

 

se-eun-park-facebookissues.netlify.app