React 프로젝트 Netlify 에 배포하기

Netlify 란...

구축한 서버가 없이도 간단하게 프론트 프로젝트를 깃헙과 연동하여 간단하게 배포가 가능한 사이트이다.

전에 만들었던 사이트도 여기에 배포했었다.

깃헙 레포와 연동시켜놓으면 push 할 때마다 자동으로 갱신돼서 편했다.

예전에 다뤄본 AWS 는 다 좋은데... 설정이 복잡스러웠음..^^ 할때마다 이거저거 보느라 바빴지만

 

넷틀리는 그냥 올리면 끝..! 이지만 그래도 처음 리액트 프로젝트를 배포할 때 해야하는 것들을 수 많은 에러 끝에 작성해본다.

 

 

 

여러 방법을 시도해서 순서가 맞을지 모르겠는데...

 npm install netlify-cli -g netlify deploy

일단 설치부터 해준다.

 

 

그리고 배포의 기본인

npm run build

로 build 파일을 만들어준다.

나는 이것도 모르고 안 만들어줘서 고생 좀 했다.

 

그리고 셋팅의 build & Deploy 부분에서 Build settings 부분을 수정해준다.

build failed 에러가 발생하는 가장 대부분의 이유라고 한다.

 

이러면 엔간한 문제가 아니면 빌드가 된다.

 

아래에 존재하는 수많은 Failed..

 

이 문제로 고생을 많이 했는데 https://velog.io/@remon/React-Netlify%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

[React] Netlify로 배포하기, "build.command" failed 오류 해결

여기에 자세히 나와있다. 적게 일하고 돈 많이 버세요!

 

---

 

이제 배포는 제대로 됐지만 한가지 문제가 발생했다.

 

원래 개발하면 url은 localhost 인 탓에 넷틀리파이로 들어가니 라우팅처리가 제대로 되지 않는 것이다...!!

구글링과 끈기로 ... 해결을 해보자.😂

 

로컬에선 잘나오는데..

 

빌드는 성공했건만... 이 문제에 맞닥뜨렸다.

일단 넷틀리파이의 404 문제는

public 폴더 안에 _redirects 이름으로 /* 모든 주소에

/index.html 파일을, 보여주라는 의미의 파일을 만들어줬다.

 

 

그러니 404 문제는 해결됐지만 계속 빈 화면만 뜬다. (왜 ..?)

침착하게 콘솔창을 확인해준다.

아무래도 .env 문제인 듯하다. 어떻게 해결해야할지 구글링 해보니

환경 변수를 직접 넷틀리파이에 설정해주면 되는 듯하다.

Add a variable 를 눌러서 Import from a .env file 을 눌러 원래 존재했던 .env 파일의 내용을 긁어온다.

하나씩 추가해줄 수 있긴 하지만.. 카카오톡 공유나 파이어베이스나 이거저거 내용이 워낙 길어져서 나는 긁어와서 붙여넣었다.

 

 

드디어 배포 성공!

로컬에선 전혀 문제가 없었던 공공API가 불러와지는데 문제가 생기긴 했지만 일단 홈페이지는 정상 작동한다 ^^...