자신만의 웹을 개발했으면 이제 배포를 해야겠죠? 근데 어디에 해야할지 고민하시는 분들이 많으실 겁니다. 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 로 바꿔서 다시 배포해보세요!
오늘은 웹 배포에 대해서 간단히 알아보았습니다. 궁금한 점 있으시다면 댓글 남겨주세요. 하트도 부탁드립니다 ㅎㅎ 감사합니다.
