Script
웹개발 종합반 5주차 본문
1. Filezilla 설치
클라우드에 파일을 보낼때 사용하기 위한 프로그램이다.
https://filezilla-project.org/download.php
Download FileZilla Client for Windows (64bit x86)
Download FileZilla Client for Windows (64bit x86) The latest stable version of FileZilla Client is 3.60.1 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla P
filezilla-project.org
위 링크에 들어가 설치해주도록 하자.
2. 가비아 가입 후 도메인 구입하기
웹을 넘어 클라우드로. 가비아
그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브
www.gabia.com
위 링크에 들어가 회원가입 후 도메인 구입을 진행하자.
(현재는 연습용으로 사용할 것이므로 가장 저렴한 도메인으로 구입한다.)
3. AWS서버 구매하기
클라이언트의 요청을 받기 위해서는 컴퓨터가 항상 켜져있고 프로그램이 항상 실행되어 있어야하며,
모두가 접근할 수 있는 공개 주소인 공개 IP주소로 나의 웹 서비스에 접근할 수 있도록 해야한다.
서버는 단순히 컴퓨터이다. 따라서 내 컴퓨터를 서버로서 사용할 수도 있겠지만,
앞서 말했듯이 항상 컴퓨터를 켜놓아야 한다는 치명적 단점이 있다.
따라서 우리는 AWS라는 클라우드 서비스에서 서벼용으로 항상 켜놓을 수 있는 컴퓨터인
EC2 사용권을 구입하여 서버로 사용할 것이다.
https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2
https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2
ap-northeast-2.console.aws.amazon.com
위 링크에 들어가 로그인 후,
우분투 20.04버전으로 시작하도록 한다.
키페어 생성창이 나오면 name을 입력하고 저장, 인스턴스 시작.
인스턴스 보기를 클릭하면 아래와 같은 창이 나올 것이다.

실행중은 빌린 컴퓨터가 켜져있음을 뜻하며,
종료하고 싶다면 인스턴스 중지를,
아예 반납하고 싶다면 인스턴스 종료를 해주도록 하자.
EC2에서 빌린 컴퓨터는 리눅스라는 OS를 사용하기 때문에
Window의 경우, 접속하기 위해서 git_bash 라는 프로그램을 이용한다.
참고로, 리눅스와 git_bash에 대한 설명은 3주차에서 한적이 있다.
git_bash를 실행하고 다음을 입력하자.
ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
Key fingerprint 관련 메시지가 나올 경우 Yes를 입력.
여기까지 완료하면 우리가 빌린 컴퓨터에 접속이 완료된 것이다.
리눅스는 키보드 마우스 대신에 명령어를 통해 조작이 가능하다.
아래는 가장 많이 쓰는 몇가지 명령어이니 참고하자.
ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)
4. 서버 세팅하기
대여한 컴퓨터에, 업그레이드, 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
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
첫번째 코드는
python3 명령어를 python으로 사용할 수 있게 하는 명령어
두번쨰 코드는
pip3 명령어를 pip으로 사용할 수 있게 하는 명령어(패키지 설치 마법사)
세번째 코드는
80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
(밑에 서버 실행 과정에서 설명)
그 후, Filezilla 실행

위와 같이 입력해 EC2 컴퓨터를 연결시켜 주자.
왼쪽에 내 컴퓨터, 오른쪽에 빌린 컴퓨터가 나올 것이다.
왼쪽에서 오른쪽으로 옮기고 싶은 파일을 드래그하면 복사 완료.
(옮길 때에는 static, templates, app.py 파일만 옮기면 된다.)
5. Flask 서버 실행하기
드래그앤 드롭으로 옮기고 싶은 파일을 옮기고 나서
폴더 안에 들어있는 app.py를 실행시켜보자.
명령어에 python app.py 입력
no module named flask라는 오류가 뜰 것이다.
flask를 설치해주면 해결된다.
명령어에 pip install flask 입력하여 flask를 설치해주도록 하자.
추가로 pip install pymongo dnspython까지 설치.
다시 명령어에 python app.py 입력하여 flask 서버 실행
그 후 크롬에서 접속을 해보자.
크롬 브라우저 창에 아래와 같이 입력. http://[내 EC2 IP]:5000/
작동하지 않음을 알 수 있다.
AWS에서 5000포트를 열어주는 작업이 필요하다.
AWS 창에서 보안-보안그룹 클릭-인바운드 규칙 편집 클릭
규칙 추가 눌러 Anywhere-IPv4 설정 후 각각 5000포트와 80포트를 열어준 후 저장
다시 접속하여 잘 접속되는 것을 확인하자.
추가로,뒤에 포트번호인 5000을 떼고서도 접속해보자.
이상없이 잘 작동할 것이다.
이것의 이유는 우리가 위의 서버세팅하는 과정에서 port forwarding을 해주었기 때문이다.
port forwarding이란?
http 요청에서는 80포트가 기본이기 때문에 :80이라고 붙여야 할것을 생략해도
자동으로 연결이 된다.
이 원리를 이용해 80포트로 요청을 받아 5000포트로 전달하게 되면 :5000의 생략이 가능해진다.
이를 포트 포워딩이라고 한다.
6. nohub 설정하기
git_bash를 종료 후 웹페이지에 접속해보자.
접속되지 않는 것을 볼 수 있다.
이렇게 되면 git_bash를 켜두기 위해 내 컴퓨터를 계속 켜두어야 할 것이다.
이를 해결하기 위한 것이 nohub이다.
실행코드 nohup python app.py &
nohub를 실행 후 원격 접속을 종료해도 잘 실행되는 것을 볼 수 있을 것이다.
종료코드 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
7. 도메인 연결하기
위 2번의 가비아에서 구매한 도메인에 웹페이지를 연결하는 작업을 해볼 것이다.
DNS 설정 클릭- 호스트 이름에 @, IP주소에 AWS IP 주소 입력
10분 정도 기다린 후 잘 접속 되는지 확인

나는 지난 시간에 만들었던 팬명록 페이지를 도메인에 연결 시켜 보았다.
5주차 요약
AWS를 통해 서버(컴퓨터)를 구매하여 git_bash로 해당 서버에 접속하고,
Filezilla를 이용해 AWS에 파일을 넘겨주었다.
git_bash로 필요한 세팅들을 하고 AWS에서 포트번호를 열어준 뒤,
해당 AWS IP를 가비아에서 구매한 도메인에 연결하여 세상에서 유일한
웹페이지를 만들어 보았다.
웹개발 종합반 후기
5주동안 웹개발 종합반이라는 이름에 걸맞게끔,
웹페이지를 만들기 위한 전 과정을 한번씩 경험해봤다는 것에 큰 의의를 느낀다.
전반적인 틀이 어떻게 생겼고 어떻게 굴러가는지 살펴볼 수 있는 시간이였다.
'항해99 > 사전준비' 카테고리의 다른 글
| 웹개발 종합반 4주차 (0) | 2022.06.29 |
|---|---|
| 웹개발 종합반 3주차 (0) | 2022.06.26 |
| 웹개발 종합반 2주차 (0) | 2022.06.21 |
| 웹개발 종합반 1주차 (0) | 2022.06.21 |