웹 배포 어떻게 할까? (리액트 포함)

jidole02·2021년 2월 20일
10

자신만의 웹을 개발했으면 이제 배포를 해야겠죠? 근데 어디에 해야할지 고민하시는 분들이 많으실 겁니다. aws라는 대기업에서 ~~빡빡이 아죠씨...~~ 배포하는 방법도 있겠지만 굉장히 절차가 복잡합니다. 그런 분들을 위해 netlify 라는 착한 사이트에서 무료 배포를 도와줍니다.

https://www.netlify.com/
위 사이트에서 이용하실 수 있습니다. 깃허브 계정을 통한 간편 로그인이 있으니, 귀찮은 회원가입 과정은 생략하세요! 이제 위 사이트에 로그인하게 되면 아래와 같은 화면이 나올겁니다.

여기서 new site from git 을 누르고, 깃허브 로고를 누르면 깃허브 레포지토리 가 나옵니다.


이제 여기서 자신이 배포할 레포지토리를 선택하시고 위와 같이 build command와 public directory 를 설정해주시면 됩니다. 그리고 Deploy site를 눌러주시면 끝!! 근데 여기서 아주 머리아픈 문제가 등장하게 됩니다. 앞으로 netlify로 배포하면서 여러번 보실 짜증나는 화면이 나오는데 바로 아래와 같은 화면입니다.

이 page not found가 뜨는 경우는 바로 netlify 에서 어디를 메인으로 띄워주어야 하는지 모르기 때문에 생기는 헤프닝입니다. 이를 위해 배포 전 몇가지 설정이 필요한데 바로 netlify.toml이라는 파일과 _redirects 라는 파일입니다. HTML부터 설명을 드리자면 아래와 같이 루트 디렉토리에 netlify.toml이라는 파일을 추가해 주셔야 합니다.


안에 내용은 위와 같이 적어주세요! to="메인페이지명.html" <- 참고하세요! 이렇게 설정후 다시 commit, push 하여 netlify로 배포를 하면!!


netlify 에서 제공해주는 도메인으로 잘 들어가지는 모습을 보실 수 있습니다! 이제 전 세계 어느 사람이던 저 도메인을 통해 당신의 웹에 접속할 수 있는 것이죠. 여기서 나만의 도메인을 설정하고, 인증서를 무료로 받을 수도 있지만, 그 부분에 대해서는 다음에 알아보기로 하고, 이번엔 React 배포 설명입니다. HTML과 거의 똑같고, 파일 위치만 조심해주시면 됩니다.


마찬가지로 루트 디렉토리에 netlify.toml 을 위치시켜주시고,

public 폴더에 _redirects라는 파일을 생성해줍니다. 내용은 아래와 같이!!

그리고 이제 배포해주시면 끝!!


혹시나 빌드 도중 에러가 난다면 build command를 CI= npm run build 로 바꿔서 다시 배포해보세요!
오늘은 웹 배포에 대해서 간단히 알아보았습니다. 궁금한 점 있으시다면 댓글 남겨주세요. 하트도 부탁드립니다 ㅎㅎ 감사합니다.

profile
프론트엔드 개발자입니다!

0개의 댓글