스파르타 코딩 웹 개발 개발일지 5주차 (복습)

[수업 목표]

1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '버킷리스트'를 완성한다.
3. EC2에 내 프로젝트를 올리고, 자랑한다!

그리고 드디어! 친구들도 볼 수 있도록 배포하는 일까지, 한번 쭉-해보겠습니다!

02. [버킷리스트] - 프로젝트 세팅

sparta → projects → bucket 폴더를 열고 시작!

1) 문제 분석 - 완성작부터 보기!

2) 프로젝트 설정 - flask 폴더 구조 만들기

static, templates 폴더 + app.py 만들기! 이젠 너무 익숙하죠?

03. [버킷리스트] - 뼈대 준비하기

app.py에 기본코드 넣기

index.html에 기본코드 넣기

2) 프로젝트 준비 - mongoDB Atlas 창 띄워두기

 

04. [버킷리스트] - POST연습(기록하기)

그냥 기록하기는 어떻게 하겠는데, 완료 누르면 줄 그어지는 것은 할 줄 모른다.

버킷에 숫자를 넣어주고 그것을 지칭해서 done으로 만들어주는 것 같다 .근데 숫자를 어떻게 넣어주지?

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'num':0,
        'bucket':bucket_receive,
        'done':0
    }
    db.buckets.insert_one(doc)
    return jsonify({'msg': '버킷 입력 완료!'})

여기에서 

파이썬에서 리스트의 개수 세기 검색!

bucket_list = list(db.buckets.find({}, {'_id': False}))
count = len(bucket_list)

len()을 써주면 된다. 

그리고 각각 새로운 버킷 리스트 마다 원래 리스트 개수에서 1을 더한 숫자를 넣어준다.

 

서버의 POST 방식 API 코드

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    bucket_list = list(db.buckets.find({}, {'_id': False}))
    count = len(bucket_list) + 1
    doc = {
        'num': count,
        'bucket':bucket_receive,
        'done':0
    }
    db.buckets.insert_one(doc)
    return jsonify({'msg': '버킷 입력 완료!'})

 

클라이언트 POST 방식의 코드

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()
        }
    });
}

05. [버킷리스트] - GET연습(보여주기)

서버의 GET  방식 API

@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.buckets.find({},{'_id':False}))
    return jsonify({'buckets': bucket_list})

클라이언트의 GET 방식

$(document).ready(function () {
    show_bucket();
});
function show_bucket(){
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            console.log(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)

            }
        }
    });
}

06. [버킷리스트] - POST연습(완료하기)

 

서버쪽

 

클라이언트 쪽에서 자료를 받아올 때 숫자 자료들이 다 문자화 되어버린다. 
문자열로 바뀐 숫자를 다시 숫자로 바꿀 때 int()안에 넣어주면 된다.

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    print(num_receive)
    db.buckets.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()
        }
    });
}

콘솔창에 들어가서 확인해보면 소원들이  각각 숫자를 가지고 만들어져있다. 그것을 선택하면 자동으로 숫자를 넣은 done_bucket이 실행한다.

<button onclick="done_bucket(3)" type="button" class="btn btn-outline-primary">완료!</button>

07. 내 프로젝트를 서버에 올리기

웹서비스 런칭하기

1.항상 켜져있어여야한다.

2. 공개 IP주소로 모두가 접근할 수 있도록 해야한다.

 

그러나 내 컴퓨터를 계속 켜놓기는 어렵다 

그렇기 때문에 우리는 ASW 클라우드 서비스를 이용해서 항상 켜놓을 수 있는 서버관리용 컴퓨터인 EC2 사용권을 구입해서 쓴다. 

 

장점은?

트래픽대응이 쉽다.  

08. AWS 서버 구매하기

저번 수업에서 구매했다.

우리가 사려는 컴퓨터는 운영체제가 리눅스이다

AWS사이트에서 로그인 하고  인스턴스에 들어가서 

Ubuntu Server 20.04를 1년 무료 구매한다

1년이 지나서 유료로 전환되기 전에

인스터스에 마우스 우클릭 → 인스턴스 상태 → 종료 눌러준다

시작하기 눌러 새키페어를 만든다. 키페어를 다운로드하여 바탕화면에 둔다.

인스턴스 상태에 실행 중이라고 뜨면 서버용 컴퓨터가 켜진거다.

컴퓨터를 새로 하나 만들려고 한다고 하면, 그전에

이전 것을 사용 중지 클릭하면 컴퓨터가 꺼지는 것

사용 종료 클릭하면 컴퓨터를 반납하는 것이다. 그러니 사용종료하고 새 컴퓨터를 빌려라

 

예전에 다운받아 놓았던 git bash를 켜쟈

$ ssh -i 쓰고 키페어 끌어다가 넣는다. ubuntu@ 쓰고 뒤에  인스턴스를 클릭하면 뜨는 공용ip주소를 넣는다.

이걸 엔터치면 우리가 서버용 컴퓨터에 원격 접속하게 된 것이다.

$ ssh -i /c/Users/Seon/Desktop/ksh_mykey.pem ubuntu@43.201.25.40

리눅스는 마우스로 할 수 있는게 없고, 다 키보드로 친다. 폴더 만드는 것도 명령어를 내려서 한다.

강사님이 하는 것 처럼 sparta파일을 만드려고 했으나 이미 존재한다고 뜸 저번에 만들어놔서 그렇다.

 

파일 만드는 명령어

mkdir sparta

 

ls : 안에 있는거 확인하는 명령어

cd: 폴더 안에 들어가는 명령어

 

외에도 수백가지 명령어가 있지만 매번 검색해서 쓰면 된다. 

 

내가 산 컴퓨터에 나의 파일 올리기

필요한 프로그램 다운로드할 때 쓰는 명령어들을 쓸거다.

 

명령어 모음

# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10\
// python3를 python이라고 표기하기로 약속

# 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
//pip3를 pip로 표기하기로 약속

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
//로컬호스트:5000 붙어있던거 5000을 떼어주는 명령어

#강제종료
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

filezilla 켜준다.

 

왼쪽이 내 컴퓨터 오른쪽이 내가 산 컴퓨터

컴퓨터 연결해주기 위해서

제일 왼쪽 위에 있는 서버 연결 그림 클릭 → 새사이트→ 이름 짓기 → 프로토콜 SFTP- SSH File Transfer Protocol 선택→ 호스트에 공용IP 인스턴스에서 복사해서 붙여넣기→사용자 이름 ubuntu (꼭 이걸로 해야한는지는 모름→ 로그온 유형 키파일 → 키파일 찾아보기에서 파일 종류 pem 파일 선택하고 열기→연결

 

10. Flask 서버를 실행해보기

1) 팬명록 완성본을 filezilla로 EC2에 업로드해봅니다.

static, templates, app.py만 옮긴다. 

 

2) pip로 패키지를 설치하기

//패키지 다운로드 명령어
pip install flask

pip install pymomgo

pip install dnspython

5) AWS에서 5000포트를 열어주기

port 5000이 접속할 수 있는 구멍을 열어줘야한다. 

인스턴스  → 보안 → 보안그룹 클릭 → 인바운드 규칙 편집→규칙추가 → 포트 범위 5000 →유형: 사용자지정 TCP → 소스유형: Anywhere-IPv4

 

이제 공용 ip 주소 + 5000 해주면 접속가능

 

6) 어떻게 되는걸까? 포트 번호 없애기 - 기본 개념

 

• 지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
• http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
• 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
• 리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.

(원래 naver.com 하면 80 이 숨겨져 있다. )

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

11. nohup 설정하기

python app.py 입력하여 실행

ctrl + c 입력하여 중지

 

1) SSH 접속을 끊어도 서버가 계속 돌게 하기

nohup python app.py &

 

2) SSH 접속을 종료한 뒤, 접속해봅니다!

#강제종료
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

 

12. 도메인 연결하기 

1) 도메인 구입/연결

 가비아에서 도메인을 예전에 구매 했었는데 이번에 강의 내용에서 왜 빠졌지?

DNS 설정 클릭 → 호스트: @로 설정 → 값: ip 주소 넣어준다 → 상태에서 확인 클릭 → 저장

 

가비아는 ip 주소인 숫자를 문자열과 매칭 시켜주는 서비스이다. 

 

13. og 태그

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

이걸로 og 태그를 해주었으나 뜨지 않았고,

 

• 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
• 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

카카오계정 로그인

 

 

태그 초기와 링크로 가서 회원가입하고  초기화할 주소에 내 웹페이지를 넣고 나니까 내가 넣은 og 태그들이 적용되어 나왔다. 

 

14. 5주차 끝 & 숙제 설명

 

내 도메인을 제출해주세요! 착착착 잘 따라오셨다면, 팬명록을 EC2에 잘 올려두셨을 거예요.