Heroku에 웹서비스 등록하기

Python을 이용한 웹서비스 구축 후 배포할 수 있는 공짜 서버인 Heroku 사용법을 정리해 본다.

 

물론 사용 트래픽이 많아지면 과금을 하는 것 같지만, 개인 테스트 서버를 구축하여 사용하기에는 좋을 것 같다.

 

홈페이지 : https://www.heroku.com

 

 

위 화살표 부분을 누르고 sign up을 눌러 계정을 생성한다.

 

웹페이지를 통해 등록도 가능할 것 같으나(해보지 않음), 터미널을 통해 이용하는 방법으로 주로 설명이 되어 있어 그에 따르도록 한다.

 

계정을 만들었으면, 터미널을 통해  heroku를 이용할 수 있도록  heroku tool belt(https://blog.heroku.com/the_heroku_toolbelt) 를 설치한다.

 

설치 후 터미널을 열고 로그인한다.

 

$heroku login

 

—> 등록한 이메일과 암호를 물어본다. 올바르게 입력하면 로그인되었음을 알리는 메시지가 나온다.

 

페이지 등록을 위하여 준비된 페이지가 없다면 python flask 샘플 웹페이지를 만든다.

 

최종적으로는 아래와 같은 구조를 갖게된다.

 

 

Procfile, requirements.txt, runtime.txt는 heroku 서비스 등록을 위해 필요한 파일로 이후 생성할 것이다. 

(이미지 파일은 등록이 되는데… 압축파일을 어떻게 올리는지가…..)

(아래 소스는 Udemy 강좌중 일부에서 사용된 것을 옮긴 것이다.)

 

<app4_script1.py>

 

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template("home.html")

@app.route('/about/')
def about():
    return render_template("about.html")

if __name__ == "__main__":
    app.run(debug=True)

 

 

<layout.html>

 

<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link rel="stylesheet" href={{url_for('static', filename='css/main.css')}}
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Ardit's web app</h1>
<strong><nav>
<ul class="menu">
<li><a href="{{ url_for('home')}}">Home</a></li>
<li><a href="{{ url_for('about')}}">About</a></li>
</ul>
</nav></strong>
</div>
</header>
<div class="container">
{%block content%}
{%endblock%}
</div>
</body>
</html>

 

<home.html>

 

{%extends "layout.html"%}
{%block content%}
<div class="home">
<h1>My home page!</h1>
<p>This is a test website.</p>
</div>
{%endblock%}

 

<about.html>

 

{%extends "layout.html"%}
{%block content%}
<div class="about">
<h1>My about page!</h1>
<p>This is a test website again.</p>
</div>
{%endblock%}

 

<main.css>

 

body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #060;
}

/*
* Formatting the header area
*/

header {
background-color: #DFB887;
height: 35px;
width: 100%;
opacity: .9;
margin-bottom: 10px;
}

header h1.logo {
margin: 0;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
float: left;
}

header h1.logo:hover {
color: #fff;
text-decoration: none;
}

/*
* Center the body content
*/

.container {
width: 1200px;
margin: 0 auto;
}

div.home {
padding: 10px 0 30px 0;
background-color: #E6E6FA;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

div.about {
padding: 10px 0 30px 0;
background-color: #E6E6FA;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

h2 {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}

h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 30px;
text-align: center;
letter-spacing: -1px;
color: #999;
}

.menu {
float: right;
margin-top: 8px;
}

.menu li {
display: inline;
}

.menu li + li {
margin-left: 35px;
}

.menu li a {
color: #444;
text-decoration: none;
}

 

위 소스를 작성하고,

 

$python app4_script4.py를 실행 후,

 

웹브라우저에서 localhost:5000 을 실행하면 아래와 같은 화면이 나온다.

 

 

(위 예제는 flask가 설치되어 있어야 한다.)

 

이제 이를 heroku에 배포해 보자. 일반적?인 python 환경을 그대로 옮기게 되면, 불필요한 프레임워크 및 라이브러리까지 모두 옮겨지게 되므로

 

가상환경을 구성하여 웹서비스만을 위한 환경을 구성한다.

 

여러가지 방법이 있겠으나, 여기서는 miniconda를 이용하여 가상환경을 구축하기로 한다.

미니콘다는  https://conda.io/miniconda.html에서 다운로드 받아 설치한다.

 

1. 가상환경 만들기

$conda create -n myenv python=3.5

 

—> -n은 가상환경 이름을 지정하겠다는 옵션

—> python=3.5 는 python 버전 지정

 

2. flask 설치

$pip install flask

 

3. 샘플 웹페이지 루트 폴더로 이동(app4_script1.py 가 있는 폴더)하여 로컬에서 정상동작 테스트

$python app4_script4.py

브라우저에서 localhost:5000 -> 웹페이지가 정사적으로 로딩되는지 확인.

 

4. heroku 배포를 위해서는 gunicorn 설치가 추가적으로 필요 : python WSGI HTTP Server for UNIX

 

5. requirements.txt 파일 생성 : heroku에서 환경 구성을 위해 필요한 프레임워크, 라이브러리등을 알려주는 파일

$pip freeze

click==6.7

Flask==0.12.2

gunicorn==19.7.1

itsdangerous==0.24

Jinja2==2.9.6

MarkupSafe==1.0

Werkzeug==0.12.2

위와 같이 7개가 나타남. 이중 click==6.7은 conda에서 필요한 것으로 생각됨.(없어도 됨)

$pip freeze >> requirements.txt

—> requirements.txt 파일 생성

 

6. Profile 생성 : vi 등의 에이터를 이요하여 아래 내용 입력후 저장

web: gunicorn app4_script1:app

—> app4_script1은 웹서비스를 실행하는 python파일

—> app : 위 소스중 app4_script1.py를 보면 app = Flask(__name__) 한 부분이 있음. 즉, Flask 인스턴스를 받은 변수임.

 

7. runtime.txt : 동작환경으로 현재 동작하는 정확한 환경이라기 보다는 heroku에서 정해준 환경 중 하나를 선택해야 함.

Python-3.6.1

 

(https://devcenter.heroku.com/articles/python-runtimes) - Supported Python runtimes 부분을 보면 지원 환경이 나옴.

여기서는 3.5.x버전으로 환경을 구성하여, 가장 가까운 3.6.1로 설정함.

 

8. Heroku app 설정

$Heroku create appname

—> 중복된 appname이 있으면 생성되지 않음.(다른 사용자가 사용하는 것 포함.)

—> 성공하면, appname.herokuapp.com 으로 생성됨. (해당 페이지로 접근 가능함.)

 

9. 로컬 디렉토리(app4_script1.py가 있는) git  초기화

로컬 디렉토리로 이동 후

$git init

—> 로컬 디렉토리에 .git 파일 생성됨

 

10. git에 로컬 디렉토리 파일 추가

$git add .

 

11. git 이메일/사용자명 설정

$git config —global user.email “email@email.com"

$git config —global user.name “username"

 

12. commit

$git commit -m “first commit"

—> -m : message

 

13. heroku 에서 사용하고자 하는 app 설정

$git:remote —app appname

 

14. git에 push

$git push heroku master

 

15. 확인

$heroku open