(React) GitHub와 Netlify를 사용한 배포

React 파일을 현재 자신의 GitHub 저장소에 올린 상태일 경우 Netlify를 사용해서 웹 서버를 배포해보자!

 

1. Netlify 사이트에 들어가서 GitHub와 연동하여 계정 로그인을 한 후 첫 프로젝트 생성합니다.

그렇게 하면 위의 사진과 같이 화면이 나올 것 입니다.

 

2. 그 후 사진 에 나오는 Add new site를 클릭합니다.

 

3. Import an existing project를 눌러 어느 저장소와 연결할지 선택하는 페이지가 아래와 같이 나타납니다.

4. GitHub 클릭시 자신의 GitHub 계정으로 다시 한번 더 로그인 하는 페이지가 나오는데 로그인 하시면 됩니다.

 

5. 로그인 시 저장소가 나타나는데 여기서 자신이 배포하고 싶은 저장소를 누르면 됩니다.

 

6. 저장소를 선택했다면 이제 site 이름과 build settings를 해줘야합니다.

6-1. Base directory

 

말 그대로 기본 경로입니다.

react 폴더가 다른 폴더 하위에 있다면 react 폴더 경로를 맞춰줘야합니다.

그렇지 않으면 react 폴더 경로 내부에 있는  package.json을 찾을 수 없어서 build가 되지않습니다.

 

6-2. Build command

여기엔 npm run build라고 치면 아마 오류가 발생할 것입니다.

그러니 CI = npm run build 라고 입력해주면 됩니다.

 

6-3. publish directory

여기는 build를 입력 해주면 되지만 Base directory를 입력함에 따라 자동으로 추가가 됩니다.

 

이 과정을 모두 거친다면 자신의 웹 서버 배포에 성공한 것 입니다!