커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
로컬 환경에서는 잘 작동하는 코드가 서버에서는 잘 작동을 안해요.
undefined주차
북마크
홍*희
댓글
3
추천
0
조회수
13
조회수
13
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


배운 내용을 바탕으로 개인적으로 사용할 웹페이지를 만들었는데요.

로컬 모드에서는 잘 작동하고 DB에 기록하고 수정하는 것 모두 문제가 없는데

서버에 업로드 했더니 DB의 data를 하나도 불러오지 못 하는 것 같아요.

왜 로컬에서는 잘 작동하는데 서버에서는 작동을 하지 못하는 건가요?

AWS 주소는 http://3.38.169.12/ 입니다.


로컬환경에서와는 다르게 서버로 실행시킨 페이지에서는 다음과 같은 에러가 뜹니다.

Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)



<app.py>

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.lqcfdt1.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

@app.route('/')
def home():
   return render_template('index.html')

@app.route("/item", methods=["POST"])
def item_post():
    title_receive = request.form['title_give']
    model_receive = request.form['model_give']
    memo_receive = request.form['memo_give']
    count_receive = request.form['count_give']
    box_check_receive = request.form['box_check_give']

    item_list = list(db.items.find({}, {'_id': False}))
    count = len(item_list) + 1

    doc = {
            'num' : count,
            'title': title_receive,
            'model' : model_receive,
            'memo' : memo_receive,
            'count' : count_receive,
            'box_check' : box_check_receive
    }
    db.items.insert_one(doc)

    return jsonify({'msg':'저장 완료!'})

@app.route("/item/modify", methods=["POST"])
def item_modify():
    num_receive = request.form['num_give']
    title_receive = request.form['title_give']
    model_receive = request.form['model_give']
    memo_receive = request.form['memo_give']
    count_receive = request.form['count_give']
    box_check = request.form['box_check_give']

    db.items.update_one({'num': int(num_receive)}, {'$set': {'title': title_receive, 'model':model_receive, 'memo':memo_receive, 'count':count_receive, 'box_check':box_check}})
    return jsonify({'msg':'수정 완료!'})

@app.route("/item", methods=["GET"])
def item_get():
    item_list = list(db.items.find({}, {'_id': False}))
    return jsonify({'items':item_list})

@app.route("/item/num", methods=["GET"])
def item_num_get():
    num_receive = request.args.get('num_give')
    num_item = db.items.find_one({'num':int(num_receive)},{'_id':False})
    return jsonify({'item':num_item})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

<index.html>

<!doctype html>
<html lang="en">

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>

    <title>깡총이 육아용폼</title><link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Noto+Sans+KR&family=Single+Day&display=swap" rel="stylesheet">


    <style>
        * {
            font-family: 'Single Day', cursive;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: url('https://i2.wp.com/amotherfarfromhome.com/wp-content/uploads/2017/11/ultimate-newborn-sleep-schedule-share.jpg');
            background-position: center;
            background-size: cover;

            color: black;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: black;

            border-radius: 50px;
            border: 1px solid white;

            padding-top: 10px;
            margin: 10px 0px 20px 0px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }


        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1300px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .mymodifier {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .form-floating{
            margin: 10px auto 15px auto;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }

        .card-body > input {
            color: lightgrey;
        }
        .card-body > input:hover {
            color: grey;
        }
    </style><script>
        $(document).ready(function(){
          listing();
        });

        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: 'GET',
                url: '/item',
                data: {},
                success: function (response) {
                    let rows = response['items']
                    for(let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let title = rows[i]['title']
                        let model = rows[i]['model']
                        let memo = rows[i]['memo']
                        let count = rows[i]['count']
                        let box_check = rows[i]['box_check']
                        let temp_html = `
                            <div class="col"><div class="card h-100"><h5 class="card-header"><b>${title}</b></h5><div class="card-body"><h5 class="card-title">${model}</h5><h6 class="card-subtitle mb-2 text-muted">${box_check} / 보유수량 ${count}개</h6><p class="card-text">${memo}</p><input onclick="open_modifier(${num})" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></p></div></div></div>
                        `
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }
        function listing_ready() {
            $('#cards-box').empty()
            $.ajax({
                type: 'GET',
                url: '/item',
                data: {},
                success: function (response) {
                    let rows = response['items']
                    for(let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let title = rows[i]['title']
                        let model = rows[i]['model']
                        let memo = rows[i]['memo']
                        let count = rows[i]['count']
                        let box_check = rows[i]['box_check']
                        if(box_check == '구매예정') {
                            let temp_html = `
                            <div class="col"><div class="card h-100"><h5 class="card-header"><b>${title}</b></h5><div class="card-body"><h5 class="card-title">${model}</h5><h6 class="card-subtitle mb-2 text-muted">${box_check} / 보유수량 ${count}개</h6><p class="card-text">${memo}</p><input onclick="open_modifier(${num})" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></p></div></div></div>
                             `
                            $('#cards-box').append(temp_html)
                        }
                    }
                }
            })
        }

        function listing_refer() {
            $('#cards-box').empty()
            $.ajax({
                type: 'GET',
                url: '/item',
                data: {},
                success: function (response) {
                    let rows = response['items']
                    for(let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let title = rows[i]['title']
                        let model = rows[i]['model']
                        let memo = rows[i]['memo']
                        let count = rows[i]['count']
                        let box_check = rows[i]['box_check']
                        if(box_check == '보류하기') {
                            let temp_html = `
                            <div class="col"><div class="card h-100"><h5 class="card-header"><b>${title}</b></h5><div class="card-body"><h5 class="card-title">${model}</h5><h6 class="card-subtitle mb-2 text-muted">${box_check} / 보유수량 ${count}개</h6><p class="card-text">${memo}</p><input onclick="open_modifier(${num})" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></p></div></div></div>
                             `
                            $('#cards-box').append(temp_html)
                        }
                    }
                }
            })
        }

        function listing_done() {
            $('#cards-box').empty()
            $.ajax({
                type: 'GET',
                url: '/item',
                data: {},
                success: function (response) {
                    let rows = response['items']
                    for(let i = 0; i < rows.length; i++) {
                        let num = rows[i]['num']
                        let title = rows[i]['title']
                        let model = rows[i]['model']
                        let memo = rows[i]['memo']
                        let count = rows[i]['count']
                        let box_check = rows[i]['box_check']
                        if(box_check == '구매완료') {
                            let temp_html = `
                            <div class="col"><div class="card h-100"><h5 class="card-header"><b>${title}</b></h5><div class="card-body"><h5 class="card-title">${model}</h5><h6 class="card-subtitle mb-2 text-muted">${box_check} / 보유수량 ${count}개</h6><p class="card-text">${memo}</p><input onclick="open_modifier(${num})" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></p></div></div></div>
                             `
                            $('#cards-box').append(temp_html)
                        }
                    }
                }
            })
        }

        function posting() {
            let title = $('#floatingtitle').val()
            let model = $('#floatingmodel').val()
            let memo = $('#floatingmemo').val()
            let count = $('#floatingcount').val()
            let box_check = ''
            if ($('#check_done').is(":checked") & $('#check_defer').is(":checked")) {
                alert("체크박스는 하나만 선택하세요!!");
                return;
            } else if ($('#check_defer').is(":checked")) {
                box_check = $('#check_defer').val();
            } else if ($('#check_done').is(":checked")) {
                box_check = $('#check_done').val();
            } else {
                box_check = "구매예정";
            }

            $.ajax({
                type: 'POST',
                url: '/item',
                data: {title_give: title, model_give: model, memo_give: memo, count_give: count, box_check_give: box_check},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

        function modifying(num) {
            let title = $('#floatingtitle_mod').val()
            let model = $('#floatingmodel_mod').val()
            let memo = $('#floatingmemo_mod').val()
            let count = $('#floatingcount_mod').val()
            let box_check = ''
            if ($('#check_done_mod').is(":checked") & $('#check_defer_mod').is(":checked")) {
                alert("체크박스는 하나만 선택하세요!!");
                return;
            } else if ($('#check_defer_mod').is(":checked")) {
                box_check = $('#check_defer_mod').val();
            } else if ($('#check_done_mod').is(":checked")) {
                box_check = $('#check_done_mod').val();
            } else {
                box_check = "구매예정";
            }

            $.ajax({
                type: 'POST',
                url: '/item/modify',
                data: {title_give: title, model_give: model, memo_give: memo, count_give: count, num_give: num, box_check_give: box_check},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }

        function open_modifier(num) {
            $('#modify-box').empty()

            $.ajax({
                type: 'GET',
                url: '/item/num?num_give='+num,
                data: {},
                success: function (response) {
                    let item = response['item']
                    let title = item['title']
                    let model = item['model']
                    let memo = item['memo']
                    let count = item['count']
                    let box_check = item['box_check']

                    let temp_html = `
                         <div class="form-floating"><input type="title" class="form-control" id="floatingtitle_mod" value=${title} placeholder="title"><label for="floatingtitle">품명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmodel_mod" value=${model} placeholder="title"><label for="floatingtitle">모델명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmemo_mod"value=${memo} placeholder="title" ><label for="floatingtitle">메모</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingcount_mod" value=${count} placeholder="title"><label for="floatingtitle">보유수량</label></div>
                    `;
                    let temp_html_2 = ``
                    if(box_check == '구매완료'){
                        temp_html_2 = `
                        <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_done_mod" value="구매완료" checked><label class="form-check-label" for="check_done_mod">구매완료</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_defer_mod" value="보류하기"><label class="form-check-label" for="check_defer_mod">보류하기</label></div><div class="mybtns"><button onclick="modifying(${num})" type="button" class="btn btn-dark">수정하기</button><button onclick="close_modifier()" type="button" class="btn btn-outline-dark">닫기</button></div>
                        `
                    } else if (box_check == '보류하기'){
                       temp_html_2 = `
                            <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_done_mod" value="구매완료"><label class="form-check-label" for="check_done_mod">구매완료</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_defer_mod" value="보류하기" checked><label class="form-check-label" for="check_defer_mod">보류하기</label></div><div class="mybtns"><button onclick="modifying(${num})" type="button" class="btn btn-dark">수정하기</button><button onclick="close_modifier()" type="button" class="btn btn-outline-dark">닫기</button></div>
                        `
                    } else{
                       temp_html_2 = `
                            <div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_done_mod" value="구매완료"><label class="form-check-label" for="check_done_mod">구매완료</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_defer_mod" value="보류하기"><label class="form-check-label" for="check_defer_mod">보류하기</label></div><div class="mybtns"><button onclick="modifying(${num})" type="button" class="btn btn-dark">수정하기</button><button onclick="close_modifier()" type="button" class="btn btn-outline-dark">닫기</button></div>
                        `
                    }
                    $('#modify-box').append(temp_html)
                    $('#modify-box').append(temp_html_2)
                    $('#modify-box').show()
                }
            })
        }
        function close_modifier() {
            $('#modify-box').hide()
        }
    </script>
</head>

<body>
<div class="mytitle"><h1><b>깡총이 육아용품</b></h1><button onclick="open_box()"><h4><b>추가하기</b></h4></button><div class="btn-group" role="group" aria-label="Basic outlined example"><button onclick="listing()" type="button" class="btn btn-outline-dark">전체보기</button><button onclick="listing_ready()" type="button" class="btn btn-outline-dark">구매예정만</button><button onclick="listing_refer()" type="button" class="btn btn-outline-dark">보류만</button><button onclick="listing_done()" type="button" class="btn btn-outline-dark">구입완료만</button></div>
</div>
<div class="mypost" id="post-box"><div class="form-floating"><input type="title" class="form-control" id="floatingtitle" placeholder="title"><label for="floatingtitle">품명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmodel" placeholder="title"><label for="floatingtitle">모델명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmemo" placeholder="title" ><label for="floatingtitle">메모</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingcount" placeholder="title"><label for="floatingtitle">보유수량</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_done" value="구매완료"><label class="form-check-label" for="check_done">구매완료</label></div><div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" id="check_defer" value="보류하기"><label class="form-check-label" for="check_defer">보류하기</label></div>

    <div class="mybtns"><button onclick="posting()" type="button" class="btn btn-dark">기록하기</button><button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button></div>
</div>

<div class="mymodifier" id="modify-box"><div class="form-floating"><input type="title" class="form-control" id="floatingtitle_mod" value="기존품명" placeholder="title"><label for="floatingtitle">품명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmodel_mod" value="기존모델명" placeholder="title"><label for="floatingtitle">모델명</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingmemo_mod"value="기존메모" placeholder="title" ><label for="floatingtitle">메모</label></div><div class="form-floating"><input type="title" class="form-control" id="floatingcount_mod" value="기존수량" placeholder="title"><label for="floatingtitle">보유수량</label></div>

    <div class="mybtns"><button onclick="modifying()" type="button" class="btn btn-dark">수정하기</button><button onclick="close_modifier()" type="button" class="btn btn-outline-dark">닫기</button></div>
</div>

<div class="mycards"><div class="row row-cols-1 row-cols-md-3 g-3" id="cards-box"><div class="col"><div class="card h-100"><h5 class="card-header"><b>품명</b></h5><div class="card-body"><h5 class="card-title">모델명</h5><h6 class="card-subtitle mb-2 text-muted">구입완료 / 보유수량 3개</h6><p class="card-text">메모는 여기에 적기</p><input onclick="open_modifier()" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></div><button type="button" class="btn btn-outline-secondary">구매예정으로 변경</button></div></div><div class="col"><div class="card h-100"><h5 class="card-header"><b>품명</b></h5><div class="card-body"><h5 class="card-title">모델명</h5><h6 class="card-subtitle mb-2 text-muted">구매보류 / 보유수량 0개</h6><p class="card-text">메모는 여기에 적기</p><input onclick="open_modifier()" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></div><button type="button" class="btn btn-outline-secondary">보류 해제하기</button></div></div><div class="col"><div class="card h-100"><h5 class="card-header"><b>품명</b></h5><div class="card-body"><h5 class="card-title">모델명</h5><h6 class="card-subtitle mb-2 text-muted">구매예정 / 보유수량 0개</h6><p class="card-text">메모는 여기에 적기</p><input onclick="open_modifier()" type='button' class='btn' name='btn' value='수정하기' style="float: right;"></p></div><div class="btn-group" role="group" aria-label="Basic outlined example"><button type="button" class="btn btn-outline-secondary">보류하기</button><button type="button" class="btn btn-outline-secondary">구입완료</button></div></div></div></div>
</div>
</body>

</html>
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴