[배포관련] react프로젝트를 netlify로 배포해보면서 마주한 것들

현재 진행중인 프로젝트를 netlify로 배포하면서 마주했던 것들을 정리해봤습니다.

 

배포과정

netlify 들어가서 github에 올린 프로젝트를 import하면 아래같은 설정창이 보임

배포할 branch 선택하고 package.json 의 빌드 명령어 이용하면 됩니다.

 

build command : CI= npm run build

• ci= 뒤에 공백 + 빌드 명령어
• 뭔지는 따로 알아보면 조을듯 함

publish directory : build

 

---

URL 바꾸기 및 배포 진행과정 확인

url 바꾸기

site configuration → site details

change site name을 누르고 원하는 url로 바꾸면 된다.

 

배포 진행 과정 확인

deploys 탭을 누르면 커밋메세지 + 배포 진행 상태등 확인이 가능함

그 외 이것저것 세팅이나 확인할수 잇는게 많긴 한데 다 확인해보진 않았따.

---

redirect

이 글을 쓰고 있는 이유인데 여기서 애를 좀 먹었음..

💡 issue1 (homepage 설정)

우리 프로젝트의 경우 맨 처음에 package.json에

homepage : "https://someUrl/someString/" (예시 링크) 라고 돼있었던걸 확인할 수 있었는데

이 상태로 그냥 두고 배포하면 아래처럼 뜨는듯 함

homepage 필드 설정 값이랑 실제 배포 url이 차이가 나서 이런 현상이 생기는거 같음

페이지는 아마 배포 경로를 통해 정적 자원를 로드하게 될텐데 실제 배포 url이랑
package.json 의 배포 경로 설정이 달라서 이런 문제가 발생하는듯 하다

개발자 도구 네트워크 탭에서 js, css를 못가져오고 있는걸 확인할 수 있었다

 

그래서 package.json의 homepage 필드 설정값을 아예 없애버리거나 netlify 로 배포한 url로 변경시켜주면 되는듯 하다

 

💡 issue2 (새로고침 에러)

정상적으로 동작하는듯 보이는데, 페이지 이동후에 새로고침을 하면 아래처럼 뜨게 됨

 

 

리액트 라우터가 클라이언트에서 라우팅을 처리하기 때문임

그래서 root가 아닌 페이지에 새로 접속할 때 netlify 서버가 route를 처리할 수 없다.(?)

아무튼 redirect 해줘야 함

 

📌 방법1

public 폴더 하위에 _redirects 파일을 만들고 아래처럼 적으면 됨

/*  /index.html  200

📌 방법2

루트 디렉토리에 netlify.toml 파일을 만들고 아래처럼 적으면 됨

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

이렇게 해주면 잘 작동할 것임

 

💡 issue3 (백엔드 서버 연결)

백엔드 서버 url : "http://backendURL:8080/" (예시)

axios 세팅에서 맨 처음 우리의 BASEURL은 이거였음

근데 이걸 그대로 둔 상태에서 배포 페이지에 들어가면 문제가 생김

netlify 배포는 https 인데 서버는 http라 이러는거 같음

netlify는 https 고정이라서 백엔드 서버를 https로 올려주는 방법 외로 당장 해결할 방법을 찾아야함..

 

그래서 검색도 해보며 고민해봤는데 이전에 다른 팀원이 CORS 해결하려고 프록시 설정해준거 생각났는데,

프록시 서버로 우회하는 방법을 이용해야 할것 같다고 생각했음

아무튼 setupProxy.js 에 설정된 대로 axios의 BASEURL 을 ‘/api’ 로 바꾸면 아래와 같은 결과가 나온다

응답은 오는데, 초기 페이지 소스 그대로 오는 상황임

 

이렇게 되는 이유를 추론해본거로는,, 위에서 설정한 redirect 때문인듯 함

 

api요청까지 index.html,

즉, 클라이언트측으로 redirect 시켜버리는 탓에 응답으로 페이지 소스가 그대로 오는듯 함

그리고 netlify는 프록시가 안먹는다는 얘기도 봤던거 같았기도,, (잘 모르겠으니 다시 찾아보려함)

 

그래서 setupProxy.js 파일은 마음 한켠에 다시 묻어두고 다른 방법을 찾아봤슴

생각해본 해결방법은 '/api/' 도 위에서 추가한 설정으로 redirect 시키는것

 

해결한 방법은 위에서 추가했던 netlify.toml 파일에 아래와 같은 코드를 추가해줬음

[[redirects]]
from = "/api/*"
to = "<http://backendURL/:splat>"
status = 200
force = true

/api/로 시작하는 요청은 http://backendURL/:splat로 리다이렉트하도록 지정한 것

• :splat 이 뭔지 궁금하시다면 따로 찾아보시면 좋을것 같음

 

🫤 만약 위에서 방법1을 채택했다면?

public/_redirects 에 다음과 같이 적어주면 됨

/api/*  http://backendURL/:splat  200
/*  /index.html  200

❗️주의할 점은 순서임

/*  /index.html  200
/api/*  http://backendURL/:splat  200

이렇게 적으면 아마도 /* /index.html 이 먼저 읽혀서 /api/ 요청이 백엔드로 리다이렉트되지 못하는거 같음

실제로 해봤는데 순서 바꾸면 안됨

(방법2 도 마찬가지)

 

📝 정리

새로고침 문제를 해결하는 redirect 방법에는 두가지가 있음

 

1. public/_redirects 에 아래와 같은 코드 추가

/*  /index.html  200

 

2. netlify.toml 에 아래 코드 추가

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

 

이렇게 하면 새로고침시에 발생하는 page not found가 해결된다

 

\이후에 여기에다 proxy를 통해서 백엔드 서버로 요청하려면 아래와 같이 작성해주면 됨

 

❗️순서 매우 중요!

1. public/_redirects

/api/*  http://backendURL/:splat  200
/*  /index.html  200

2. root/netlify.toml

[[redirects]]
from = "/api/*"
to = "http://backendURL/:splat"
status = 200
force = true

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

 

아직 확인 못해본거는 netlify.toml 이랑 _redirects 를 혼합해서 쓸수 있는지는 모르겠음..

근데 둘중 하나를 골랐다면 그거만 쓰는게 좋지 않을까 싶은 생각임니다

 

부족한 지식으로 해결해보고 쓴 글이라 다소 부정확한 정보들이 있을수 있슴니다..

 

 

추가로

배포환경에서는 setupProxy 없이 위에서 서술한 redirects 방법들로 충분히 백엔드와 통신이 가능하지만,

로컬환경에서 작업할때는 setupProxy가 없으면 맛이 가는걸 확인했습니다