Netlify로 프론트엔드 배포하기

이제 백엔드를 올려두었으니 프론트도 배포하여 마무리 짓도록 하겠다.

 

프론트엔드는 Netlify를 이용하여 배포하도록 하겠다.

 

알아보니 상당히 간단했는데, 글을 끝까지 읽어보면 여러분도 그렇게 생각할 것이다.

 

우선 github에 올려둔 나의 frontend 레포지토리를 import 해준다.

그전에 tailwind를 사용하였기 때문에 build명령어 이전에 실행될 prebuild 스크립트를 위와 같이 추가하였다.

배포를 진행할 branch를 선택해주고,

 

기다리면,

위와 같이 배포가 완료된다.

정말 간단해서 놀랐지만 역시 처음 하는 거라 그런지 에러를 발견하였다.

root 페이지가 아닌 다른 곳에서 새로고침 시 Page Not Found에러가 발생하였는데,

 

이는 프론트엔드 프로젝트가 React로 작성되어 요청 URL을 Router로 전달하지 못하고,]

not found에러가 발생하는 것이었다.

 

https://docs.netlify.com/routing/redirects/

Redirects and rewrites

Netlify 공식 문서를 참고하여 Netlify 사이트에 대한 redirection을 설정해주도록 하겠다.

public 하위에 확장자 없이 _redirects라는 파일을 생성하고,

모든 URL요청이 index.html로 향하도록 해주었다.

(status 코드는 200 ok)

 

그 후 Netlify 배포 페이지에서 환경변수도 설정해주었다.

 

배포 완료!

 

https://velog.io/@ksmfou98/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Netlify%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

React 프로젝트 Netlify에 배포하기

위 글을 읽다가 도메인 등록을 하지 않고도 site 이름을 바꿀 수 있다는 것을 알게 되어

위처럼 원하는 이름으로 변경해주었다!

 

 

+ 2022.03.17.

 

재배포를 진행하던 중 빌드 중에 경고 탓에 배포가 에러를 뱉으며 실패하였다.

https://stackoverflow.com/questions/67393722/command-failed-with-exit-code-1-ci-npm-run-build

Command failed with exit code 1: CI= npm run build

stackoverflow를 참고하여 CI 변수를 재정의하여 경고를 무시할 수 있도록 하였다.

build 스크립트에 CI=''를 추가하여 재정의하였고,

그 결과 배포가 성공적으로 진행되었다.

 

물론 경고도 없애야할 에러이지만 테스트 단계이므로 이런 방법을 사용하여 무시해주었다^^