5주차에는 Flask를 활용해 API를 만들고, 이를 AWS를 통해 홈페이지로 올리는 작업을 배웠다.
1. Flask GET / POST
app.py
from pymongo import MongoClient
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
client = MongoClient('localhost', 27017)
db = client.dbsparta
# HTML 화면 보여주기
@app.route('/')
def home():
return render_template('index.html')
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
return jsonify({'movie_stars': movie_star})
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name': name_receive})
current_like = target_star['like']
new_like = current_like + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
return jsonify({'msg': '좋아요 완료!'})
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
db.mystar.delete_one({'name': name_receive})
return jsonify({'msg': '삭제 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>마이 페이보릿 무비스타 | 프론트-백엔드 연결 마지막 예제!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style>
.center {
text-align: center;
}
.star-list {
width: 500px;
margin: 20px auto 0 auto;
}
.star-name {
display: inline-block;
}
.star-name:hover {
text-decoration: underline;
}
.card {
margin-bottom: 15px;
}
</style>
<script>
$(document).ready(function () {
showStar();
});
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
let mystars = response['movie_stars']
for (let i = 0; i < mystars.length; i++) {
let name = mystars[i]['name']
let img_url = mystars[i]['img_url']
let recent = mystars[i]['recent']
let url = mystars[i]['url']
let like = mystars[i]['like']
let temp_html = `<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="${img_url}"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
<p class="subtitle is-6">${recent}</p>
</div>
</div>
</div>
<footer class="card-footer">
<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>`
$('#star-box').append(temp_html)
}
}
});
}
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
</script>
</head>
<body>
<section class="hero is-warning">
<div class="hero-body">
<div class="container center">
<h1 class="title">
마이 페이보릿 무비스타😆
</h1>
<h2 class="subtitle">
순위를 매겨봅시다
</h2>
</div>
</div>
</section>
<div class="star-list" id="star-box">
</div>
</body>
</html>이후 AWS에서 EC2서버를 구매해 FileZilla를 이용해 파일을 올릴 수 있다.
gitbash를 실행해 다음 명령어를 입력해 서버에 접속한다.
ssh -i 키페어(pem파일) ubuntu@AWS에적힌내아이피ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)서버 환경을 통일하기 위해서 초기 설정이 필요하지만, 한번에 할 수 있는 파일로 세팅했다.
그리고 flask나 pymongo와 같은 라이브러리는 pip install 명령어로 따로 설치해주어야 한다.
AWS 관리 콘솔에서 flask 기본 포트인 5000, mongoDB를 사용하기 위한 27017포트를 열어준다.
http://내아이피:5000 로 접속할 수 있다.
DB를 관리하기 위해서 Robo3T에서 아이피와 계정을 새로 입력한다.
이후 app.py에 pymongo 명령어를 추가한다.
client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)컴퓨터가 꺼져 있는 상태에서도 홈페이지가 작동되게 하기 위해서 nohup을 사용한다.
nohup python app.py &홈페이지를 수정해야할 경우 서버를 종료하고 수정한다.
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]그 이후 가비아에서 구매한 도메인을 AWS의 IP와 연결하면 인터넷 주소로 접속할 수 있다.
index.html 파일에 <head>태그 사이에 od 태그를 입력하면 공유할 때 썸네일과 설명이 표시되게 할 수 있다.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
직접 홈페이지를 직접 구현해보니 사이트가 어떻게 작동하는지 알 수 있었고, 신기했다.
이 감각와 익숙해진 것을 잃지 않기 위해서 틈틈히 복습하고, 직접 만들고 싶은거를 생각해보자.
'Coding > 스파르타코딩클럽' 카테고리의 다른 글
| [스파르타코딩클럽] Flask, API (0) | 2022.05.26 |
|---|---|
| [스파르타코딩클럽] 파이썬, 웹스크래핑(크롤링), DB, pymongo (0) | 2022.05.13 |
| [스파르타코딩클럽] jQuery, Ajax 기초 (0) | 2022.05.06 |
| [스파르타코딩클럽] HTML, CSS, Javascript 기초 (0) | 2022.05.04 |