[5주차] 인터넷에서 서버 돌리기

※ 스파르타 코딩클럽의 웹개발 종합반(5주)을 공부하며 기억하고 싶은 특이점들만 기록, 정리해 놓은 노트이다.

---

Flask 기초 5탄 - 버킷리스트

POST (버킷 등록하기)

1. 요청 정보 : URL= /bucket, 요청 방식 = POST 2. 클라(ajax) → 서버(flask) : bucket 3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!) 단! 서버에서 한 가지 일을 더 해야한다: → 번호를 만들어 함께 넣어주는 것. 그래야 업데이트, 즉 ‘완료’ 표시가 가능하다.

역시나 필요한 패키지는 flask, pymongo, dnspython 셋.

서버(app.py)측

프론트에서 받은 bucket(내용)에 더해 :버킷 번호”와 “완료 여부”를 함께 데이터에 넣어줘야 한다.

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_received = request.form['bucket_give']
    bucket_num = len(list(db.bucket.find({})))
    doc = {
        'bucket': bucket_received,
        'bucket_number': bucket_num + 1,
        'done': 0,   # 완료시 1, 미완료시 0
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

프론트(index.html)측

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

id=bucket인 태그의 값을 가져오는 코드에서 $('bucket')같은 식으로 잘못 적으면 실행시 keyError: 'bucket_give' 에러가 나게 됨 주의.

GET (버킷 보여주기)

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

서버(app.py)측

@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {'_id':False}))
    return jsonify({'msg': 'GET 연결 완료!', 'bucket-list': bucket_list})

프론트(index.html)측

‘완료된’ 상태에 따라 다른 형식으로 temp_html을 작성해준다.

// GET
function show_bucket() {
    $('#bucket-list').empty();
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            alert(response["msg"])
            let bucket_list = response['bucket-list']
            for (let i = 0; i < bucket_list.length; i++) {
                let bucket = bucket_list[i]['bucket']
                let bucket_num = bucket_list[i]['bucket_number']
                let done = bucket_list[i]['done']
                let temp_html = ``
                if (done) {
                    // 완료된 버킷
                    temp_html = `<li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                </li>`
                } else {
                    temp_html = `<li>
                                    <h2>✅ ${bucket}</h2>
                                    <button onclick="done_bucket(${bucket_num})" type="button" class="btn btn-outline-primary">완료!</button>
                                </li>`
                }
                $('#bucket-list').append(temp_html)
            }
        }
    });
}

POST (버킷 완료하기) new!

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

같은 POST 요청인데 다른 행동을 짜려면 url을 /bucket/done이런 식으로 짜면 되는구나.

그리고 POST 요청으로 생성, 수정, 삭제를 모두 할 수 있는 이유는 이 셋이 프론트 쪽에서 데이터를 받아와야 하는 경우라서 그런 것 같다. 즉, 프론트에서 받아 넘겨줄 데이터가 있고 없고에 따라 data = {} 안에 데이터를 담아다주는 POST, 아무 데이터도 안 넘겨주는 GET으로 구분하는 듯.

서버(app.py)측

프론트에서 보낸 버킷 번호를 확인해서 DB의 해당하는 버킷을 업데이트 해주면 된다.

그런데 DB에 저장되어있는 bucket_number는 숫자형이고,

프론트에서 넘겨받는 값들은 무조건 문자열이 된다는 문제가 있다. 따라서 프론트에서 넘겨받은 값을 int()로 형변환 시켜줘야 한다는 걸 잊지 말자:

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    bucket_number = int(request.form['bucket_number'])
        # => 프론트로부터 받아온 데이터는 무조건 문자가 된다. 숫자로 수동으로 바꿔주어야 숫자로 들어간다.
    this_bucket = db.bucket.find_one({'bucket_number': bucket_number}) 
    db.bucket.update_one({'bucket_number': bucket_number}, {'$set': {'done':1}})
    return jsonify({'msg': this_bucket['bucket']+'를 완료하였습니다'})

int(request.form[’~~’])

db.bucket.update_one({찾는 키-값}, {’$set’ : {바꿀 키-값})

파이썬은 문자열 더할 때 그냥 +로 가능

프론트(index.html)측

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

미완료를 ‘완료(1)’로 바꿔 넣어주고 화면을 업데이트 하기만 하면 GET 함수가 알아서 그에 맞춰서 그려준다. 즉, 완료 표시가 된다!

AWS 서버 띄우기 1탄

일단 전체 그림은 다음과 같다:

AWS: 클라우드 서버 컴퓨터를 대여하는 데에

파일질라: 컴퓨터끼리 파일을 주고받는 데에

Git Bash연결: 가상 서버 컴퓨터를 작동(프로그램을 실행한다든지)시키는 데에

사용되는 걸로 역할이 크게 나뉜다.

필요한 프로그램은 AWS EC2 인스턴스(가상 컴퓨터) 하나, Git Bash, FileZilla 이렇게 세 가지.

0. 웹 서비스 런칭(배포)이란

: 내가 만든 프로젝트를 누구나, 언제든지 사용할 수 있게 세팅해놓는 것.

클라이언트의 요청에 24시간 응답할 수 있으려면 (컴퓨터가 항상 켜져 있어서)프로그램이 실행되고 있어야 하고, 공개 IP 주소로 내 웹 서비스에 접근 가능하도록 만들어야 한다.

클라우드 서비스를 이용하면 위의 조건을 쉽게 만족할 수 있다. 그래서 서버 관리의 대세는 클라우드!

‘AWS’ = 아마존이 서비스하는 웹 서비스

‘EC2’ = 아마존의 웹 서비스 중 클라우드 컴퓨팅 서비스. 사용권을 구입하면 AWS에서 항상 켜 놓은 컴퓨터 중 하나를 내 서버로 동작하게 할 수 있다.

1. AWS 서버 구매하기

요약: AWS의 EC2 콘솔페이지에 가서 “인스턴스 시작”하고 원하는 OS 설치해서 구매한다.

인스턴스 시작까지 자세한 순서

AWS 클라우드에서 실행되는 가상 머신을 “인스턴스”라고 하는 듯 하다. 서버용으로 만들거니까 리눅스(우분투) OS로 선택함.

1. AWS에 로그인

2. 검색창에 “EC2” 검색해서 EC2 콘솔페이지로 진입

3. 왼쪽 메뉴에서 “인스턴스” 클릭

4. “인스턴스 시작” 버튼 클릭

5. 인스턴스 시작 페이지에서:

   

   1) 이름 및 태그: ’sparta-web’등으로 임의 설정

   

   2) Ubuntu Server 20.04 혹은 22.04 (”프리 티어”인 것) 선택

   

   3) 인스턴스 유형: t2.micro 선택(”프리 티어”로서 가능한 선택지)

   

   4) 키 페어 이름만 설정하고 다운로드(’sparta_practice_key’등 임의로 설정)

   

   5) 오른쪽 창의 “인스턴스 시작” 클릭하면 인스턴스 생성됨

6. 인스턴스 목록에서 내 인스턴스들 확인 가능

💡

AWS 프리 티어:  첫 해에는 월별 프리 티어 AMI에 대한 t2.micro(또는 t2.micro를 사용할 수 없는 리전의 t3.micro) 인스턴스 사용량 750시간, EBS 스토리지 30GiB, IO 2백만 개, 스냅샷 1GB, 인터넷 대역폭 100GB가 포함됩니다.

인스턴스 목록에서

“인스턴스 상태: 실행중” = 서버 컴퓨터를 켠 상태

우클릭 → 인스턴스 “중지”: 컴퓨터를 끄기

우클릭 → 인스턴스 “종료”: 컴퓨터 반납

지금 서버 컴퓨터를 반납하고 다시 대여하고 싶으면: 인스턴스 “종료” 후 “인스턴스 시작”버튼 눌러서 처음부터 다시 선택하면 된다.

---

• 왜 인스턴스 ‘중지’(제일 위의 버튼)을 눌렀는데 컴퓨터가 반납되어버린건지…?(11월1일)

• 왜 Data transfer 용량이 벌써 0.9GB에 달했다고 하는 건지?

이해가 안되지만 일단 인스턴스를 중지시켜놨다.

2. 서버 컴퓨터에 접속하기

1. Gib Bash (설치해둔 거)실행

2. “ssh -i {아까 AWS에서 인스턴스 만들 때 받아둔 .pem파일 끌어다놓기(=복사)} ubuntu@{아까 만든 AWS 인스턴스 ‘퍼블릭 IPv4 주소’}” 입력하고 엔터

3. (Key fingerprint 관련 메세지가 뜨면) “yes” 입력하고 엔터

4. 접속 완료됨

5. 접속 끊을 땐 exit 명령어로 ssh 접속 먼저 끊기.

우분투 서버컴 접속한 상태:

SSH(Secure Shell Protocol)이란:

다른 컴퓨터에 접속할 때 쓰는 프로그램. 보안이 상대적으로 뛰어나다는 장점이 있다.

접속할 컴퓨터의 22번 포트가 열려있어야 접속 가능하다. AWS EC2의 경우, 이미 22번 포트가 열려있어서 바로 연결이 가능하다고(AWS의 EC2 인스턴스 목록 페이지 어딘가에서 확인 가능하다는데 나는 못 찾겠다).

위의 방법대로 실행하면 SSH로 접속한 게 된다.

우분투(리눅스) 명령어 기초

폴더 만들기: mkdir [폴더명]

지금 위치에서 모든 폴더/파일 보기: ls

지금 위치에 있는 어떤 폴더에 들어가기: cd [어떤 폴더명]

상위 폴더로 이동: cd ..

내 위치 알기: pwd

복사 붙여넣기: cp -r [복사할 것] [붙여넣기 할 것]

지우기: rm -rf [지울 것]

관리자 권한으로 명령어 실행하기: sudo [실행할 명령어]

관리자 권한으로 들어가기(나올 땐 ‘exit’으로 나옴): sudo su

바로 전에 썼던 명령어: 윗화살표

처음 접속된 상태에서의 위치는 ../home/ubuntu$ 요 상태인 것 같다. 만약 처음 들어간 위치에서 ‘sparta’폴더를 만든다면 ../home/ubuntu/sparta 이렇게 위치가 정해지는 것.

AWS 서버 띄우기 2탄

3. 서버 컴퓨터 환경 세팅(환경 통일)하기

Git Bash에서 AWS 서버 컴퓨터로 연결된 상태에서 다음 명령들 실행하기:

# python3 -> python
# python 명령어만으로 python3를 실행하도록 세팅
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip
# 파이썬 패키지를 설치하기 위한 패키지 마법사 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에서 5000을 빼도 실행하도록 세팅
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

파일질라 실행해서 왼쪽엔 (내 컴퓨터의)옮길 파일 위치를, 오른쪽은 서버 컴퓨터를 연동시킨다.

파일질라 - 서버 컴퓨터 연결하기

1. 메뉴의 ‘파일’버튼 아래 아이콘 클릭 ⇒ 사이트 관리자 창 띄우기

2. ‘새 사이트’ 버튼 클릭해서 이름 임의로 짓기

   

3. 프로토콜을 SFTP로 변경

4. AWS에서 내 가상 서버 컴퓨터(EC2 인스턴스)를 활성화한다.

5. (다시 파일질라로 돌아와서)‘호스트’에 방금 활성화한 클라우드 서버의 퍼블릭 IPv4 주소를 넣어주고, ‘포트’는 22 입력

6. ‘로그온 유형’은 ‘키 파일’ 선택

7. ‘사용자’ : ‘ubuntu’ 입력

8. 키 파일 찾아보기 → AWS에서 가상 서버 인스턴스 생성할 때 지정한 키(.pem 파일)파일 선택 (=Git Bash에서 연결 요청할 때 써 준 키 파일과 동일)

9. ‘연결’

10. 확인창 뜨면 그냥 확인 클릭

11. 연결 완료. 이제 내 가상 서버 컴퓨터의 폴더 구조를 눈으로 볼 수 있게 되었다!

파일질라 - 내(로컬) 컴퓨터와 서버 컴퓨터 사이 자료 옮기기

1. 내 컴퓨터(왼쪽)과 서버 컴퓨터(오른쪽) 모두 원하는 폴더 위치로 들어간다.

2. 원하는 파일을 드래그 앤 드랍하면 복사된다.

4. 서버 컴퓨터에서 파이썬 파일 실행하기

1. Git Bash를 켜서 SSH로 서버 컴퓨터에 연결한다.

2. 실행하고자 하는 파이썬 파일이 있는 서버 폴더 위치로 이동한다.

3. 명령어 “python [실행파일명].py”를 입력 후 엔터!

AWS 서버 띄우기 3탄

5. 서버 컴퓨터에 내 팬명록 웹사이트 호스팅하기

순서와 뒷처리

서버 컴퓨터에 팬명록 프로젝트 파일(app.py와 teplates, static 폴더) 옮기고

pip install 명령어로 서버 컴퓨터에 필요 파이썬 패키지를 설치해준다(flask, pymongo, dnspython).

웹 브라우저에서 “내 서버 컴퓨터 IPv4 주소:5000”를 치고 내 웹사이트에 접속한다.

근데 아직 포트 5000이 안 열려 있어서 들어가지지가 않음.

내 서버 컴퓨터 IPv4 주소:5000으로 접속하기 위해서는 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다. 즉, 포트 5000과 80 등에 대해 접속을 허가해 주는 것(?)

1. 내 EC2 서버 컴퓨터 인스턴스 페이지로 들어온다.

2. ‘세부 정보’ 옆의 ‘보안’ 탭을 눌러서 ‘보안그룹’창 클릭

3. ‘인바운드 규칙 편집’버튼 클릭

4. 4가지 포트 추가하기(IPv4와 IPv6 각각에 대해 추가 = 총 8포트가 만들어지게 된다):

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

   → 5000포트: flask 기본포트

   → 27017포트: DB 접속 포트

   → 22포트: SSH

지금 내 팬명록 웹 서비스는 포트 5000에서 실행되도록 되어 있는데, url 끝에 붙는 :5000을 매번 써주지 않고도 접속할 수 있도록 하는 처리를 “포트포워딩”이라고 한다. 이미 해주었다.

http 요청에서는 80포트가 기본이라 굳이 :80을 붙이지 않아도 자동으로 연결이 된다.

SSH 연결할 때도 22포트가 열려있어야 가능하다고 했다. ftp 요청에서 22포트를 포트번호로 지정해준 이유는 EC2 가상 컴퓨터는 처음부터 22번 포트가 열려있다는 걸 이용한 것 같음.

외부에서 내 서버 컴퓨터의 80포트로 요청을 주고 받으면, 내 서버 컴퓨터 안의 포트포워딩 처리된 리눅스가 80포트로 들어오는 애들을 5000포트로 전달해주게 된다.

아무튼 아까전에

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

이렇게 포트포워딩도 잘 해줬고 위와 같이 포트들도 열어줬으면 이제 “그 때 그 때의 내 서버 컴퓨터 IPv4주소:5000” 뿐만 아니라 그냥 “내 서버 컴 IPv4주소”만 입력해도 잘 들어가지는 것을 확인할 수 있다. 심지어 핸드폰으로도 된다! 댓글 등록도 전부 된다😹…

프로그램 반영구 실행시키기/끄기 - nohup과 ps

이제 내 로컬 컴퓨터의 Git Bash 프로그램을 종료해도, 즉 SSH 원격접속을 끊어도 서버가 계속 돌도록 만들어보자. (왜 Git Bash를 종료하면 팬명록 웹페이지도 끊어지냐하면, Git Bash의 SSH가 지금 python을 ‘실행하고 있는’ 애이기 때문인 듯)

Git Bash를 다시 켜서 SSH 연결하고 python은 실행하고 있지 않은 상태에서 아래의 명령어로 실행하면 된다:

nohup python app.py &

그럼 Git Bash를 종료하고 SSH도 자동으로 종료되더라도 내 팬명록 페이지가 계속 유지되고 있는 것을 볼 수 있다.

그럼 서버에서 유령처럼 돌아가고 있는 내 팬명록 페이지를 종료시키려면? Git Bash를 다시 켜고 다음 명령어를 실행해주면 된다:

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

app.py 자리에 내 앱 파일명을 넣어주면 된다.

이제 내 팬명록 웹 페이지가 죽었다.

도메인 연결 - IP 대신 영문주소로 찾아오게 만들기

가비아 홈페이지 → My 가비아 → DNS 관리툴 → 내 도메인 체크하고 DNS 설정 클릭 → 호스트에 ‘@’, 값에 내 서버 컴퓨터 IP 넣고 확인 클릭 → 저장

→ 원래 IP 주소 넣고 들어가던 내 팬명록 사이트에 방금 연결한 도메인 주소 넣기 → 접속된다!

가비아같이 도메인을 판매하는 업체를 “네임서버를 운영하는” 업체라고 한다. 숫자로 된 IP 주소와 영문자로 된 도메인 주소를 매칭시키는, 일종의 전화번호부를 운영할 수 있도록 전세계적으로 인가를 받은 것이다. 그래서 방금과 같이 dns로 도메인을 연결하면 ‘둘이 연결됐대’하는 정보가 퍼지는 시간이 필요해서 때에 따라 막 연결한 도메인 주소로 바로 접속이 안 되고 20분을 기다려야 하는 경우가 생기는 것이다. 막 등록한(연결한) 도메인이 한국에 전부 퍼지는 데 약 1시간이(나) 걸린다고 한다.

OG 태그 붙여서 배포 수정해보기

og 태그도 붙인 버전으로 내 웹 사이트 수정하기(배포 중인 웹 사이트에 수정거리가 생김) :

nohup으로 유지중이던 것을 ps 명령어로 중지해주고, 수정한 파일 파일질라로 서버 컴퓨터에 다시 올리고, nohup으로 다시 유령 실행모드 해주기

카카오톡 같은 곳에 링크를 공유했을 때 나오는 og 정보의 수정본이 업데이트가 안되는 이유는, 한 번 이전 정보로 og 정보를 불러오고 나면 카카오톡이 그걸 캐시로 저장해두고 다음에도 불러오는 방식을 취하기 때문이다. 따라서 카카오톡 쪽의 내 링크에 대한 캐시를 지워주는 작업이 필요하다:

카카오계정 로그인

1. Check if you entered your email address correctly.2. Check your spam folder or trash folder.3. It may take some time depending on the email service you use. If you don't receive an email from us within 24 hours, please contact our Customer Service. Resend Verify via an alternate email

https://developers.kakao.com/tool/debugger/sharing

카카오계정으로 로그인 하고 “공유 디버거”에서 내 웹사이트 URL로 캐시 초기화하고 다시 톡방에 링크를 공유하면 된다.

정리:

배포된 나의 팬명록 웹 서비스는 어떻게 구축돼 있냐하면

• 유료 서비스: 클라우드 DB(MongoDB Atlas), 클라우드 서버 컴퓨터(AWS EC2), 도메인 주소(네임서버 가비아)

• 서버 컴퓨터에서 파이썬 파일을 실행할 수 있게 하는(=프론트에서 보낸 요청에 응답할 수 있는 처리를 하는 = 서버 역할을 하게 해주는) 파이썬 패키지들, 서버 컴퓨터로 프로그램 파일 자체를 보내주는 FTP(FileZilla).

중단된 배포를 다시 실행시키기 총정리:

1. AWS에서 서버 컴퓨터를 켠다(인스턴스 시작).

2. 가비아에서 새 퍼블릭 IPv4 주소를 도메인에 다시 연결해준다.

3. Git Bash를 열고 SSH로 접속해서 포트포워딩을 다시 해준다.

4. nohup명령어로 내 웹서비스 프로그램을 반영구 실행시킨다.

5. 조금 기다리면 도메인 주소로도 잘 동작한다.

도메인 다시 연결할 때 시간이 랜덤으로 좀 더 걸리기도 한다. ⇒ 카톡으로 주소 공유할 때 IP 주소로는 바로 뜨지만 도메인명으로는 연결이 다 퍼지기까지 og 인식이 안될 수도 있다. 기다려야 함.

도메인명으로 PC 카카오톡에 내 팬명록을 공유하면 og 정보가 잘 뜨는데 핸드폰으로는 안된다. IP 주소로는 PC나 모바일이나 잘 뜬다. 왜 그럴까…

배포를 중단시키기 총정리:

1. Git Bash를 열고 SSH로 접속해서 ps로 시작하는 강제종료 명령어를 써준다.

아예 새 서버 컴퓨터로 처음 배포하기 총정리:

1. 클라우드 서버를 하나 대여(인스턴스 시작)하고 위와 똑같은 과정을 밟는데,

2. Git Bash를 열고 SSH로 처음 접속해서는 포트포워딩을 포함한 5가지 세팅을 모두 해준다는 점만 추가하면 된다.

숙제와 수료

내 웹사이트 url을 제출했다(=배포했다):

라포엠 팬명록

응원 한 마디 남기고 가세요

http://devocean-practice.shop/

이로써 [웹개발 종합반]을 완강하였다~

---

참고:

스파르타 코딩클럽 > 웹개발 종합반(5주)의 영상 강의와 강의노트를 주로 참고함

가끔 구글링

Uploaded by N2T