항해99

[항해99] TIL 웹개발 종합반 5주차 D-38

crab. 2022. 6. 3. 19:15

[수업 목표]

Flask 프레임워크를 활용해서 API를 만들 수 있다.
'버킷리스트'를 완성한다.
EC2에 내 프로젝트를 올리고, 자랑한다!

느낀점

드디어 웹개발 종합반을 끝냈다.

뭔가 후련하면서도 재미도 있고 살짝 아쉽기도 하지만 무언가를 만들어보고 싶기도하고 복잡한 기분이다.

강의의 구성체계가 참 좋았던 것 같다.

강의 자체가 다시 복습하면서도 많은 것을 얻을 수 있게 만들어진것같지만 다른 무언가를 만들면서 복습하는 것도 재밌다.

뭘하든 성장에 도움이 많이 될 것 같다.

일단 아무튼 좋은 강의를 잘 마무리 한 것 같아 기분이 좋다.

01. 5주차 오늘 배울 것 & 설치

파일을 주고받기 위해 파일질라를 설치한다.

[<https://filezilla-project.org/download.php>](<https://filezilla-project.org/download.php>)

설치시 추가 확장프로그램은 선택이므로 받기 싫으면 안 받아도된다.
도메인 구매를 위해 가비아에 회원가입을 한다.

[<https://www.gabia.com>](<https://www.gabia.com/>)

로그인 메인페이지에서 원하는 도메인을 검색해서 할인하고 있는 500 도메인을 구입한다.
1000이하이므로 무통장 거래를 해야한다.

02. [버킷리스트] - 프로젝트 세팅

완성작을 미리 봐보자. "버킷리스트"
이제는 익숙한 폴더,파일 만들기
- static, templates, app.py, index.html
패키지 설치하기
- 3개 : flask, pymongo, dnspython

03. [버킷리스트] - 뼈대 준비하기

준비된 뼈대를 복사, 붙여넣기 해준다.
- app.py
- index.html
- atlas 준비

04. [버킷리스트] - POST연습(기록하기)

먼저 POST를 연습해보자.

1. 요청 정보 :  URL= /bucket, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : bucket
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)

**단! 서버에서 한 가지 일을 더 해야합니다.**
→ 번호를 만들어 함께 넣어주는 것. 그래야 업데이트가 가능하겠죠!

해왔던 대로 서버에서는 @app.route("/bucket", methods=["POST"]) 한 후 함수를 만들어 return jsonify({'msg': 'POST(기록) 연결 완료!'}) 한다.
- 맨 위에는 3줄 붙인다.
- from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.6bd2d.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta
클라이언트에는 ajax요청을 함수에 기입하고 그 함수를 onclick이벤트로 원하는 버튼에 속성으로 넣어준다.
완성되면 기록하기를 눌렀을때 atlas에 정상적으로 데이터가 저장된다.

05. [버킷리스트] - GET연습(보여주기)

GET을 통해 웹에 DB정보를 뿌려줄 것이다.

1. 요청 정보 :  URL= /bucket, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기

서버에서는 DB에서 주문정보를 받아 bucket_list에 저장한다.
return으로 반환한다.
클라이언트에서는 ‘buckets’를 rows에 넣어주고
for 문으로 rows 배열을 돌며 bucket과 num, done을 받아
temp_html에 넣어주되 done이 0일때와 아닐때를 가려 넣어준다.

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)

06. [버킷리스트] - POST연습(완료하기)

API 만들고 사용하기 - 버킷리스트 완료 API (Update→ POST)

1. 요청 정보 :  URL= /bucket/done, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : num (버킷 넘버)
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

하던대로 서버에서는 bucket_done이라는 함수를 만들어서 num_receive라는 변수에 request.from으로 받는다.
이때 num_receive는 문자열로 들어오니까 숫자로 바꾸는게 중요합니다.

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

클라이언트에서는 버킷넘버를 보여주면 된다.
우리가 웹에서 기록해 html이 새로 만들어질때 적히게 되므로 우리가 만든 곳에 done_bucket을 onclick이벤트로 넣어야 한다.

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

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

내 프로젝트를 전세계 누구나 24시간 언제나 확인 할 수 있으려면
- 컴퓨터가 항상켜져있고 프로그램이 실행되어 있어야 하고
- 모두가 접근할 수 있게 공개 IP주소로 접근할 수 있도록해야한다.
하지만 현실적으로 위의 2가지 조건을 충족하기에는 어려움이 있다.
그래서 AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용한다.

08. AWS 서버 구매하기

OS로 리눅스의 ubuntu를 설치한다.
- 오픈소스로 발전되는 무료 os이다.
ubuntu 20.04버전 구매
1년후 결제가 되기 전에
- 대상 인스턴스에 마우스 우클릭 > '인스턴스 상태' 를 클릭합니다.
- 중지 또는 종료 중 하나를 클릭하면 명령을 실행합니다.

Window: ssh가 없으므로, git bash라는 프로그램을 이용!
- gitbash를 실행하고, 아래를 입력!예) 아래와 비슷한 생김새!
- ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20
- ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
- Key fingerprint 관련 메시지가 나올 경우 Yes를 입력해주세요!
- git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊어주세요.

09. 서버 세팅하기

git bash에서 아래의 명령어들을 통해 EC2를 사용하기 편하게 할 필요가 있다.

# 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
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

파일질라를 이용해 우리가 만든 프로그램들을 aws의 컴퓨터에 넣어준다.
이동시킨 파일을 실행할때는

python [test.py](<http://test1.py>)

위에서 git bash로 한 명령어들은 다음과 같은 의미가 있다.
1. 파이썬 (python3 → python)
  1. python3 명령어를 python으로 사용할 수 있게 하는 명령어
2. pip (pip3 → pip)
  1. 1. pip3 설치
  1. 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포트)
  1. 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
```
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
```

10. Flask 서버를 실행해보기

팬명록을 파일질라를 통해 EC2에 업로드 해보자.
- 파일질라에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드합니다.
```
python app.py
```
이후 팬명록에 필요한 패키지들을 설치해줍니다.
우리가 file → setting → .. 에서 + 버튼 누르고 설치했던 작업을, 명령어로 하면 이렇게 된답니다! 🤓 pip install flask pip install pymongo dnspython python app.py
AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 합니다.
EC2 관리 콘솔로 들어갑니다. 그리고 보안그룹(영문: Security Group)을 눌러 들어갑니다. 여기선 launch-wizard-1 이라고 쓰여 있네요
두 가지 포트를 추가해봅니다. Anywhere-IPv4 를 클릭해주세요!

→ 80포트: HTTP 접속을 위한 기본포트

→ 5000포트: flask 기본포트

지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.

11. nohup 설정하기

git bash가 종료되면 서버가 돌아가지 않는다.

# 아래의 명령어로 실행하면 된다
nohup python app.py &

서버를 종료하려면 아래코드를 git bash에 친다.

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

12. 도메인 연결하기

도메인 구입/연결
가비아 접속 후 설정(호스트 이름에 @, IP주소에 IP주소를 입력합니다)

13. og 태그

우리가 만든 index.html 의 meta태그 다음에 og태그를 삽입한다.

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

공유했을때 나올 내용들을 위의 코드의 content에 넣어주면 된다.
만약 og태그를 공유하고 나중에 수정하고 싶다면 먼저 카카오톡에서 저장되어있는 og태그를 초기화 해야한다.
- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

14. 5주차 끝 & 숙제 설명

나의 웹 서비스를 제출하자

http://banana-pjs.shop/

cheeze 팬명록

응원 한마디 남기고 가세요!

banana-pjs.shop

저작자표시

'항해99' 카테고리의 다른 글

[항해99] TIL 사전과제 스터디 D-36 (0)	2022.06.05
[항해99] TIL 사전과제 스터디 D-37 (0)	2022.06.04
[항해99] TIL 웹개발 종합반 4주차 D-39 (0)	2022.06.02
[항해99] TIL 웹개발 종합반 3주차 D-40 (0)	2022.06.02
[항해99] TIL 웹개발 종합반 2주차 D-41 (0)	2022.05.31

현재글[항해99] TIL 웹개발 종합반 5주차 D-38

https://github.com/junsu1220 https://www.youtube.com /channel/UCOIdrpxWVw0t-5CPdaqaCsw

Today :
Yesterday :

crabLab

[항해99] TIL 웹개발 종합반 5주차 D-38

[수업 목표]

느낀점

01. 5주차 오늘 배울 것 & 설치

02. [버킷리스트] - 프로젝트 세팅

03. [버킷리스트] - 뼈대 준비하기

04. [버킷리스트] - POST연습(기록하기)

05. [버킷리스트] - GET연습(보여주기)

06. [버킷리스트] - POST연습(완료하기)

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

08. AWS 서버 구매하기

09. 서버 세팅하기

10. Flask 서버를 실행해보기

11. nohup 설정하기

12. 도메인 연결하기

13. og 태그

14. 5주차 끝 & 숙제 설명

'항해99' 카테고리의 다른 글

'항해99'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[항해99] TIL 웹개발 종합반 5주차 D-38

[수업 목표]

느낀점

01. 5주차 오늘 배울 것 & 설치

02. [버킷리스트] - 프로젝트 세팅

03. [버킷리스트] - 뼈대 준비하기

04. [버킷리스트] - POST연습(기록하기)

05. [버킷리스트] - GET연습(보여주기)

06. [버킷리스트] - POST연습(완료하기)

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

08. AWS 서버 구매하기

09. 서버 세팅하기

10. Flask 서버를 실행해보기

11. nohup 설정하기

12. 도메인 연결하기

13. og 태그

14. 5주차 끝 & 숙제 설명

'항해99' 카테고리의 다른 글

'항해99'의 다른글

관련글

티스토리툴바