스파르타 코딩 클럽 5주차 (실제 서버에 올려보기)

가비아에서 도메인 구매하기. (shop주소는 1년에 500원)

 

파일질라 설치하기

 

 

버킷리스트(To Do List)

 

1. 클라이언트 단에서 데이터를 입력하기

2. 서버로 데이터 보내기

3. 완료 버튼을 누르면 해당 버튼이 몇번째가 눌렸는지 체크해서 지우기.

 

<10분간 헤매고 다시 영상 본 것>

let bucket = $('#bucket').val()

ajax를 이용해서 서버로 보내려하는데, 보낼 값을 설정도 안하고 (let bucket) 왜 bucket이 있는데

서버로 데이터가 안 넘어가는지 고민하고 있었음.

 

함수가 동작할 때 POST방식이라면 (생성, 변경, 삭제) 중 하나로 보여줘야 하는데 DB에 들어갈 값을 만들지도 않고

보내라고 했던 것

 

주의사항 : POST타입의 Ajax라면 let ~ val()을 했는지 꼭 확인할 것

 

<서버쪽 코드>

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    bucket_list = list(db.bucket.find({}, {'_id': False}))
    #파이썬 리스트 개수 세기 (Google 검색) / len(XXX) 이용
    count = len(bucket_list) + 1
    #3가지 저장 필요(번호, 메시지, DONE)
    doc = {
        'num': count,
        'bucket' : bucket_receive,
        'done': 0
    }
    db.bucket.insert_one(doc)

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

<클라이언트 쪽 코드>

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

 

<바보짓 2번째 : 변수 설정 실수>

let lows = 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 lows??? rows로 변수를 잡았어야 했는데 잘못 잡아서 이후의 문장들이 동작을 안한것.

주의사항 : 변수를 설정할 때는 진짜 잘 설정하자

 

★버킷리스트 DONE 체크하기

Point : 특정한 Num을 줘야지만 해당 넘버에 대한 버킷을 지운다.

num_receive = request.form['num_give']

db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})

 

★주의사항 : 클라이언트에서 받아온 정보는 문자로 받기 때문에 이것을 숫자화 해야한다. int() 등 이용.

 

Done이 동작하려면, 한줄이 만들어질 때마다 Done과 Num이 함께 들어와야 한다.

 

 

내 프로젝트가 서버에 올라가려면 필요한 조건?

 

1. 컴퓨터가 항상 켜져있어야 한다. (서버)

2. 모두가 접근 가능한 IP주소를 만들어야 한다.

 

현재 : 클라우드 환경에 올려둔다. (AWS라는 시스템) 컴퓨터를 빌려써서 돌려둔다고 생각함.

 

장점 : 트래픽 대응이 쉬워지고, 서비스를 붙이기도 쉬워진다.

 

 

리눅스 OS를 쓰는 컴퓨터.

 

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

 

AWS에서 서버 키고 시작하기.

 

1. 인스턴스 시작

2. 우분트 20.4 시작 (프리티어 사용가능 체크)

3. 새키페어 생성

4. 인스턴스 시작 (전원버튼 켠것) 

 4-1) 중지 : 컴퓨터를 끄고 집에 간것

 4-2) 종료 : 컴퓨터를 반납하고 더이상 안 쓰는 것

5. 접속하는 방법. Git bash 켜기 / 맥은 터미널 켜기.

1. ssh -i  <키페어> ubuntu@ <인스턴스 IPv4주소> 

2. yes 

 

빈 컴퓨터 세팅 완료.

 

 

서버 세팅하기

 

# python3 -> python (명령어를 바꾼다)
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# 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

# port forwarding (localhost 5000을 떼는 명령어)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

 

 

파일질라 켜기 > 파이참 켜기.

 

왼쪽는 내 컴퓨터, 오른쪽은 서버컴퓨터임

파일질라에서 위의 동그라미 클릭

프로토콜 : FTP > SFTP

호스트 : AWS IPv4 주소 복사

포트 : 22

로그온 유형 : 키 파일

사용자 : ubuntu

키파일 : PEM타입으로 저장

서버 개발용 Git Bash 코드.txt

0.00MB

팬명록 업로드 해보기

app.py / templates / static 폴더 올리기.

 

 

Git bash

 

pip install flask

pip install pymongo

pip install dnspython

 

(원래 서버올릴 때 설치해야하는 flask들)

 

5000번 포트 열어주기.

AWS 인스턴스 > 보안 > 보안그룹 > 포트 5000, 80 / anywhere IPv4 

 

문제 : Bash창이 꺼져도 돌아가게 만들어야 함. (Ctrl + C하면 꺼짐)

 

nohup python app.py & (Bash 없이 돌아가게 하는것)

 

#강제종료 키워드

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

 

 

서버에다가 도메인 (주소) 입히기

 

가비아 접속 - DNS설정 - 레코드 추가 - 호스트 @ - IP주소 입력 - 확인 - 저장 

 

 

OG태그 넣기 (카톡방이나 페북에 공유할 때 뜨게 만드는 이미지, 제목, 설명)

 

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

 

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