웹개발 5주차 : 서버 업로드

1. 서버 업로드

1) 언제나 클라이언트의 요청에 응답하려면 컴퓨터가 항상 켜져 있어야.

2) 모두가 접근할 수 있는 공개 IP주소로 나의 웹서비스에 접근할 수 있어야.

 

1)을 위해 클라우드 환경을 구매한 후, 해당 클라우드를 활용한다!

AWS가 가장 널리 사용되는 클라우드 환경이다.

2. 서버 구매하기

AWS에서 클라우딩 컴퓨터를 구매하고, 인스턴스를 만들면 해당 컴퓨터에 서버가 만들어진다 !

구매시에 해야하는 몇 가지 설정들이 있었는데,

1) Create a new key pair 로 새로운 키페어 만들고, 다운로드하기

2) gitbash를 실행, 명령어에 아래를 입력해주기

ssh -i (키페어 끌어다놓기) ububtu@내IP주소

Key fingerprint 관련 메시지에 Yes 입력

3. 서버 세팅하기

1) python 언어 업그레이드, DB 설치, 명령어 통일을 해준다.

# 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 localhost:5000 <여기서 5000 빼는 명령어
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

2) filezilla를 통하여 새로운 사이트를 개설한다.

filezilla > 사이트 관리자 > New site > 프로토콜은 SFTP, 호스트는 배정받은 IP주소, 포트는 22, Key file 열어준다.

3) 새로운 사이트에 python파일과 html 파일을 업로드 해준다.

4. Flask 서버 실행

1) gitbash에서 명령어로 패키지를 설치해준다.

pip install flask
pip install dnspython

2) 서버의 5000포트를 열어준다.

인스턴스 선택 > 보안 그룹 > Edit inbound rules > 포트 추가

* 80포트가 HTTP 접속을 위한 포트고, 5000포트는 flask 접속을 위한 포트...

* 내 파일 > 80포트 > 5000포트로 연결되는 개념

5. nohup 설정

1) gitbash 종료 후에도 서버가 돌아가게 하기 위해 하는 설정이다.

gitbash 내에 이런 명령어를 입력해준다.

nohup python app.py &

2) 서버를 종료하고 싶다면?

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

6. 도메인 연결

도메인 주소와 IP주소간 연결을 시켜주는 단계.

 

1) 가비아 접속

2) 구매한 DNS 클릭하고 설정

3) 호스트 이름에 @, IP주소에 IP를 입력 (아래와 같이)

7. 주의할 점

서버 만들고 도메인 지정하는 방법은 그냥 해야할 때 PDF 파일을 참고하면 더 좋을 것 같다.

 

코드를 바꾼다면 :

먼저 gitbash에서 서버 연결을 끊어준 후, (5-(2) 참조)

Filezilla에 새로운 코드를 다시 업로드해줘야 함!

(엥 근데 해보니까 굳이 끊지 않고 업로드 해줘도 잘 반영됨)

 

8. 숙제 완성

팬명록을 완성하는 숙제. 몇 가지 기능을 덧붙여봤다!

 

아무 내용 없이 적어도 입력되는 문제가 있어서 (빨간 네모 부분)

 

닉네임과 응원댓글을 모두 적어야지만 DB에 저장되고 입력이 되고,

닉네임과 응원댓글 중 하나라도 빠지면 닉네임을 입력하세요! 혹은 코멘트를 입력하세요! 가 뜨도록 했다.

 

또 닉네임/ 응원댓글 중 하나만 쓴 경우 쓴 내용이 날아가지 않도록

새로고침을 하지 않는 코드도 추가했다!

 

수정된 app.py

def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    if name_receive == "" :
        return jsonify({'msg': '닉네임을 입력하세요!'})

    elif comment_receive=="" :
        return jsonify({'msg': '코멘트를 입력하세요!'})

    else:
        doc = {
            'name': name_receive,
            'comment': comment_receive,
        }

        db.comments.insert_one(doc)
        return jsonify({'msg':'응원 완료!'})

수정한 index.html

        function save_comment() {

            let name = $('#name').val()
            let comment = $('#comment').val()

            $.ajax({
                type: 'POST',
                url: '/homework',
                data: {name_give: name, comment_give: comment},
                success: function (response) {
                    alert(response['msg'])
                    if (comment == "" || name == "") {

                    } else {
                        window.location.reload()
                    }

                }
            })
        }

 

결과적으로

뭐 대략 이렇게 ㅎㅎ

작은 변화지만 만족스럽다.

 

과제로 무엇을 만들어볼지 고민해봐야겠다.