[ React + netlify ] React 앱 netlify로 배포하기 (GitHub 연동, page not found 해결 )

 

Scale & Ship Faster with a Composable Web Architecture | Netlify

 

회원가입 및 로그인, 팀 생성 과정은 생략 

 

Add new site - Import an existing project

연동 원하는 깃 레포지토리 선택

빌드 설정해주기

• 레포지토리 안에 프론트/백을 나누어 관리중이라면 프론트 폴더(client)를 Base directry에 입력한다. 
• build command 는 CI=npm run build 를 사용하는데, 나중에 toml 파일을 활용하면 이 설정은 덮여씌워진다.
• publish directory는 client/build

그러고나서 deploy 버튼을 누르면 배포가 성공 ! 

이 아니고, not found 에러가 난다.

 

netlify.toml 파일 작성하기

• 위에서 not found 에러가 나는 것은 react-router가 client 측에서 라우팅을 처리하므로 root가 아닌 페이지로 바로 접속하면 Netlify가 처리하는 방법을 알지 못하기 때문이라고 한다. 
  ( 출처 : https://velog.io/@1000peach/ReactNetlify-Netlify%EB%A1%9C-React-app-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B3%A0-Custom-Domain-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0#2-page-not-found )
• 이것저것 방법을 찾아보다가, public/_redirects 파일을 생성하여 설정하라고 해서 배포를 했는데,
  neltify에서는 redirects 룰이 적용되지 않았다고 했다.
• 찾아보다보니 neltify.toml 파일에 적용해도 된다고 해서 이 방법으로 해결했다. 
• build 설정도 같이 해주었다.

[build]
  publish = "build"
  command = "npm run build"
[[redirects]]
  from = "/*"
  to = "index.html"
  status = 200

 

package.json 에 homepage 주소 추가하기

• netlify에 적용된 주소를 추가한다. 

 

그러면 이제 배포 성공 !