슈코딩

Flask & 서버에 웹페이지 배포 본문

코딩공부/웹개발

Flask & 서버에 웹페이지 배포

Roshu 2022. 4. 25. 11:30

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
Comments