[heroku] React Heroku 배포하기

 

이번시간에는 React를 배포하는 방법중 하나인 Heroku를 알아보도록 하겠습니다.

 

Herokut란 여러 프로드래밍에 언어를 지원하는 클라우드 컴퓨팅 플랫폼입니다. Git과 Github를 지원해주고 많은 서비스를 애드

 

온과 API로 지원합니다. 소규모 프로젝트에서 무료 플랜을 기본적으로 제공해주면서 굉장히 좋기 때문에 한번 사용하는 것도 나쁘지 않을 거라 봅니다.

 

우선 heroku를 이용하기 위해 Heroku 공식 페이지에서 다운받으셔야 합니다. 위에 홈페이지에서

The Heroku CLI | Heroku Dev Center

운영환경에 맟춰 다운 받아주세요 

heroku -v

다운 받으셧으면 프로젝트 폴더로 가셔서 터미널에서 heroku --version 을 입력해 설치가  잘되었는지 확인합니다.

 

이 창이 뜨고

이렇게 heroku 페이지가 뜨면 성공입니다. Log In 버튼을누르고 나가주세요

그럼 이렇게 뜨면 현재 heroku 에 접속되었다는 뜻입니다. 

 

이제 Heroku 프로젝트를 만들어야 합니다.

heroku 프로젝트를 만들기 위해서는 다음과 같은 명령어를 입력하세요.

 

 heroku create 생성할프로젝트명 --buildpack https://github.com/mars/create-react-app-buildpack.git

 

 

buildpack에대한 자세한 설명은 아래링크를 참조 

GitHub - mars/create-react-app-buildpack: ⚛️ Heroku Buildpack for create-react-app: static hosting for React.js web apps

 

이름 중복이 겁나 많네요... 어쨋든 프로젝트 생성이 완료 되었습니다.

 

이제 우리의 앱을 heroku 프로젝트에 push 해줍니다.

$ git add .
$ git commit -am "make it better"
$ git push heroku master

배포가 완료되면 http://프로젝트명.herokuapp.com/ deployed to heroku라는 메세지를 볼수있습니다.

 

heroku 사이트에 직접 가보시면 이렇게 사이트가 남겨집니다ㅜㅜㅜ 성공 !!

 

firebase 부터 heroku 까지 처음 실수하는 부분도 많았고 안되는 부분도 많았는데 이렇게 되니까 기쁘네요 ㅋㅋㅋ 

 

 

이후에 앱을 수정하고 다시 배포하려면 git으로 add 와 commit을 한후 git push heroku master 명령어를 통해 다시 배포 하실수 있습니다. 만약 매번 수동으로 deploy 가 아닌, git repository를 업데이트 할 때마다 deploy하려면 아래 사이트를 참조해 주세요

 

GitHub Integration (Heroku GitHub Deploys) | Heroku Dev Center