슈코딩
Flask & 서버에 웹페이지 배포 본문
1. Flask
서버란?
> 컴퓨터 네트워크에서 다른 컴퓨터에 서비스를 제공하기 위한 컴퓨터 또는 소프트웨어
로컬 개발환경?
>내 컴퓨터에서 만들고 내 컴퓨터에서 테스트 할 수 있는 환경
Flask 프레임워크란?
> 서버를 구동시켜주는 편한코드 모음
>예를들어 복잡한 요리를 간편하게 해주는 냉동식품/3분요리/소스
#서버 만들기에 앞서 Flask패키지를 설치한다.
#서버만들기 입문
-Flask 시작 코드
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is Home!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
위의 코드를 실행시킨 후
Localhost:5000 으로 접속하면 This is Home! 이라고 떠있는 페이지가 뜬다.
= 로컬 개발환경!
이제 이 서버에 내용을 담기위해 파일을 2가지 생성한다
#templates : html 파일이 담기는 곳
#static : CSS파일이나 이미지같은 것들이 담기는 곳
#주의: 스펠링이 절대 틀리면 안된다.
templates에 만들어진 index.html 파일을 서버로 불러오는 코드
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
이렇게하면 html에 작성된 페이지가 서버에서 띄워지게 된다.
2. 프로젝트 예제를 통한 반복연습
#화성땅 공동 구매하기
app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/mars", methods=["POST"])
def web_mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
doc = {
'name' : name_receive,
'address' : address_receive,
'size' : size_receive
}
db.mars.insert_one(doc)
return jsonify({'msg': '주문 완료!'})
@app.route("/mars", methods=["GET"])
def web_mars_get():
order_list = list(db.mars.find({}, {'_id': False}))
return jsonify({'orders': order_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
index.html script
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
$.ajax({
type: 'GET',
url: '/mars',
data: {},
success: function (response) {
let rows = response['orders']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let address = rows[i]['address']
let size = rows[i]['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#customer').append(temp_html)
}
}
});
}
function save_order() {
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
$.ajax({
type: 'POST',
url: '/mars',
data: { name_give: name, address_give: address, size_give: size },
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
</script>
3. 프로젝트 서버에 배포하는 법
웹서비스 런칭에 앞서, 언제나 요청에 응답하기 위한 조건
- 컴퓨터가 항상 켜져있어야 하고, 프로그램이 실행중이어야 함
-공개 IP 주소로 접근 할 수 있도록 해야함
#1 AWS서버 구매
#Filezilla
Filezilla를 이용해서 구매한 AWS서버 컴퓨터에 파일 업로드
Git Bash 를 사용해서 원격으로 컴퓨터를 조작 할 수 있다.
#Git bash 원격 명령어
컴퓨터 원격 연결 : ssh -i 'keyfile' ubuntu@AWS ip주소 복사
파일생성 : mkdir
현재 내위치에 뭐가있는지 확인 : ls
''폴더에 들어가기 : cd '' ex) cd sparta
폴더에서 나가기 : cd ..
파이썬 실행 : python app.py
pip라이브러리에서 파이썬 패키지 설치 : pip install ' '
git bash 를 끈상태에서도 서버 유지하기 : nohup python app.py &
서버 강제종료하기 : ps -ef | grep 'app.py' 후에 코드 나온 두가지를 가지고 kill -9 '코드'
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
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 # 포트 포워딩 80으로 들어온애를 5000으로 꽂아줘라!
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
이니셜 세팅하기 : sudo chmod 755 initial_ec2.sh >> 권한설정후
./initial_ec2.sh
명령코드로 컴퓨터 세팅을하고 nohup 상태로 파이썬을 실행시켜주면 완성이다.
가비아에서 구매한 도메인과 연결시키고 og태그만 html에 추가로 기입하면 배포 끝!
'코딩공부 > 웹개발' 카테고리의 다른 글
jQuery & Ajax (0) | 2022.04.19 |
---|---|
웹동작의 개념부터 Javascript 까지 (2) | 2022.04.18 |