220221 웹개발종합반 - 5주차

5주차 1회독 회고

오늘 수업이 제일 재밌었당 ㅎ.ㅎ
얼른 2회독 빠르게 돌리자!
siro-haku.shop

---

오늘 수업에서 설치한 것

Filezilla

---

버킷리스트

프로젝트 세팅

1. flask 폴더 구조 만들기
   : static, templates 폴더, app.py 만들기
2. 패키지 설치하기
   : flask, pymongo, dnspython

버킷리스트 - 뼈대 준비

1. app.py, index.html 준비
2. mongoDB Atlas 창 띄어놓기

POST (기록하기)

API 만들고 사용하기 - 버킷리스트 기록 API (Create -> POST)
1. 요청정보 : URL=/bucket, 요청 방식 = POST
2. 클라이언트(ajax) -> 서버(flask) : bucket
3. 서버(flask) -> 클라이언트(ajax) : 기록 완료되었다는 메세지 전송

• 버킷리스트 업데이트를 위해 서버에서 번호를 만들어 함께 넣어주어야 함

1. 클라이언트와 서버 연결 확인

2. 서버 만들기 : bucket 정보를 받아서 저장 + 버킷 번호, 완료여부를 함께 넣어주어야 함

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

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

    doc = {
        'num':num,
        'bucket': bucket_receive,
        'done':0
    }

    db.bucket.insert_one(doc)
    return jsonify({'msg':'등록 완료!'})

3. 클라이언트 만들기 : bucket 정보를 보내주면 됨

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() #새로고침
        }
    });
}

4. 완성 확인하기 : DB에 num, bucket, done 잘 들어갔는지 확인

---

GET연습 (보여주기)

API 만들고 사용하기 - 버킷리스트 조회 API (Read→ GET)
1. 요청 정보 : URL= /bucket, 요청 방식 = GET
2. 클라이언트(ajax) → 서버(flask) : X
3. 서버(flask) → 클라이언트(ajax) : 전체 버킷리스트를 보여주기

1. 클라이언트와 서버 연결 확인
2. 서버 만들기 : 받을 것 없이 buckets에 주문정보를 담아서 내려주면 끝
3. 클라이언트 만들기 : 응답을 잘 받아서 for문으로 붙여주면 끝
4. 완성 확인하기 : 버킷리스트가 잘 붙었는지 확인

POST (완료하기)

API 만들고 사용하기 - 버킷리스트 완료 API (Update→ POST)
1. 요청 정보 : URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : num (버킷 넘버)
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

1. 클라이언트와 서버 연결 확인
2. 서버 만들기 : 버킷 번호를 받아서, 업데이트
   (주의 : num_receive는 문자열로 들어오기 때문에, 숫자로 바꿔줘야 함!)
3. 클라이언트 만들기 : 버킷 넘버를 보여주면 된다.
   (버킷 넘버는 HTML이 만들어질 때 적히게 된다)
4. 완성 확인하기 : 버킷리스트 항목에 취소선 그어졌는지 확인

---

내 프로젝트를 서버에 올리기

• 웹서비스 런칭에 필요한 개념
  : 웹서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줄 건데, 언제나 요청에 응답하려면 1. 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야 하며 2. 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹서비스에 접근할 수 있도록 해야함
  : 서버 = 컴퓨터, 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있음
  : AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용

---

리눅스 명령어 몇 가지

mkdir : 내 위치 아래에 폴더를 하나 만든다.
sudo [실행 할 명령어] : 명령어를 관리자 권한으로 실행한다.
sudo su : 관리가 권한으로 들어간다.

---

서버 세팅하기

1. 서버 환경 통일하기
2. filezilla 이용하여 간단한 python 파일 올려보기
3. 파이썬 파일 실행해보기

python test.py

4. 서버 환경 세팅 (맥락만 이해하기)
   1) 파이썬 (python3 -> python)
   : python3 명령어를 python으로 사용할 수 있게 하는 명령어
   2) pip (pip3 -> pip)
   : pip3 설치

   sudo apt-get update
   sudo apt-get install -y python3-pip

   : pip3명령어를 pip으로 사용할 수 있게 하는 명령어

   sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

   3) 포트포워딩 (80포트 -> 5000포트)
   : 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어

   sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

---

flask 서버 실행

1. 팬명록 완성본을 filezilla로 EC2에 업로드
2. pip로 패키지 설치

pip install flask

pip install flask

3. 다시 flask 서버 실행
   python app.py 명령어 사용하여 flask 서버 실행 > 서버 실행이 되면, 크롬에서 접속 (http://[내 EC2 IP]:5000/)
4. AWS 에서 5000포트 열어주기
   : 80포트 = HTTP 접속을 위한 기본 포트/ 5000포트 = flask 기본 포트
5. 포트포워딩 사용하여 포트번호 없애기 > 재접속(http://내아이피)

---

nohup 설정

• SSH 접속을 끊어도 서버가 계속 돌게 하기

nohup python app.py &

• 서버 종료하기 - 강제 종료

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

• SSH 접속을 종료한 뒤, 브라우저에서 접속하기 (http://내AWS아이피/)

---

og 태그

• og 태그 만들기

  static 폴더 아래에 이미지 파일을 넣고, 프로젝트 HTML의 ~ 사이에 코드를 작성

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

• 이미지 변경 후, 이전 ogimage가 그대로 나올 경우

  카카오톡에서 처음 것을 한동안 저장해놓기 때문

카카오톡 og 태그 초기화 : https://developers.kakao.com/tool/clear/og