post-custom-banner

HTML + CSS + JS 조합의 파일은 Github Page를 통해 단순 배포가 가능하다

Github Page에서는 정적인 페이지만을 배포할 수 있다

Heroku에서는 다양한 빌드팩을 통해 다른 언어가 섞여도 배포할 수 있도록 도와준다

PHP가 포함된 파일을 배포하기 위해 헤로쿠를 사용한다

  • Heroku는 한 계정당 5개의 앱을 무료로 호스팅 할 수 있다
  • 해당 도메인에 일정 시간 동안 접속 요청이 없는 경우에는 앱이 수면 상태로 전환되며 초기 접속에 시간이 조금 더 소요된다

0. Git 설치

헤로쿠 서비스를 이용하기 위해서는 기본적으로 Git을 설치해야 한다

1. 헤로쿠 가입 및 로그인

링크를 통해 가입 및 로그인 한다

2. Create a new app

Github의 repository와 비슷하다고 생각하면 된다
배포할 소스 코드를 업로드 한다
📌 지역(region)은 'United States'로 지정해준다

3. Heroku CLI 설치

여기서 사용 중인 O.S에 맞는 CLI를 설치해준다
mac을 사용한다면

% brew tap heroku/brew && brew install heroku

brew를 통해 간편 설치가 가능하다


설치후 아래와 같이 입력했을 때 버전이 정상적으로 표시된다면 설치가 잘 이뤄진 것이다

% heroku --version

그 후 아래의 명령어를 터미널에 입력하여 CLI에서도 로그인을 실행해준다
% heroku login

4. 소스 파일 업로드

터미널을 켠다
업로드 및 배포하기를 원하는 소스 파일이 있는 경로로 이동한다
아래 명령어를 순서대로 입력해준다

% git init
% heroku git:remote -a 배포할 앱 이름
% git add .
% git commit -am "버전에 대한 설명"

HTML + CSS + JavaScript를 제외한 다른 언어를 사용했다면 배포를 위해 빌드가 필요하다

빌드팩은 여기에 모여있다

가령 PHP 소스 코드를 빌드하고 싶다면 PHP 빌드팩을 선택하여 페이지의 안내를 따라 설치를 진행해주면 된다

PHP의 경우 PHP 빌드팩 페이지 최하단의 코드만 입력해줘도 배포에는 문제가 없었다(경고는 존재)

% heroku create --buildpack https://github.com/heroku/heroku-buildpack-php.git

이후 commit 해놓았던 소스 파일을 push하면 된다

% git push heroku master 
// 상기 코드에서 에러가 난다면
% git push heroku HEAD:master
// 이 코드를 사용하여 push를 시도한다
// 이것도 안 되면 구글링 ㄱㄱ

push는 해당 소스 파일들이 존재하는 경로(git init으로 .git을 생성해둔 경로)에서 수행한다

이렇게 push를 진행하면 아래와 같은 화면을 볼 수 있다

붉은 색 박스가 배포 주소이다
돌아가는 것을 확인하면 된다

5. 배포 파일 수정

4번 과정에서 빌드팩 설치를 제외한 과정을 반복해주면 된다

📌 따라한 자료
moone님 벨로그: Heroku로 간단하게 웹 사이트 배포하기

📌 앱 수면상태 방지를 위한 헤로쿠카페인

post-custom-banner

0개의 댓글