React - netlify로 배포하기 (feat. github)

cra 형태로 github에 push된 리액트 프로젝트를 netflify 에서 배포해보겠습니다.

깃허브 레포에 저장된 react 프로젝트의 폴더 (e.g: src, public ...)가 repository의 최상위에 위치해 있어야합니다.

(상위 디렉토리가 존재하지 않아야 함)

 

1. netlify - github 계정으로 가입

 

깃허브로 가입하자

2. New site from Git 아이콘 클릭

 

3. Github 선택

 

 

4. 본인 레포지토리에서, 배포하고자 하는 리액트 레포지토리를 선택합니다.

 

 

5. 아래의 내용을 기입합니다. 브랜치는 master로 잡습니다.

Build command: yarn build

Publish directory: /build

 

 

 

6.  Production deploys 에서 배포하려는 Production 선택 클릭

 

 

7. 배포 성공

 

8. 배포 url 확인

 

 

주의할 점

1. deploy log는 success 로 뜨더라도, 막상 url에 접속하면 404 가 뜰 수 있습니다.

2. deploy log 를 잘 살펴보면, warning 문구가 보이는데, react 소스 코드에서 해당 라인을 꼭 지워줘야 합니다.

- 로컬에서 npm run start를 할 땐, 해당 warning 문구가 있어도 정상 작동하지만, 배포 환경에선 이런 warning 문구가 뜨지 않도록, 문제가 되는 코드를 주석처리하거나 지워야 합니다.

소스코드에서 위의 useEffect 선언부를 지운 후 다시 git push 합니다.

다시 배포 프로세스를 거친 후 url을 확인합시다.

- 해결