웹개발 공부 15일차

🎶 우선 14일차에 안 된 부분.....

나는 오류메시지만 열심히 보면서 어떤 줄이 틀렸나 찾고있었는데

튜터쪽에 문의를 넣어보니...............

function show_bucket() {
    $.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 cmt = rows[i]['bucket']
                let done = rows[i]['done']

                let temp_html = ``
                if (done==0){
                    temp_html = `    <li>
                                        <h2>✅ ${cmt}</h2>
                                        <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료</button>
                                    </li>`
                } else {
                    temp_html = `<li>
                                    <h2 class="done">✅ ${cmt}</h2>
                                </li>`
                }
                $('#bucket-list').append(temp_html)
            }
            alert(response["msg"])
        }
    });
}

let num = row[i]['num'] 을 잘못쓴거였다ㅠㅠㅠ

아니 오류메시지랑 전혀 상관없는 곳에서 틀려버리면 나같은 초보는 어떻게 찾냐구요...

도움을 받지 못했다면 진도 못 뺄 뻔 했다.. 해결해서 다행이다....

 

🎶 AWS 서버 설정하기

1. 로그인 하면 기본 화면

만약 이게 나오면 가상 머신 시작 클릭

이렇게 나오면 ' 인스턴스 ' 눌러준다

그럼 이런 모양이 나오는데, 나는 쭉 진행하다가 일지때문에 종료시켰음......... 

여기서 오른쪽 위에 주황색 '인스턴스 시작' 눌러준다.

조금 내리면 나오는 Ubuntu 20.04 선택

그 뒤로 시작을 두 번 눌러주면 아래같은 화면이 나오는데

새 키페어 생성으로 선택하고 

이름 입력하고 키페어 다운로드 하면 뭔가 하나가 다운이 된다. 잘 놔두자. 그리고 인스턴스 시작.

이렇게 대기 중 으로 뜨면 잘 된거고, 몇 분 있으면 

이렇게 실행 중 으로 바뀐다. 글자 옆에 빈 칸을 클릭하면

아래쪽에 정보가 뜬다. 퍼블릭 IPv4 주소 아래 복사 버튼을 눌러놓는다.

 

시작에서 Git Bash 실행. 뜨는 콘솔창에

ssh -i 

까지 입력하고 좀 전에 다운받아진 파일을 그대로 끌어와 놓는다.

그럼 주소가 입력되고, 한 칸 띄고

ubunto@

입력하고 아까 복사했던거 마우스 우클릭으로 붙여넣기 한다.

글로 적으니 좀 복잡해 보인다. 이런 모습이다.

중간에 다시 하고 그래서 ip 주소가 위와 다르다

마우스 우클릭 붙여넣기 한 게 아까 복사한거다. 그리고 엔터를 눌러주면 정말 연결할거냐고 뜨는데 yes엔터

그럼 끝이다.

 

대충 요런식으로 나오면 잘 된 것.

간단한 리눅스 명령어

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

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

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

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

여기까지 하면 서버로 쓸 컴퓨터를 딱 놓은것 까지 완료다.

 

🎶 서버 세팅하기

1. 총 5가지를 복붙해줘서 설치한다.

# 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

 

2. 설치해뒀던 FileZilla 를 실행해서 파일(F) 밑에 본체 3대 있는 것 같은 아이콘 클릭

 

3.  New site 를 눌러 이름을 정해주고, 오른쪽 세팅은 똑같이 해야한다. 호스트만 내 인스턴스 IPv4 입력.

알수없는 호스트키 뜨면 확인.

그럼 아래처럼 오른쪽에 서버화면이 뜬다. sparta 는 내가 만들어 둔 폴더이다. 

 

4. 숙제로 했던 팬명록을 서버에 올린다. app.py templates static 세 가지만 올리면 된다. 드래그 드랍으로 가능.

 

Git basg 가서 명령어를 쳐보면 잘 들어가 있는 걸 알 수 있다.

 

5. 실행을 위해 python app.py를 입력

 

하면 이렇게 flask 가 안깔렸다고 메시지가 뜬다. pip install flask 를 입력해줘서 설치해준다.

같은 방법으로 bs4, dnspython, pymongo 를 설치해주고 python app.py를 입력하면

이렇게, pycharm 아래쪽 콘솔에서 봤던 것과 비슷한 모습이 보이면서 실행이 완료된다.

 

6. 포트 열어주기

[보안] 탭에서 보안 그룹 아래에 있는 launch-wizard 를 클릭. 뒤에 숫자를 다를 수 있다.

우측하단에 [인바운드 규칙 편집] 영어로 [Edit Inbound rules] 로 돼있을 수도 있다.

규칙 추가를 해서 5000번과 80을 추가한다. 그 오른쪽을 Anywhere-IPv4 로 변경 후 규칙 저장

※ 80번은 공용포트다. 보통 인터넷 주소를 입력하면 뒤에 80이 생략돼있는것. 그래서 위에 우분투 패키지 중에

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

이 부분이 80으로 들어온 걸 5000으로 리다이렉트 해주는 패키지이다.

 

이후 인터넷 주소창에 퍼블릭 IPv4 주소:5000 을 입력하면 접속이 정상적으로 된다. 5000을 안붙여도 된다.

 

🎶 Git 을 꺼도 서버 돌아가게 하기 - nohup 설정하기

Git 에서 Ctrl + c 를 눌러 서버위치에서 빠져 나온 뒤

nohup python app.py &

를 입력하고 엔터를 누르면

 

이렇게 뜨면서, Git 을 꺼도 웹페이지가 정상적으로 작동한다.

만약 코딩 수정 등의 이유로 서버를 종료하고싶다면

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

 

어우 사진들땜에 엄청 길어졌따. 오늘은 여기까지..............