
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
배운 내용을 바탕으로 개인적으로 사용할 웹페이지를 만들었는데요.
로컬 모드에서는 잘 작동하고 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>
