웹 개발 종합 - 버킷리스트 만들기, 서버(AWS)에 올리기

목표 : 버킷리스트 프로젝트를 만들어서 서버(aws)에 세팅하기!

 

 

 

버킷리스트

 

프로젝트를 하기 위해 필요한 라이브러리 → Flask, Pymongo, dnspython

 

 

 

POST()

 

 

이벤트 순서는 지금까지 해왔던 것과 같이

 

front에서 input 창에서 입력한 데이터를 백으로 보내기 위해 ajax를 사용 →  내용을 backend에서 받은 후 서버(pymongo)에 저장 후 response 전달

 

//front

function save_bucket() {
    let bucket = document.getElementById("bucket").value
    if (bucket == '') return alert('버킷리스트 내용을 입력해주세요.')
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {"bucket_give": bucket},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

 

#backend

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_lists = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_lists) + 1
    bucket_receive = request.form['bucket_give']
    doc = {
        "num" : count,
        "bucket" : bucket_receive,
        "process": 0
    }
    db.bucket.insert_one(doc)

    return jsonify({'msg': '등록완료!'})

- 부록 -

len()함수를 사용하여 갯수 세기(len 메소드 알아보기) 

num은 완료 버튼을 누를 때 num의 데이터를 가져온 후 해당하는 순번의 데이터를 변경해주기 위함

process 또한 완료 버튼을 눌렀을 때 1로 수정함으로써 완료 버튼이 사라지는 변화를 보여주기 위함

 

 

 

 

GET()

 

  ajax를 이용해서 서버(pymongo)에서 데이터를 받아 변수에 저장 후 html 에 뿌려줌

 

 

//front

function show_bucket() {
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            console.log(response["bucket"])

            response.bucket.map((data) => {
                let bucket_list = document.getElementById('bucket-list')
                let bucket_content = data.bucket
                let bucket_process = data.process
                let bucket_num = data.num
                let bucket_list_form = ``
                if (bucket_process == 0) {
                    let bucket_list_form = `
                    <li>
                        <h2>✅ ${bucket_content}</h2>
                        <button type="button" class="btn btn-outline-primary" onclick="done_bucket(${bucket_num})">완료!</button>
                    </li>
                    `
                    bucket_list.insertAdjacentHTML("beforeend", bucket_list_form)
                } else {
                    let bucket_list_form = `
                    <li>
                        <h2 class="done">✅ ${bucket_content}</h2>
                    </li>
                    `
                    bucket_list.insertAdjacentHTML("beforeend", bucket_list_form)
                }

            })


        }
    });
}

#backend

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

    return jsonify({'bucket': bucket_lists})

 

 

 

 

완료하기 - POST()

 

완료버튼을 눌렀을때 백엔드로 num을 전달해서 서버에 done을 저장.

 

<button type="button" class="btn btn-outline-primary" onclick="done_bucket(${bucket_num})">완료!</button>

 

페이지가 랜더링되어 버킷리스트를 화면에 뿌려줄 때(GET()) 완료 버튼을 클릭(onclick)하면 done_bucket()함수 실행되게 미리 설정해야함.

 

//front

function done_bucket(num) {
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {"num_give": num},
        success: function (response) {
            console.log(response["msg"])
            window.location.reload()
        }
    });
}

#backend

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

 

순서	front / backend	내용
1	front	완료 버튼을 누름
2	backend	버튼의 num value를 가지고 서버의 데이터를 검색
3	backend	해당 num이 있는 필드에 process 값을 1로 변경 후 response 전송
4	front	response받은 후 reload()
5	front	페이지 리랜더링 후 GET()
6	front	완료 버튼이 사라짐 (get()에 있는 if문 참고)

 

 

 

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

 

AWS에서 서버( 클라우드 서비스를 제공)를 구매한 후 인스턴스를 생성.

 

 

 

내가 구매한 서버(aws) 접속하기

 

터미널에 'Ssh -i key페어경로(aws에서 인스턴스 만들때 다운받은 key file) ubuntu@인스턴스의 퍼블릭 ip주소' 입력
flask, pymongo, dnspython를 깔아주기!  ex) pip install flask

 

 

 

하.지.만

 

리눅스를 끄는 순간 원격접속이 종료되어 버리는 현상 발생!

 

그럴땐 nohup을 설정해주면 해결!

 

nohup python app.py &

 

리눅스 창을 닫아도 서버가 계속 돌아간다.

 

 

도메인 연결하기

 

가비아에서 산 도메인의 설정을 하기 위해 메인 홈페이지 > DNS 설정 접속.

 

호스트 : @ , 값/위치 : 서버(aws)의 ip주소 입력 후 저장