[항해99][Python][5주차] 내용 정리

서버와 클라이언트를 좀 더 심도 있게 다루는 법을 배웠고, AWS를 이용하여 서버를 구매한 뒤 가비아를 통해 만든 도메인을 연결해 실제로서비스되는 방법처럼 배울 수 있는 주차였다.

 

1. 버킷리스트 사이트 만들기

 

 

 

 

 

 

 

 

 

 

 

 

간단한 버킷리스트 사이트를 만들고 4주차 때와 같이 GET, POST 방식을 이용하여 리스트를 서버에 기록하고 보여주는 연습을 하였다. 

이번에 배운 POST는 지금까지와는 다르게 약간 추가된 것이 있는데, 각각의 리스트에 클라이언트 측에는 보이지 않는 번호를 부여해야 했다. 번호를 부여하는 이유는 동일한 리스트가 있을 경우에 대비함이다.

예를 들어 리스트 중에 "박물관 가기"가 두 개가 있다고 생각해보자. 첫 번째 박물관 가기를 완료시킨다면 번호가 부여되지 않았을 경우 "박물관 가기"라는 리스트가 전부 완료가 되게 된다.

POST

#서버측은 아래와 같다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) + 1
    doc = {
        'num':count,
        'bucket':bucket_receive,
        'done':0
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '등록 완료!'})

//클라이언트측은 아래와 같다.
function save_bucket() {
    let bucket = $('#bucket').val()
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {bucket_give: bucket},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

GET

#서버측은 아래와 같다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {'_id': False}))
    return jsonify({'buckets': bucket_list})

//클라이언트측은 아래와 같다.
function show_bucket() {
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            let rows = response['buckets']
            for (let i = 0; i < rows.length; i++) {
                let bucket = rows[i]['bucket']
                let num = rows[i]['num']
                let done = rows[i]['done']
                let temp_html = ``
                if (done == 0) {
                    temp_html = `<li>
                                     <h2>✅ ${bucket}</h2>
                                     <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                 </li>`
                } else {
                    temp_html = `<li>
                                     <h2 class="done">✅ ${bucket}</h2>
                                 </li>`
                }
                $('#bucket-list').append(temp_html)
            }
        }
    });
}

list 완료 POST

list 완료 POST에서 중요한 것은 번호를 받아와서 업데이트를 하는 것이다.

또한 받아오는 번호인 num_receive는 문자열로 들어오는데 이것을 숫자로 바꿔주는 것이 중요하다.

#서버측은 아래와 같다.
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

//클라이언트측은 아래와 같다.
function done_bucket(num) {
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {num_give: num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

---

2. 실제로 서버에 올리기

실제로 사용자들에게 제공되는 서버는 항상 프로그램이 실행되어 있어야 하고, 공개 IP로 누구나 접근이 가능해야 하기 때문에 나의 PC로는부적절하다.

이런 이유로 AWS라는 클라우드 서비스와 같은 것이 필요한데 나는 사전에 AWS에 가입해 둔 상태였다. 이곳에서 항상 켜져 있는 PC인EC2의 사용권을 구매하였다.

운영체제는 리눅스가 사용된다.

리눅스는 흔히 사용되는 운영체제인 Windows와는 사용방법이 상당히 다르다. 예전 Mdir 없이 사용하는 MS-DOS와 비슷하게 마우스의 사용 없이 오로지 키보드로 명령어를 입력하여 사용한다.

AWS EC2에 접속

1. 터미널 실행.
2. sudo chmod 400 키페어 끌어다 놓기.
3. ssh -i 키페어 끌어다 놓기  ubuntu@AWS에 적힌 나의 IP.

아래는 리눅스에서 가장 많이 사용되는 명령어 중 몇 가지라고 한다.

ls : 현재 위치의 모든 파일, 폴더를 보여준다. MS-DOS의 dir과 같은 용도.
pwd : 현재 위치를 알려준다.
mkdir : 현재 위치 아래에 폴더를 만든다. MS-DOS의 md와 같은 용도.
cd [폴더] : 해당 폴더로 이동한다. MS-DOS의 cd와 같은 용도.
cd .. : 현재 폴더의 상위 폴더로 이동한다.
cp -r [복사 대상] [붙여넣기 할 대상] : 복사하여 붙여넣기.
rm -rf [지우기] : 지우기.
sudo [실행할 명령어] : 명령어를 관리자 권한으로 실행한다.
sudo su : 관리자 권한으로 들어간다. (나올 때는 exit명령어 사용.)

서버의 세팅

아래의 명령어를 EC2에 접속한 상태에서 터미널로 입력한다.

# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> 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
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

 

 

 

 

 

 

 

 

 

 

filezila를 실행하여 왼쪽과 같이 설정한 뒤, html 파일, python파일이나 다른 필요한 파일이나 폴더를 EC2로 옮긴다.

Flask 서버를 실행

터미널에서 아래 명령어를 입력한다.

python app.py

그러나 프레임워크들이 설치가 되어 있지 않아 실행이 되지 않는다.

아래의 패키지들을 설치해 주자.

pip install flask
pip install pymongo
pip install dnspython

정상적으로 실행이 된다.

이제 AWS에서 5000 포트를 열어주면 완료다.

아래와 같이 따라 하자.

이제 "http://나의 아이피" 접속이 잘 된다.

 

다만 여기서 터미널을 종료하게 되면 서버가 동작하지 않게 된다.

터미널을 종료해도 서버를 동작하게 하려면 아래의 명령어를 터미널에 입력하면 된다.

nohup python app.py &

또한 위의 상시동작을 강제 종료하는 방법도 있다.

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

---

3. 도메인 연결하기

가비아에서 미리 구매해 둔 도메인과 서버 IP를 연결하여야 웹브라우저 주소창에 우리가 흔히 알고 있는 www.ㅁㅁㅁㅁ.com 과 같은 형식으로 접속할 수 있다.

아래와 같이 하자.

---

4. OG태그 만들기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

카톡에 공유하기를 했을 때  사진과 같이 최소한의 정보가 상대방에게 표시되도록 할 수가 있다.

아래의 코드를 HTML의 <head></head> 사이에 넣자.

<meta property="og:title" content=" 사이트의 제목 " />
<meta property="og:description" content="페이지의 내용 요약" />
<meta property="og:image" content=" 이미지 URL" />

---

5. 숙제 제출

이번 주차의 숙제는 특별한 과제 없이 지금까지 만든 노을 팬명록의 코드를 제출하는 것으로 완료되었다.

도메인이 만들어지고 나의 PC가 아닌 스마트폰이나 다른 기기에서 내가 만든 웹사이트를 들어갈 수 있다니 정말 흥분된다.

점점 재미가 붙고 있다.