Dash app을 Heroku에 배포(Deploy) 하기

plotly로 시각화한 app을 자신이 운영하고 있지 않은 서버에 올려서 돌려보자.
라즈베리파이4에서 작업했다.

먼저 서버를 골라야 하는데,  다음의 크게 2가지 방법 중 안전장치가 있는 무료이용이 가능한 Heroku로 결정했다. 대표적인 3개의 다른 서비스는 환경구성, 유료전환 대비를 위한 신용카드 정보 입력 등이 있어 조금은 더 복잡한 것 같다. 

1. Amazon(AWS), Google(SDK cloud), Microsoft(azure)에서 제공하는 서비스를 이용하는 방법
2. Heroku에서 제공하는 서비스를 이용하는 방법
   GitHub과 연동하거나 git 서비스로 관리가 가능하다.

1. 준비물 확인

• Heroku 계정 (필수)
• GitHub 계정 또는 Heroku CLI 설치 (둘 중 하나는 필수, git을 꼭 사용해야 한다.)
  git 사용에 익숙한 터미널 이용자라면 Heroku CLI를 사용하는 것이 좋다고 생각한다.
  (Heroku 에서 git 저장소를 제공한다.)
  그럼에도, GitHub 연동기능을 제공하기에 Heroku CLI가 반드시 필요하지는 않다.
• 30분 가량의 시간

※ 어떤 매뉴얼에서는 virtualenv 의 설치가 필수라고 하는데, Heroku 역시 가상화하는 것이기 때문에 최적화 환경을 조성하기 위해 경우에 따라 사용할 필요가 있지만 나는 일단 설치하지 않았고 사용하지도 않았다.
virtualenv에 관심이 있는 사람이라면, 이 포스트를 참고하자.

※ 여기서는 git을 터미널로만 사용할 것이다.

2. 준비

  201. Heroku 가입하기  https://www.heroku.com 

HEROKU 홈페이지

  202. GitHub 가입하기  https://www.github.com 

GitHub 홈페이지

  203. Heroku CLI 설치하기 (Raspberry Pi)

$ wget https://cli-assets.heroku.com/branches/stable/heroku-linux-arm.tar.gz
$ mkdir -p /usr/local/lib /usr/local/bin
$ sudo tar -xvzf heroku-linux-arm.tar.gz -C /usr/local/lib
$ sudo ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku

라즈베리파이가 아닌 경우에는 Heroku CLI install guide를 활용하자.
※ 위와 같은 소스 설치가 아니라 snap을 이용해 설치하면 버전관리가 용이할 것이다.

여기까지 소요시간 10분 

---

3. 필수 파일 확인

• app.py (dash 동작 파일)
• Procfile (app 실행의 환경 설정)
• requirements.txt (app 실행 시 필요 구성요소)

4. 무작정 따라하기

  파일 준비 (내 Github저장소, https://github.com/amatoroi/dash_deploy_sample) 

  하나하나 따라하기 귀찮은 사람은 내 저장소를 가져가도 무방하다.

  401. app.py 준비하기

  많은 경우, 직접 app.py를 제작했을 것으로 믿는다. 여기에서는 heroku deploy에 집중하기 위해 dash 에서 제공하는 기본 app.py를 사용한다. app 완성본을 미리 살펴보자. https://amatoroi-myappname.herokuapp.com/

import os

import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server

app.layout = html.Div([
    html.H2('Hello World'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])

@app.callback(dash.dependencies.Output('display-value', 'children'),
                [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)

if __name__ == '__main__':
    app.run_server(debug=True)

  402. Procfile 준비하기

  Procfile은 다음과 같이 생겼다. 보다시피 단 한줄로 구성된다. python으로 작성된 응용프로그램과 웹서버 간의 인터페이스를 위해 gunicorn을 사용하겠다는 것이 핵심이다. 

web: gunicorn app:server --log-file=-

  403. requirements.txt 준비하기

  내가 작성한 dash app의 동작을 위해 필요한 패키지와 버전을 기록하는 파일로, 자신의 Heroku 저장소(가상화 공간)에 requirements.txt에 기록된 패키지(의존성 있는 패키지는 자동으로 포함)를 설치한다. 이 파일을 만들 때 다음의 2가지 방법이 있으며, virtualenv를 사용한다면 보다 정교한 파일 생성이 가능하다.

• pip freeze 명령어 사용: pip freeze > requirements.txt
  이 경우, virtualenv로 별도 환경을 구성하지 않으면 내 컴퓨터 내에 설치된 모든 패키지가 기록됨에 따라 Heroku 저장소를 불필요하게 빵빵하게 만들 수 있는데다, runtime python 버전과의 충돌로 오류가 발생할 수 있다.
  따라서, 파일 생성 후 적절히 삭제 필요
• dash app 내 import 상황 확인 및 직접 작성
  pip list 패키지명 으로 버전확인 및 잘~ 작성

  이 따라하기에서는 다음의 내용으로 작성하였다.

dash==2.0.0
dash-core-components==2.0.0
dash-html-components==2.0.0
gunicorn==20.1.0

dash app의 실행과 웹서버와의 인터페이스를 위한 gunicorn 만 필요하다.

 파일 준비가 끝났다. 

★ 배포(deploy) 전에 테스트 하는 방법: 터미널에  $ gunicorn app:server  와 같이 실행해보자.

다음 두 가지 방법 중 한가지를 선택해 deploy 하기만 하면 된다.

• Github 저장소에 push 한 후 Heroku 홈페이지에서 GUI로 deploy 하기
• Heroku git 저장소로... 터미널에서 Heroku CLI로 deploy 하기

  옵션 1. GUI로 deploy 하기

  처음 가입한 사용자라면 heroku로 로그인 했을 때 이렇게 텅텅~ 빈 상태가 보일 것이다. 접근 경로야 여러가지가 있지만,  Create new app 으로 저장소를 만들자. 이름은 대~충 짓고(여기서는 amatoroi-myappname).

heroku app 용 저장소 만들기

이름은 중복이 허용되지 않는다. 당연하잖아...

 

 

   Create app 으로 들어가거나, 다시 접속해서 해당 저장소로 들어가 보면 Deploy 탭이 보일 것이다.
  Deployment method로 Github을 선택하자. 그러면, 선택버튼 아래가 GitHub 저장소를 선택하는 화면으로 전환된다.
  (Heroku Git 으로 선택하면, 친절하게 터미널에서 CLI로 작업하는 방법을 설명하고 있다.)

Github 을 선택하자

 

  저장소 선택 이후, Deploy 실행

GItHub 연결이 성공하면, Deploy Branch 버튼으로 DEPLOY!!!

Deploy를 실행하면, Building log가 자동으로 보여주는데, requirements의 수에 따라 설치과정이 꽤나 시간이 걸리는데, 모두 끝나게 되면 다음과 같은 완료화면이 나타난다.

끝~

  옵션 2. CLI로 deploy 하기

기본 명령어 리스트 및 순서는 다음과 같다. (터미널에서 git 사용은 별도로 설명하지 않겠다.)

$ heroku login
$ git init
$ heroku create amatoroi-myappname
$ git add .
$ git commit -m 'initial commit'
$ git push heroku master

우선,  heroku login 으로 내 계정으로 로그인하고 

 heroku create <원하는app_name> 명령어로 다음의 2가지가 한번에 해결된다.
 > "원하는app_name"의 저장소를 생성하고
 > 해당 저장소가 git의 remote로 설정된다. (== git remote add heroku 생성된 저장소위치)

위 명령어로 설정된 remote에 push하면 끝이다. (== git push heroku master)

내 터미널 캡쳐본은 다음과 같다.

여기까지가 20분

---

참고로, Github의 설정에서는 자동으로 Github 과 연동해서 계속해서 deploy 하는 옵션이 있고,
Github을 통해 최초로 설정했더라도 별도의 설정없이 CLI로 deploy 가능하다.

여기까지 따라하면 이 주소와 동일한 app이 생성될 것이다.
(`22.4.27. Heroku를 경유해서 GitHub 해킹 이슈가 발생해서 해당 앱을 삭제함)

※ 보충설명, `22.1.22. 기준 heroku의 python은 최소 3.9.10 버전이어야 한다. 의존성 관리에 참고!