TIL/웹 초보

23.04.17

J1-H00N 2023. 4. 17. 18:00

이어서~~

컴 껐다 켰으니 인터프리터 venv 확인!

 

post 백엔드부터 해주고

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

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = {
        'name' : name_receive,
        'comment' : comment_receive
    }
    db.fan.insert_one(doc)

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

그 다음 클라이언트

function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }

 

post도 백엔드부터

def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result': all_comments})

클라이언트

function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()
                rows.forEach((a) => {
                    let name = a['name']
                    let comment = a['comment']

                    let temp_html = `<div class="card">
                                        <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                            </blockquote>
                                        </div>
                                    </div>`

                $('#comment-list').append(temp_html)
                })
            })
        }

 

 

이렇게 총 5개의 미니 프로젝트를 해봤고, 이제 이 프로젝트를 aws를 통해 올리기 전에, og 태그들을 만들어보자.

og 태그들은 영화 리뷰 남기기 프로젝트에서 가져왔던 meta태그들을 말한다.

 

예시)

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

 

웹 서비스를 런칭하기 전 서버에 대해 간략히 정리

로컬 서버에 웹 서비스를 런칭하면 사용자가 요청할 때마다 데이터를 줘야하므로 컴퓨터가 켜져있어야 한다. 그래서 서버를 사용한다.

이를 위해서 서버용 컴퓨터를 구비하기 쉽지 않으니 인터넷 서버 서비스를 이용한다 그 예 중 하나가 aws.

 

배포과정

https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/welcome 접속, 로그인

보안 자격 증명

액세스 키 -> 새 액세스 키 만들기 -> 액세스 키, 비밀 액세스 키 저장 + 아래 내용 실행

더보기

- 터미널 준비하기 - 
mkdir deploy                                        # deploy라는 폴더 만들기
cp app.py deploy/application.py          # app.py를 deploy 폴더에 application.py로 저장
cp -r templates deploy/templates        # templates 폴더를 통째로 복사
pip freeze > deploy/requirements.txt   # requirements.txt에 지금까지 저장한 라이브러리 저장
cd deploy                                             # deply폴더에 들어가기

- appication.py 세팅하기 - 
application = app = Flask(__name__)   # appication.py에 들어가서 2번째 줄 app = Flask(__name__)를 옆과 교환
app.run()                                                # 맨 밑줄 app.run('0.0.0.0', port=5000, debug=True)를 옆과 교환

- 패키지 설치하기 - 
pip install awsebcli                                 # 설치

- 보안 자격증명 - 
eb init

Seoul 숫자 찾아 엔터

액세스 코드, 시크릿 액세스 코드 입력 엔터

Enter Application Name 뜨면 그냥 엔터

It appears you are using Python. Is this correct? 뜨면 y 엔터

다음 것도 그냥 엔터

y 엔터

create a new keypair 찾아 엔터

다음것들 전부 그냥 엔터
- 초기 설정 - 
eb create myweb -- 오래걸림

완료후 aws -> elastic beanstalk -> 애플리케이션

- 코드 수정 & 업데이트 - 
eb deploy myweb

저작자표시