[스파르타코딩클럽] 웹개발 종합반 5주차 정리

👉 5주차 수업목표  

1. '버킷리스트'를 완성한다.

2. EC2에 내 프로젝트를 올린다. (배포)

▲ 현재 우리가 개발하고 있는 로컬환경(클라이언트 = 서버)

▲ 배포 후. 어디서든 클라이언트가 내 서버에 접속할 수 있다. 전 세계인이 내 사이트를 볼 수 있다.

👉 5주차 설치

1. Filezilla 설치하기 (내 작업물을 클라우드에 올리기위해 파일을 보낼수 있는 프로그램)

2. 가비아 가입하기 & 도메인 구입하기 

 

👉 버킷리스트 사이트 만들기

- 버킷리스트 목록을 기록하고, 완료 버튼을 누르면 취소선이 그어지도록 만들어 보자!

- 힌트 : 취소선이 그어지도록 만든다는 것은? 넘버링이 되어야 한다는 뜻! 어떤 목록을 취소선 그을지 알아야 하니까!

패키지 설치하기 3개 : flask, pymongo, dnspython (기본으로 3개 설치하고, 크롤링 할거면 request, bs4추가)

1. 서버 만들기 (순서대로 작성)

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient  #⭐디비 저장위해 3줄추가
client = MongoClient('mongodb+srv://test:sparta@cluster0.ryuvr6l.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

@app.route('/')
def home():
    return render_template('index.html')

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

    bucket_list = list(db.bucket.find({}, {'_id': False})) #⭐카운트를 위해 디비에서 데이터 한번 받아와야 해. 거기에 1을 더하면 현재 num이 되도록.
    count = len(bucket_list) + 1  #⭐완료행위(done)를 해줘야하니까 어떤걸 완료할지 지칭할 번호가 필요해! len()함수로 리스트의 개수를 받아오자.

    doc = {
        'num': count, 
        'bucket': bucket_receive,
        'done': 0  #⭐완료 안했으면 0, 했으면 1로 설정할건데, 초기설정이니까 0으로 두자.
    }
    db.bucket.insert_one(doc)

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

▶ 3번 ◀
@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}}) #⭐디비에서 이 number를 가진 버킷리스트를 찾아서 done값을 1로 수정해줘!
    #⭐클라이언트에서 넘어오는 숫자는 다 문자로 받기때문에 int( )로 형변환 필요!
    return jsonify({'msg': '버킷 완료!'})

▶ 5번 ◀
@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({},{'_id':False}))
    return jsonify({'buckets': bucket_list})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

2. 클라이언트 만들기

</style>
.mybox > li > h2.done {
        text-decoration: line-through
    }
</style>

<script>
    $(document).ready(function () { //⭐항상 show_bucket을 실행해 버킷리스트가 보이도록 한다.
        show_bucket();
    });
▶ 6번 ◀
    function show_bucket() { //⭐GET요청으로 서버에서 클라이언트로 받아온 데이터를 보기좋게 만든 후 위치 지정 후 배치. 
        $.ajax({
            type: "GET",
            url: "/bucket",
            data: {},
            success: function (response) {
                let rows = response['buckets']
                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){ //⭐done이 0이면 완료버튼이 보이게 하고, 1이면 안보이게 하기.
                        temp_html = `<li>
                                        <h2>✅ ${bucket}</h2>
                                        <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button> //⭐onclick에 들어간 함수에서 숫자 num을 매개변수로 받는구나!
                                    </li>`
                    }else{
                        temp_html = `<li>
                                        <h2 class="done">✅ ${bucket}</h2>
                                    </li>`
                    }
                    $('#bucket-list').append(temp_html)
                }
            }
        });
    }
▶ 2번 ◀
    function save_bucket() {  //⭐POST요청. 버킷목록을 받아와서 서버에 넘긴다.
        let bucket = $('#bucket').val()
        $.ajax({
            type: "POST",
            url: "/bucket",
            data: {bucket_give: bucket},
            success: function (response) {
                alert(response["msg"])
                window.location.reload()
            }
        });
    }
    
▶ 4번 ◀
    function done_bucket(num) { //⭐list로 bucket을 받을때부터 num을 받아와서 그걸 매개변수로 이용한다. 덕분에 위 함수처럼 따로 변수 지정 안해도 되겠구나! 그 num을 num_give로 서버에 넘긴다. 
        $.ajax({
            type: "POST",
            url: "/bucket/done",
            data: {'num_give': num},
            success: function (response) {
                alert(response["msg"])
                window.location.reload()
            }
        });
    }
</script>

3. 코드 이동 보기

1) 버킷리스트 DB에 저장하기 (POST)

2) 완료버튼 만들기 (POST)

3) DB에 저장된것 꺼내서 보여주기 (GET)

👉 버킷리스트 사이트에 취소버튼 추가

1. 서버 만들기

@app.route("/bucket/back", methods=["POST"])  
def bucket_back():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 0}}) #숫자는 0으로 변경해주고

    return jsonify({'msg': '취소 완료!'}) #메세지 취소 완료로 변경

2. 클라이언트 만들기

$.ajax({
    type: "GET",
    url: "/bucket",
    data: {},
    success: function (response) {
        let rows = 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 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>
                        <button onclick="back_bucket(${num})" type="button" class="btn btn-outline-primary" style="border-color: red; color: red">취소</button>
                            </li>`
            } //위에 취소버튼 한줄만 추가.함수명 back_bucket으로 바꿔주고, 취소버튼태그안에 style로 color변경해주기.
            $('#bucket-list').append(temp_html)
        }
    }
});


function back_bucket(num) { //취소하는 back_bucket함수 추가
    $.ajax({
        type: "POST",
        url: "/bucket/back",  //url은 내가 그냥 새로 만들어 주기. /bucket/back으로 만들자.
        data: {'num_give': num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

3. 코드 이동 보기

👉 내 프로젝트를 서버에 올리기 - EC2 서버 구매하기

웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜야 한다.

언제나 요청에 응답하려면,

1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,

2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.

서버는 그냥 컴퓨터이기 때문에, 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수 있다.

AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용해 보자.

 

클릭 만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위한 운영체제(OS)를 설치해보자. OS로 리눅스의 Ubuntu를 설치하자. 대부분의 회사에서 컴퓨터를 빌려쓸때는 리눅스가 깔린 컴퓨터를 빌려쓴다.

Ubuntu Server 18.04 또는 20.04 버전을 구매하기.

인스턴스 상태가 '실행 중' 으로 바뀌면 서버 컴퓨터가 켜졌다는 뜻이다. '인스턴스 중지'는 컴퓨터off, '인스턴스 종료'는 컴퓨터 반납.

 

 

 

👉 내 프로젝트를 서버에 올리기 - EC2 서버 접속하기

1. git bash 로 서버 컴퓨터에 접속하기

SSH(Secure Shell Protocol) : 다른 컴퓨터에 접속할 때 쓰는 프로그램. 다른 것들 보다 보안이 상대적으로 뛰어나며, 접속할 컴퓨터가 22번 포트가 열려있어야 접속 가능하다. AWS EC2의 경우, 이미 22번 포트가 열려있다.

윈도우컴퓨터에는 ssh가 없으므로, git bash라는 프로그램을 이용해야 한다.  gitbash를 실행하고, 아래를 입력!

ssh -i [받은키페어] ubuntu@[AWS에적힌내아이피]
(ex. ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20)

Key fingerprint 관련 메시지가 나올 경우 Yes를 입력/ git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊기.

위에 1줄 입력하면, 내가 산 리눅스 컴퓨터에 원격 접속을 한 것!

[가장 많이 쓰는 리눅스 명령어]
리눅스는 윈도우 같지 않아서, 마우스로 조작 할 수 없다. 무조건 '쉘 명령어'를 통해 OS를 조작한다. 
TIP) 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나온다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
ls: 내 위치의 모든 파일을 보여준다.
cd .. : 나를 상위 폴더로 이동시킨다. 
pwd: 내 위치(폴더의 경로)를 알려준다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

2. git bash로 서버 컴퓨터 세팅하기

지금 현재 새 컴퓨터를 구매한 상태이므로 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해주기.

[세팅 해야 할 목록]
#1.  python3 -> python (python3 명령어를 python으로 사용할 수 있게 하는 명령어)
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

#2.  pip3 -> pip 
sudo apt-get update (pip3 설치)
sudo apt-get install -y python3-pip (pip3 설치)
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1 (pip3 명령어를 pip으로 사용하게 하는 명령어)

#3.  port forwarding (포트포워딩- 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

위에 5줄 쭉 입력하고 세팅 하기

3. filezilla로 python파일 올리기

파일질라로 서버 컴퓨터 위와 같이 열어주기

왼쪽이 내 컴퓨터 / 오른쪽이 방금 산 컴퓨터

이렇게 서버 컴퓨터를 열어주고, 내가 만든 폴더(sparta)클릭 후, 왼쪽에서 실행할 파일(test.py)를 오른쪽으로 끌어다 놓으면 업로드 끝!

우측에서 원하는 폴더(sparta)클릭 후, 왼쪽의 원하는 파일(test.py) 끌어다 놓기

4. gitbash로 python파일 실행하기

- 해당폴더안에 진입한 후, python [폴더이름] 입력하면, hello sparta!!! 가 정상적으로 실행 된다.

 

👉 Flask 서버를 실행해보기

1. 팬명록 완성본을 EC2에 업로드하기

homework 폴더안의 static, templates폴더, app.py파일을 EC2인스턴스의  sparta폴더에 드래그 앤 드롭 한다. 

 

2. gitbash에서 명령어로 pip패키지 설치하기

파이참에서 file → setting → .. 에서 + 버튼 누르고 설치했던 작업을, 명령어로 하면 이렇게 된다.

[패키지 설치 명령어]
pip install flask
pip install pymongo
pip install dnspython

3. AWS에서 5000포트를 열어주기

EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도, AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있기 때문에 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다.

EC2 관리 콘솔  → 보안 탭 → 보안그룹의 링크 클릭 → 인바운드 규칙 편집 →

두 가지 포트를 추가(5000포트: flask 기본포트 / 80포트: HTTP 접속을 위한 기본포트) - Anywhere-IPv4 로 규칙저장!

지금은 5000포트에서 웹 서비스가 실행되고 있어서 매번 :5000 이라고 뒤에 붙여줘야 하는데..이 번호를 없애려면?

80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩 (port forwarding) 을 사용하자!

리눅스에서 기본제공해주는 포트포워딩!

4. 사이트 접속해보기

주소창에 http://내아이피 입력하면 잘 작동된다. 모바일화면에서도 작동 된다.

 

👉 nohup 설정하기

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

Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않는다.

그러나 원격접속을 끊어도, 서버는 계속 동작해야하니까 아래와 같이 nohup을 설정하자. ctrl + c로 서버를 종료한 후, 아래의 명령어 입력

nohup python app.py &

이렇게 되면, git bash를 꺼도 서버가 잘 돌고 웹사이트가 정상 작동 한다.

2. 서버 강제종료하기 

생각해보니 마저 작업을 못했을때. 서버 끄고 ,서버에 드래그드롭한 파일 삭제하고, 작업완료한 파일 다시 올리고..!

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

이렇게 되면, 서버가 꺼지며 웹사이트도 작동 하지 않는다.

 

👉 도메인 연결하기

도메인 구입/연결 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것. 한국의 '가비아'라는 회사에서 도메인을 구입해보자.

구입 완료 한 후,

DNS관리 - DNS설정 - 호스트 이름에 @, IP주소에 IP주소를 입력! 

네임서버에 내 도메인-IP가 매칭되는 시간인 10분정도가 지나면 도메인주소가 정상 작동한다.

웹사이트에 도메인 주소입력후 확인!

내가 산 도메인으로 웹사이트가 정상 작동 한다.

👉 og 태그 넣기

내가 만든 사이트를 카톡으로 공유했을때 예쁘게 나오도록 og 태그를 넣어보자.

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

- 이미 배포해서 서버가 돌아가고 있는데 수정하고(og태그 삽입) 다시 배포하는 법!

1. 다시 파이참에서 homework/index.html파일을 열고 og태그 붙여주기

2. 지금 돌아가고 있는 서버 끄기 ( gitbash에서 명령어 입력 --> ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill )

3. 파일질라 오른쪽 화면에서 내가 올린 파일들 삭제 

4. 수정한 파일 다시 드래그 앤 드롭 (따로 새로고침 안해도 됨)

5. 다시 서버 열어주기. ( gitbash에서 명령어 입력 --> nohup python app.py & )

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    //이렇게 head태그 안에 내가 썸네일로 보여주고 싶은 제목, 내용, 이미지를 넣자.
    <meta property="og:title" content="뉴진스(New Jeans) 팬명록" />
    <meta property="og:description" content="응원 한마디 남기고 가세요!" />
    <meta property="og:image" content="https://cdn.mhnse.com/news/photo/202208/129866_120842_1941.jpg" />

- 이미지를 바꿨는데 이전 ogimage가 그대로 나올때 해결법

페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문이다. 아래 링크 들어가서 초기화 눌러서 해결하자.

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

 

 

5주차의 강의를 듣는 동안 파이참에서 서버, 클라이언트 코드 만들고 AWS에서 서버도 빌리고, 도메인도 사서 배포까지 완료했다.

만들고 나니 정말 기능도 거의 없는 간단한 사이트였다. 이렇게 간단한 사이트를 만드는 것도 많은 지식이 필요한 것 같다. 큰 사이트를 만드는건 얼마나 더 공을 들이고 많은 지식이 필요할까 싶다. 앞으로도 열심히 공부해야겠다.

 

출처 : [스파르타코딩클럽] 웹개발 종합반 5주차