How to use Heroku

zwon·2022년 4월 24일
0

Web Front

목록 보기
11/13
post-thumbnail

틈틈히 재미삼아 만들었던 PR page 와 노마드코더 - Vanila Js를 이용한 크롬 앱(Todo list) 만들기의 결과를 배포하려고 한다. 트래픽이 없는 정적인 웹 사이트이므로 Heroku를 써먹기로 했다. 간단하지만 어렵고 몇시간동안 삽질까지 했던 그 긴 여정을 소개해보고자 한다.

Heroku

Heroku는 Java, Node.js, Python등 여러 언어를 지원하는 클라우드 Paas이다. 흔히들 공짜로 배포하주는 SW라고 알고있다. 간단하게 서비스를 띄울 무료 Pass를 찾고 있다면 무조건 헤로쿠를 추천한다.

Paas란?
서비스형 플랫폼(Platform as a Service, PaaS)은 클라우드 컴퓨팅 서비스 분류 중 하나다. 일반적으로 앱을 개발하거나 구현할 때, 관련 인프라를 만들고 유지보수하는 복잡함 없이 애플리케이션을 개발, 실행, 관리할 수 있게 하는 플랫폼을 제공한다. SaaS의 개념을 개발 플랫폼에도 확장한 방식으로, 개발을 위한 플랫폼을 구축할 필요 없이, 필요한 개발 요소를 웹에서 쉽게 빌려쓸 수 있게 하는 모델이다.

실행 과정

  1. Heroku 가입 및 로그인 (https://id.heroku.com/login)

필요한 정보들을 입력하고 CREATE FREE ACCOUNT 하면 이메일로 인증 메일이 날라온다. 인증까지 마무리 해주자. 인증을 끝내면 새로운 비밀번호를 설정할 수 있다.

  1. Create a new app으로 배포를 하게 될 새로운 앱을 만들어준다.

여기서 만드는 app 이름이 서비스 주소가 된다. 가령 App name을 test-test 라고 했으면 배포된 사이트의 링크는 test-test.herokuapp.com이 되는 방식이다. region은 기본값으로 설정되어 있는 US로 둔다.
(US로 지정해야 서비스를 무료로 이용이 가능하다고 하는데.. 안해봐서 모르겠다)

  1. Git, curl, heroku CLI, heroku를 설치해준다.

터미널에서 명령어로도 다운로드 가능하고, 웹 사이트에서 직접 다운로드도 가능하다.

  1. 커맨드 창에서 heroku --version 명령어를 통해 정상적으로 설치되었는지 확인가능하다.

  1. 커맨드 창에서 heroku login 명령어를 통해 Heroku 로그인을 진행한다.

Heroku 홈페이지가 로드되면서 로그인 버튼이 뜰거고 그걸 눌러주면 된다. 터미널에는 다음과 같이 뜬다.

  1. 커맨드창에서 배포 할 프로젝트가 위치한 경로로 이동한 뒤, git 레파지토리 생성 및 원격 연결을 한다.
cd [프로젝트 위치]
git init
heroku git:remote -a [프로젝트 이름]

여기서 프로젝트 위치는 배포하고 싶은 프로젝트의 디렉토리 상에서의 위치(경로)로 이동해주면 되고 프로젝트 이름은 이전에 Create a new app 으로 만들며 지정해줬던 배포 하게 될 앱의 이름을 넣어주면 된다.

  1. git remote -v 명령어를 통해 연결된 원격 저장소를 확인해보면 heroku가 추가된 것을 알 수 있다.

  1. 연결된 로컬 디렉토리 내 파일들을 heroku 원격 저장소로 push 해준다. 이때 [브랜치] 안에는 푸시하고자 하는 브랜치를 넣으면 된다.
git push heroku master

자.. 이까지 너무 문제없이 잘된다 싶었다. 갑자기 에러가 발생했다.

어김없는 Error

pre-receive hook declined 라는 에러인데 아무리 구글링을 해봐도 답을 찾지 못했다. 그러다가 Heroku 홈페이지에 가서 로그인을 하고 빌드 로그(Build Log)를 보라는 조언을 찾았다.

뭐 잘은 모르겠지만 대충 언어를 알 수가 없다~ 라는 맥락인거 같다.

열심히 구글링 해본 결과 정적인 html 웹 사이트(index.html 등)를 heroku에 그냥 냅다 올리면 heroku 가 어떤 언어로 개발된 프로젝트인지 몰라서 똑바로 구동되지 않는다고 한다.

이런 쓰레ㄱ같ㅇ.. 아니 그걸 인식을 못한다고?

그래서 heroku에서 지원하는 언어중 하나인 php 프로젝트로 인식되게 처리해 줘야한다고 한다.... 이 말도 안되는 문제로 몇 시간이나 삽질을 했다는게 너무 어이가 없다. 같이 스터디 하고 있는 채원이한테 알려줘야겠다.

졸라 삽질하는거 옆에서 보다가 마지막에 극적으로 가르쳐주고싶다

해결 방법은 더 어이가 없다. 너무 간단하다.

제일 상위 디렉토리에 html 파일로 리다이렉트 시켜주는 index.php 파일만 하나 만들어주면 된다.

<?
   	header('Location: /index.html');
?>

다시 이전으로 돌아가서

  1. git 저장소 만들고 커밋하기
git init
git add .
git commit -m “First commit”
  1. heroku app 생성
heroku create
  1. heroku에 내 웹 사이트 올리기
git push heroku master

배포된 웹 주소는 위의 코드(밑에서 5번째 줄?) 에서 알 수 있다.

Vanila Js를 이용한 Todo List 만들기

  1. heroku에 올라간 내 웹사이트 브라우저로 확인하기

heroku open

잘 열린다...

코드를 수정하고 다시 올리고 싶을 때!?

git add .
git commit -m “뭐라뭐라 수정함”
git push heroku master

github 에서의 코드 수정 - pull , add , commit, push 와 거의 똑같다.

잠시 후 확인해 보면 수정사항이 반영된다.

수면모드

Heroku의 문제점이 한 가지가 있는데 바로 수면모드이다. Heroku의 앱은 1시간 동안 트래픽을 수신하지 않으면 절전모드로 자동전환 된다고 한다. 하지만 이걸 방지해주는 사이트가 있다.

Kaffeine - Heroku

요기서 내 App의 이름을 넣어주면 이 사이트가 헤로쿠 어플을 30분 단위로 알아서 잠들지 않게 깨워준다.

끝 ! 다음엔 PR page도 같은 방식으로 배포해보자.

0개의 댓글