항해 사전 준비기간 5주차 강의 정리

https://velog.io/@rlafbf222
<항해 99 사전 준비 기간>
웹 개발 종합반 개념 정리
5주차!!

• 1~3강. 개괄
  1) 파일질라 설치, 가비아 도메인 구입
  2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py)
  3) 패키지 설치 (flask, pymongo, dnspython)

• 4강. 버킷리스트 – POST 연습 (기록하기)

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

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

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

• 5강. 버킷리스트 – GET 연습 (보여주기)

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

    return jsonify({'buckets': bucket_list})

function show_bucket() {
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            let rows = response["buckets"]
            console.log(rows)
            for (let i = 0; i < rows.length; i ++){
                let num = rows[i]['num']
                let bucket = rows[i]['bucket']
                let done = rows[i]['done']
                let temp_html = ``
                if (done == 0){
                    temp_html = `<li>
                                    <h2>✅ ${bucket}</h2>
                                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                </li>`
                }else{
                    temp_html = `<li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                </li>`
                }
                $('#bucket-list').append(temp_html)
            }

        }
    });
}

• 6강. 버킷리스트 - POST연습 (완료하기)
  1) 주의할 점: ajax에서 넘어온 num_receive 값은 문자열로 넘어온다. 따라서 int 타입으로 형변환 해줘야 한다!!

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

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

• 7~8강. 내 프로젝트를 서버에 올리기
  1) 언제나 요청에 응답하려면,
  2) 컴퓨터가 항상 켜져 있고 프로그램이 실행되어 있어야 하고,
  3) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.
  4) 즉, 서버 = 컴퓨터 라고 생각하면 편하다.
  5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납
  6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기
  7) Git bash 키고 아래 명령어 입력
  8) ssh -I /c/users/Jun_Kim/Desktop/hjkim_mykey.pem [email protected]
  9) ubuntu 뒤의 IP는 구입한 인스턴스의 IPv4 주소
  10) 엔터 후 yes 입력하면 우리가 구매한 컴퓨터에 원격 접속한 상태가 된다.
  11) mkdir 은 폴더 생성
  12) ls 는 현재 위치에서 볼 수 있는 폴더들의 리스트업 출력
  13) cd 는 해당 위치로 이동 (단, ‘..’을 붙이면 밖으로 나가기)

• 9강. 서버 세팅하기
  1) EC2 한방에 세팅하기 명령어를 차례대로 입력해준다.
  2) file zilla를 이용해서 내가 만든 서버와 연동하고 (프로토콜은 sftp 로그온은 key file에 pem 파일넣어준다. User는 ubuntu
  3) 연결 시 내가 만든 서버가 오른쪽에 뜬다.
  4) 이 후 드래그해서 간단히 넣어주면 끝!
  5) test.py 넣어주고 해당 폴더로 이동하여 python test.py 입력 시 hello sparta!! 출력 확인

• 10강. Flask 서버를 실행해보기
  1) 파일질라에서 homework 폴더에 있는 app.py, templates, static 옮기기
  2) Git bash에서 pip install flask, pymongo, dnspython, certifi 설치하기
  3) 주소는 3.37.129.56:5000
  4) 하지만 아직 포트 개방을 안해줘서 접속 불가
  5) AWS 인스턴스에서 아래 인바운드 보안 규칙 편집 후 2개 추가 생성
  6) 하나는 5000포트 허용 하나는 80(디폴트) 포트 허용
  7) 우리는 포트포워딩 명령을 내렸기 때문에 포트번호를 떼고 주소를 입력해도 80으로 들어와서 다시 5000으로 진입한다. 따라서 포트번호를 떼도 접속 가능하다!

• 11강. Nohup 설정하기
  1) 현재 git bash를 종료하면(SSH 접속을 끊으면) 서버도 같이 종료됨
  2) 이를 방지하기 위해 SSH 접속이 끊어져도 서버가 돌아가는 명령어 추가!!
  3) nohup python app.py &
  4) 그러나 이제 끄는 방법을 모름!!! 강제 종료 명령어
  5) ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
  6) 정리하자면 파이참 IDE에서 작업을 완료하고 -> 이를 파일질라를 통해 static, templates, app.py를 옮겨 두고 이를 git bash에서 nohup으로 키면 된다!!
  7) 그러다가 수정 사항이 생긴다면 수정 사항 고친 후 다시 파일질라에 삭제 후 넣어줘서 재 실행하면 된다.

• 12강. 도메인 연결하기
  1) 가비아에 접속하기
  2) 내가 구매한 도메인의 DNS 설정
  3) 호스트는 @
  4) 값/위치에 인스턴스 IPv4 주소 숫자값만 입력하고 확인 저장
  5) 완료! 해당 도메인 사용 가능

• 13강. Og 태그

1)	카톡 같은 곳에 공유할 때 뜨는 이미지 제목 설명 등등
2)	<meta property="og:title" content="내 사이트의 제목" />
3)	<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
4)	<meta property="og:image" content="이미지URL" />
5)	위 코드를 head에 넣어주기!

• 14강. 숙제: 내가 배포한 url 제출하기!
  URL: http://hjkim-sparta.shop/