app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://minjeong:rPfksakfdl1!@cluster0.mtbw8.mongodb.net/myFirstDatabase?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/homework", methods=["POST"])
def homework_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = {
'name': name_receive,
'comment': comment_receive
}
db.homework.insert_one(doc)
return jsonify({'msg':'์
๋ ฅ ์๋ฃ!'})
@app.route("/homework", methods=["GET"])
def homework_get():
all_comments = list(db.homework.find({}, {'_id': False}))
return jsonify({'comments': all_comments})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="์์ด์ ํฌ๋ช
๋ก" />
<meta property="og:description" content="์์ ํ๋ง๋ ๋จ๊ธฐ๊ณ ๊ฐ์ธ์!" />
<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/9960CC425BFA32EF19" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>์์ด์ ํฌ๋ช
๋ก</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mypic {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://t1.daumcdn.net/cfile/tistory/9960CC425BFA32EF19');
background-position: center 10%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
.mypost > button {
margin-top: 15px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function () {
set_temp()
show_comment()
});
function set_temp() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
$('#temp').text(response['temp'])
}
})
}
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/homework',
data: {name_give: name, comment_give: comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function show_comment() {
$.ajax({
type: "GET",
url: "/homework",
data: {},
success: function (response) {
let rows = response['comments']
for (let i = 0; i < rows.length; i++){
let name = rows[i]['name']
let comment = rows[i]['comment']
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
$(`#comment-list`).append(temp_html)
}
}
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>์์ด์ ํฌ๋ช
๋ก</h1>
<p>ํ์ฌ๊ธฐ์จ: <span id="temp">36</span>๋</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">๋๋ค์</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">์์๋๊ธ</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">์์ ๋จ๊ธฐ๊ธฐ</button>
</div>
<div class="mycards" id="comment-list">
</div>
</body>
</html>
์ฝ๋ฉ ์์ : ์๋ฒ ์ฐ๊ฒฐ ํ์ธ โก ์๋ฒ๋ถํฐ ๋ง๋ค๊ธฐ โก ํด๋ผ์ด์ธํธ ๋ง๋ค๊ธฐ โก ์์ฑ
1. POST :: ๊ธฐ๋กํ๊ธฐ (Createโ POST)
- ์์ฒญ ์ ๋ณด : URL=
/bucket
, ์์ฒญ ๋ฐฉ์ =POST
- ํด๋ผ(ajax) โ ์๋ฒ(flask) :
bucket
- ์๋ฒ(flask) โ ํด๋ผ(ajax) : ๋ฉ์์ง๋ฅผ ๋ณด๋ (๊ธฐ๋ก ์๋ฃ!)
๐๋จ! ๋ค์ ๋ฒํธ๋ฅผ ๋ง๋ค์ด ํจ๊ป ๋ฃ์ด์ฃผ๋ ์์ ๋ ํด์ผ ํจ! ๊ทธ๋์ผ ์ ๋ฐ์ดํธ๊ฐ ๊ฐ๋ฅ
2. GET :: ๋ณด์ฌ์ฃผ๊ธฐ (Readโ GET)
- ์์ฒญ ์ ๋ณด : URL=
/bucket
, ์์ฒญ ๋ฐฉ์ =GET
- ํด๋ผ(ajax) โ ์๋ฒ(flask) : (์์)
- ์๋ฒ(flask) โ ํด๋ผ(ajax) : ์ ์ฒด ๋ฒํท๋ฆฌ์คํธ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ
3. POST :: ์๋ฃํ๊ธฐ (Updateโ POST)
- ์์ฒญ ์ ๋ณด : URL=
/bucket/done
, ์์ฒญ ๋ฐฉ์ =POST
- ํด๋ผ(ajax) โ ์๋ฒ(flask) :
num
(๋ฒํท ๋๋ฒ)- ์๋ฒ(flask) โ ํด๋ผ(ajax) : ๋ฉ์์ง๋ฅผ ๋ณด๋ (๋ฒํท ์๋ฃ!)
๋ฐฐํฌ : ๋๊ตฌ๋ ๋ด ์๋น์ค๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ํ๊ธฐ ์ํ ์์ !
- ์ธ์ ๋ ์์ฒญ์ ์๋ตํ๋ ค๋ฉด
1) ์ปดํจํฐ๊ฐ ํญ์ ์ผ์ ธ์๊ณ , ํ๋ก๊ทธ๋จ์ด ์คํ๋์ด์ผ ํจ
2) ๋ชจ๋๊ฐ ์ ๊ทผํ ์ ์๋ ๊ณต๊ฐ์ฃผ์์ธ ๊ณต๊ฐ IP ์ฃผ์๋ก ๋์ ์น ์๋น์ค์ ์ ๊ทผํ ์ ์๋๋ก ํด์ผ ํจ- AWS (ํด๋ผ์ฐ๋ ์๋น์ค)์์ ํธํ๊ฒ ์๋ฒ๋ฅผ ๊ด๋ฆฌ!!
๐จ์ฐธ๊ณ : EC2 ์๋ฒ ์ข ๋ฃ๋ฐฉ๋ฒ! (1๋ ํ ์๋๊ฒฐ์ ๋ฐฉ์ง)๐จ
- ์ธ์คํด์ค ์ค์ง - ์ปดํจํฐ ๋๊ธฐ
- ์ธ์คํด์ค ์ข ๋ฃ - ์ปดํจํฐ ๋ฐ๋ฉ (์๋ก ํ๋ ๋ง๋ค๊ณ ์ถ์ ๋ ์ฌ์ฉ)
SSH(Secure Shell Protocol) : ๋ค๋ฅธ ์ปดํจํฐ์ ์ ์ํ ๋ ์ฐ๋ ํ๋ก๊ทธ๋จ
- ์ ์ํ ์ปดํจํฐ์ 22๋ฒ ํฌํธ๊ฐ ์ด๋ ค์์ด์ผ ์ ์ ๊ฐ๋ฅ!
- Windows : ssh๊ฐ ์์ผ๋ฉด gitbash ํ๋ก๊ทธ๋จ ์ด์ฉ
๋ฆฌ๋ ์ค : '์ ๋ช ๋ น์ด'๋ฅผ ํตํด OS ์กฐ์
๊ฐ์ฅ ๋ง์ด ์ฐ๋ ๋ช ๋ น์ด
ls: ๋ด ์์น์ ๋ชจ๋ ํ์ผ์ ๋ณด์ฌ์ค๋ค. pwd: ๋ด ์์น(ํด๋์ ๊ฒฝ๋ก)๋ฅผ ์๋ ค์ค๋ค. mkdir: ๋ด ์์น ์๋์ ํด๋๋ฅผ ํ๋ ๋ง๋ ๋ค. cd [๊ฐ ๊ณณ]: ๋๋ฅผ [๊ฐ ๊ณณ] ํด๋๋ก ์ด๋์ํจ๋ค. cd .. : ๋๋ฅผ ์์ ํด๋๋ก ์ด๋์ํจ๋ค. cp -r [๋ณต์ฌํ ๊ฒ] [๋ถ์ฌ๋ฃ๊ธฐ ํ ๊ฒ]: ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ rm -rf [์ง์ธ ๊ฒ]: ์ง์ฐ๊ธฐ sudo [์คํ ํ ๋ช ๋ น์ด]: ๋ช ๋ น์ด๋ฅผ ๊ด๋ฆฌ์ ๊ถํ์ผ๋ก ์คํํ๋ค. sudo su: ๊ด๋ฆฌ๊ฐ ๊ถํ์ผ๋ก ๋ค์ด๊ฐ๋ค. (๋์ฌ๋๋ exit์ผ๋ก ๋์ด)
EC2 ํ๋ฐฉ์ ์ธํ
ํ๊ธฐ
# python3 -> python (python3๋ฅผ python์ผ๋ก ๋ช
๋ น๋ด๋ฆฌ๊ฒ ๋ค)
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
# pip3 -> pip (pip ๋ผ๋ ํจํค์ง ๋ง๋ฒ์ฌ๋ฅผ ์ค์นํ๋ค)
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
# port forwarding (localhost:5000์์ 5000์ ๋ผ๋ ๋ช
๋ น์ด)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
------(11)-------
# ๊ฐ์ ์ข
๋ฃํ๊ธฐ
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
app.py
, static
, templates
๋ฅผ ๋๋๊ทธํด์ ์ฎ๊ธฐ๋ฉด ๋จ
pip install flask pip install pymongo pip install dnspython
flask ๊น๊ณ ๋์ app.py๋ฅผ ์น๋ฉด, pymongo๋ ์ค์น๊ฐ ์ ๋์ด์๋ค๊ณ ๋ฌ๋ค. ๊ทธ๋ ๋ค! ์ฐ๋ฆฌ๊ฐ ์ค์นํ ํจํค์ง๋ฅผ pip intall ๋ก ๊น์์ฃผ๋ฉด ๋๋ค.
๋ณด์
-๋ณด์๊ทธ๋ฃน
-urlํด๋ฆญ
์์ผ๋ก ๋ค์ด๊ฐ๋ฉด ๋จ!
http ์์ฒญ์์๋ 80ํฌํธ๊ฐ ๊ธฐ๋ณธ. ๊ตณ์ด :80์ ๋ถ์ด์ง ์์๋ ์๋ ์ฐ๊ฒฐ
ํฌํธ ๋ฒํธ๋ฅผ ์ ๋ ฅํ์ง ์์๋ ์๋์ผ๋ก ์ ์๋๊ธฐ ์ํด, 80ํฌํธ๋ก ์ค๋ ์์ฒญ์ 5000ํฌํธ๋ก ์ ๋ฌ!(ํฌํธํฌ์๋ฉ; port fowarding)
# ์๋์ ๋ช
๋ น์ด๋ก ์คํํ๋ฉด ๋๋ค
nohup python app.py &
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
์ ์ ์ฌ๋ ๋๋ฉ์ธ ์ฐ๊ฒฐํ๊ธฐ! (๊ฐ๋น์)
โจ์ ์์๋!
og:image, og:title, og:descriptionํ๊ทธ
HTML์ ~ ์์ ์ฝ๋ ๋ฃ๊ธฐ
<meta property="og:title" content="๋ด ์ฌ์ดํธ์ ์ ๋ชฉ" />
<meta property="og:description" content="๋ณด๊ณ ์๋ ํ์ด์ง์ ๋ด์ฉ ์์ฝ" />
<meta property="og:image" content="์ด๋ฏธ์งURL" />
์์ฑ!
๐ง์ด๋ฏธ์ง๋ฅผ ๋ฐ๊ฟจ๋๋ฐ ์ด์ ogimage๊ฐ ๊ทธ๋๋ก ๋์ค๋ ๊ฒฝ์ฐ
๐ ํ์ด์ค๋ถ/์นด์นด์คํก ๋ฑ์์ ์ฒ์ ๊ฒ์ ํ๋์ ์ ์ฅํด๋๊ธฐ ๋๋ฌธ!
๋๋ ์ฒ์์ ๋ฐ์์ด ๋ฐ๋ก ์ ๋ผ์ ์นด์นด์คํก ogํ๊ทธ๋ฅผ ์ด๊ธฐํํ์๋ค.
๋งํ์ ์์ git bash์ฐฝ์์ ์๋ฌ๊ฐ ๋ด๋ค.. ๊ฒ๋ค๊ฐ ์นํ์ด์ง๋ ์ ์ ์๋ํ์ง ์์๋ค. ๋ฌด์ ๋๋ฌธ์ธ์ง ์ด์ ๋ฅผ ๋ชฐ๋ผ ํ์ฐธ์ ํค๋งธ๋ค.
์ดํ, slack์ ๋์์ ์์ฒญํ์๋ค.
DB์ชฝ์์ ๋ฌธ์ ์๋๋ณด๋ค!!
DB์ ๋คํธ์ํฌ IP์ฃผ์๋ฅผ 0.0.0.0/0์ผ๋ก ๋ฐ๊พธ๋๊น ๋ฐ๋ก ํด๊ฒฐ๋์๋ค!
์์ด์ ํฌ๋ช
๋ก ๋ฐ๋ก๊ฐ๊ธฐ
์ด ๊ณผ์ ๊น์ง ์ค๋๋ฐ ์ฌ๋ฌ ์ด๋ ค์์ ๋ง์ฃผ์ณค๋ค. ๊ทธ๋ฐ๋ฐ ๋ฑ ์์ฑ๋๋ ์๊ฐ์ ํฌ์ด์ด ์์ฒญ
๋๊ปด์ก๋ค!
ํด๊ฒฐ์ด ๋์ง ์์๋ ํผ์์ ์ด๋ป๊ฒ๋ ํ๋ ค๊ณ ๋
ธ๋ ฅํ๋๋ฐ ์ ๋ง ์๋ ๋๋ slack์ ์ฆ๋ฌธ์ฆ๋ต์ ์ด์ฉํ๋ค. ๊ผญ ์ฆ๋ฌธ์ฆ๋ต ์๊ฐ์ด ์๋๋๋ผ๋ ์ผ๋จ ์ง๋ฌธํ๋ฉด ๋ต๋ณ์ด ๋น ๋ฅด๊ฒ ๋์์จ๋ค. ๋ค๋ฅธ ์ฌ๋๋คํํ
์๋ํ๋ ๊ฒ๋ ๋ฟ๋ฏํ๋ค! ์์
๋ฃ๊ธธ ์ํ ๊ฒ ๊ฐ๋ค.
์ผ๋ฐ์ ์ผ๋ก ์นํ์ด์งํ๋ฉด html, css, javascript๋ฐ์ ์๊ฐ๋์ง ์๋๋ฐ ๊ทธ ์ด์์ ๋์ด ์๋ฒ ๋ฐฐํฌ๊น์ง ํ๋ ๊ฒ ์ข์์ต๋๋ค. ์ด์ฉ ์ ์์ด ์๊ฒ ๋ฐฐ์ธ ์ ์๋ ๊ฑธ ์ ์ธํ๊ณ ๋ ์นํ์ด์ง๊ฐ ๋ง๋ค์ด์ง๋ ์ ๋ฐ์ ์ธ ๊ณผ์ ์ ์ง์ ๊ฒช์ด๋ด์ ์ข์์ต๋๋ค.
์ดํ์ ์ ๊ฐ ํผ์ ์นํ์ด์ง๋ฅผ ๋ง๋ ๋ค๊ณ ํ ๋๊ฐ ์ข ๊ฑฑ์ ๋๋ ๊ฒ ๋ง๊ณ ๋ ๋ฑํ ์์ต๋๋ค.