티스토리 뷰
flask
속도 빠른 파이썬 경량 웹 어플리케이션 프레임워크이다.
빠르고 간편하게 WAS 개발이 가능하다.
spring을 가장 많이 쓰고, django, 등등 있으나.
flask가 가장 간편하고 빠르다.
없다면 pip install flask로 다운받는다.
1. 프로젝트 생성
!mkdir -p hello/static #-p 옵션은 생성되지 않은 것들을 한꺼번에 해준다.
!mkdir -p hello/templates #오타 안된다.
!touch hello/hello.py
!touch hello/templates/index.html
!tree hellostatic 디렉토리 : 정적 파일을 저장하는 용도(js,css,이미지 파일 등등)
templates : html 코드 저장
hello.py => hello는 이름을 바꿔도 된다. 라우팅 코드를 작성하는 파일
2. 라우팅 코드 작성- 어떻게 request를 받았을 때 어떻게 response를 줄 지
작성을 할 때는 special command를 쓴다.
%%writefile hello/hello.py
from flask import *
app = Flase(__name__)
app.run()이러면 기본 플라스크가 완성된 것이다.
파일이 잘 작성되었는지 확인해보면
!cat hello/hello.py
>from flask import *
app = Flase(__name__)
app.run()로 하면 코드가 나온다.
만약 실행시키고 싶다면, route 함수를 decorator를 이용해서 불러와서 사용한다.
%%writefile hello/hello.py
from flask import *
app = Flase(__name__)
@app.route('/')
def hello():
return 'Hello Falsk'
app.run()이걸 읽으려면, notebooks 폴더에 flask.ipynb와 decorator.ipynb, hello 가 있다.
그래서 notebooks, hello에 들어가서,
python hello.py를 하면 flask app을 실행시킬 수 있다.
그러면 5000포트가 뜨는데, 이제 다시 server의 설정을 고쳐줄 시간이다.
ctrl + b,c로 윈도우 창을 하나 더 만든다.
sudo vi /etc/nginx/sites-available/default
————————————————————————————————————————
server{
listen 8081;
location / {
proxy_pass http://localhost:5000;
}
}
————————————————————————————————————————
#설정 적용 후 restart
sudo systemctl restart nginx
이렇게 하면, 이제 포트가 8081이 되어서, public ip+8081로 접속할 수 있다.
이 코드는 서버에서 127.0.0.1:5000으로 요청 받으면, response를 해주는 서버이다.
그러면 nginx가 8081 포트로 외부하고 연결해준다.
502 bad gateway는 해당 서버가 다운되어 있으면 있는 현상이다.
아까 flask app에서 실행되는 걸 해야 한다.
3. 템플릿 코드 작성 -
라우팅 코드에 user 코드를 작성한다.
%%writefile hello/hello.py
from flask import *
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello Falsk'
@app.route('/user') #user로 요청했을 때
def user():
return render_template('index.html') #템플릿을 실행한다.
app.run(debug=True)
그리고 템플릿 코드를 따로 작성한다.
%%writefile hello/templates/index.html
<!DOCTYPE>
<html>
<head>
<title>Flask</title>
</head>
<body>
<p>Hello Flask!!!</p><hr>
</body>
</html>
내용이 수정되었으니, debug mode가 켜져 있으면 자동으로 꺼졌다 켜져 있을 때 자동으로 적용된다.
debug mode가 꺼져 있다면 다시 껐다 켜서 실행한다.
python hello.py해서 실행하면, 코드가 바뀌었을 때 자동으로 적용해서 된다.
실제 개발 할 때는 이렇게 사용하고, 운영 할 때는 off한다.
http://public ip:8081/user
이렇게 들어가면, 이제 user 페이지에는 html 코드 페이지가 뜬다.
동작하는 구조
클라이언트와 서버(WAS는 안에)가 있다. WAS를 실행하려면, python의 hello.py를 실행해야, WAS를 쓸 수 있다.
이때 WAS는 127.0.0.1:5000으로 연결된다.
/ - hello flask,
/user는 - index.html로 연결되게 했다.
그 다음에는 인터넷망을 이용해서 접속이 되도록 nginx설정이 필요한 것이다.
그래서 윈도우를 하나 더열어서 nginx설정으로 포트를 열었다.
그래서 8081 포트가, 127.0.0.1:5000으로 연결되도록 설정을 고쳐준 것이다.
그러면 이제 인터넷을 연결해서 라우팅을 사용할 수 있는 상태가 된다.
그러면 이제 public ip+포트로 접속할 수 있다.
VS코드를 이용한 연결
git bash를 x 버튼 눌러도, 세션은 종료되지 않기 때문에 그대로 나온다.
새 폴더를 만들고, 폴더 열기에서 빈 폴더를 연다.
똑같은 디렉토리 구조로 파일을 만든 후에, 해당 파일을 만들어준다.
hello
├── hello.py
├── static
└── templates
└── index.htmlhello.py와 index.html은 위에 넣은 것과 동일하다.
다만 %%가 있는 줄 빼줘야 한다.
이제 다시 git bash 켠다.
hello 디렉토리로 이동한다.
이번에는 서버와 브라우저가 같은 컴퓨터이기 때문에, 127.0.0.1:5000로 접속할 수 있다.
from flask import *
app = Flask(__name__)
@app.route('/')
def hello():
return 'Hello Falsk'
@app.route('/user/<name>') # user로 요청했을 때 name을 넣는다.
def user(name):
return render_template('index.html', user=name) # 템플릿을 실행한다.
# index.html로 해당 url을 받아준다.
# 그러면 주소창에 추가적으로 입력했을 때 index.html에 추가된다.
@app.route('/people')
def people():
data = dict(request.values) # 이 데이터에는 클라이언트에서 보내준 결과가 출력된다.
print(data)
result = {'name': data['name'], 'age': data['age']}
return jsonify(result) # 문자열만 주고 받을 수 있으므로 주고받는다.
app.run(debug=True)name에 kt가 들어가면, 위에 route에도 들어가고, name에도 들어가고 한다.
<!DOCTYPE >
<html>
<head>
<title>Flask</title>
</head>
<body>
<p>Hello Flask!!! {{user}}</p>
<hr />
<input id="name" type="text" value="peter" />
<input id="age" type="text" value="27" />
<button id="request">Request</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#request").on("click", function () {
var params = {
name: $("#name").val(),
age: $("#age").val(),
};
console.log(params);
var url = "/people?" + $.param(params);
console.log(url);
$.getJSON(url, function(response) {
console.log(response);
/* var tag = "<p>name : " + response.name + "</p>";
tag += "<p>age : " + response.age + "</p>";
$(".result").html(tag); */
});
});
});
</script>
</body>
</html>
name과 age를 문자열고 바꿔서 브라우저 쪽으로 전달해서 출력한다.
그러면 $.getJSON response에서 받아서 출력한다.
서버 쪽에서는 people 경로를 받아서 받은 데이터가 출력된다.
WAS에서 html 수정하기
우리가 완성한 web 파일을 옮겨오자.
app 폴더를 만들고, app 아래 app.py를 만든다.
그리고 templates와 static 폴더도 만든다.
js,css는 static에, templates에는 모든 html 파일들을 옮겨온다.
해당 양식으로 만들면 된다.
이제 라우팅 코드를 작성해보자.
flask 패키지에 있는 모든 함수와 변수를 가져오고, flask __name__으로 객체를 정의해준다.
from flask import *
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
이러면 template가 index.html에서 떠진다.
app에서 app.py를 실행했을 때, css가 망가져있다.
이건 css가 경로가 안맞아서 그렇다.
그래서 href="../static/css/main.css">
로 해서, 가장 상위인 폴더에서 아래로 내려온다.
이건 가장 밑에 javascript 쪽에도 넣어줘야 한다.
<li><a href="/" class="active">Home</a></li>
<li><a href="join">Join</a></li>
<li><a href="login">Login</a></li>웹페이지 경로도 다음과 같이 바꿔줘야 한다.
그러면 127.0,0,1:5000/join 했을 때 들어가진다.
이제 모든 html에 대해서 적용해준다.
from flask import *
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/join')
def join():
return render_template('join.html')
@app.route('/login')
def login():
return render_template('login.html')
@app.route('/contents')
def contents():
return render_template('content.html')
app.run(debug=True)
유지보수 팁
위에서 해당 html은 모든 css에서 반복적으로 쓰인다.
그러므로 다음과 같이 할 수 있다.
<header class="header">
<nav class="wrap">
<label class="logo"><b>KT</b></label>
<ul>
<!-- <li><a class="home" href="/">Home</a></li>
<li><a class="join" href="join">Join</a></li>
<li><a class="login" href="login">Login</a></li> -->
<li><a class="home" href="/">Home</a></li>
{% if user %}
<li><a href="contents">Contents</a></li>
<li><a href="logout">Logout</a></li>
{% else %}
<li><a class="join" href="join">Join</a></li>
<li><a class="login" href="login">Login</a></li>
{% endif %}
</ul>
</nav>
</header>active는 지워주고, 다음과 같은 header.html 파일을 따로 만든 후에,
이렇게 빠진 active는 이렇게 추가한다.
$'header a.login' .addClss 'active' ;페이지 로그인 이동
location.href = 'contents';
로 js에 추가한다.
당연히 pw가 맞았을 때 성립한다.
에러 페이지 만들기
index.html 기반으로 동작한다.
html에서 설정을 바꿔주고, routing도 추가하면 된다.
<body>
{% include 'header.html' %}
<main class="contents">
<section class="wrap">
<h1>404 There is no page</h1>
<a href="/" style="color: white"> Move to index page </a>
<button type="button">Learn More</button>
</section>
</main>대충 이런 식이다.
@app.errorhandler(404)
def not_found(error):
return render_template('error.html'), 404
그러면 이제 404 페이지가 뜰 때 에러 페이지가 뜬다.
mongodb로 join 페이지 연동
import pymongo
import pandas as pd
import numpy as np
uri = 'mongodb://kt:pwpw@public ip/?authSource=admin'
client = pymongo.MongoClient(uri)
client
#계정확인
account = {'email': 'admin5@kt.com', 'pw' : '1234'}
collection = client.mongo.users
document = collection.find_one({'email' : account['email']})
#계정 만들 때 확인
result ={}
if document:
result['msg'] = 'hasAccount'
else:
#게정을 추가
save_result = collection.insert_one(account)
print(save_result.inserted_id)
result['msg'] = 'joinAccount'
result
#delete
collection.delete_many({'email': account['email']})
#display data
documents = collection.find({})
data = list(documents)
pd.DataFrame(data)
이 코드를, app.py에 추가해서 사용하면 된다.
api/join으로 코드도 만든다.
import pymongo
uri = 'mongodb://kt:pwpw@public ip/?authSource=admin'
client = pymongo.MongoClient(uri)
client
@app.route('/api/join', methods=['POST'])
def apt_join():
account = dict(request.values)
print(account)
result = {}
collection = client.mongo.users
document = collection.find_one({'email' : account['email']}) #데이터 확인하는 코드
#계정 만들 때 확인
if document:
result['msg'] = 'hasAccount'
else: #계정을 추가
save_result = collection.insert_one(account)
print(save_result.inserted_id)
result['msg'] = 'joinAccount'
return jsonify(result), 200 #성공했을 때 보내는 코드pymongo를 추가하고, 접속할 수 있도록 app.py에 추가한다.
이제 브라우저에서 전달 하려면 많은 데이터가 필요하므로 post 방식으로 전달받는다.
methods=['POST']를 추가하는 건 이 때문이다.
(function(){
$('header a.join').addClass('active');
var msgs = {
join: 'Joined your account.',
check: 'Check your password same.',
}
var Event = {
join: function(){
$('#join-btn').on('click', function(){
var params = {
email: $('#email').val(),
pw: $('#pw').val(),
ckpw: $('#ckpw').val(),
addr: $('input[name="addr"]:checked').val(),
birth: $('#birth').val(),
subscription: $('#subscription').val(),
}
if(params.pw === params.ckpw){
$('.msg').text(msgs.join).show();
$.post('api/join', params, function(response){
console.log(response);
if(response.msg === 'joinAccount'){
location.href = 'login';
} else {
$('.msg').text(response.msg);
}
})
} else {
$('.msg').text(msgs.check).show();
}
})
}
}
Event.join();
})();join 페이지 쪽에서 받아서 사용하려면 패스워드가 체킹 되었을 때 통과해야한다.
그렇기에 위와 같이 추가한다.
모델을 이용한 차트 출력
highchart는 시각화 그래프를 불러올 수 있는 홈페이지이다.
js fiddle이나 code pan 같은 것으로 실행할 수 있다.
incoming webbook에 대한 설정
트리거 키워드로 주식을 입력하면, outgoing으로 s.s(incoming webbook)에서 주식을 쏴준다.
그러면 WAS에서 model
incoming webbook을 통해서 답을 해준다는 걸 알면 된다.