내용이 나뉘어서 5주차는 (1)과 (2)로 나눴다.
1. 웹서비스 런칭
이제 내 프로젝트를 서버에 올리는 작업을 해 볼 것이다.
웹서비스 런칭을 위해서는 서버가 클라리언트의 요청에 항상 응답할 수 있어야 하는데 그러기 위해서는 다음과 같은 2가지 조건이 필요하다.
언제나 요청에 응답하려면,
1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록
해야해요.
1번 조건을 보면 컴퓨터가 항상 켜져 있어야 한다고 한다.
지금까지는 로컬 환경에서 구축을 했기 때문에 내 컴퓨터에서 서버를 만들고 실행했지만,
웹서비스 런칭을 위해 내 컴퓨터를 계속 켜 놓을 수는 없을 것이다.
따라서 클라우드 환경에서 남의 컴퓨터를 사서 실행 파일이나 서버를 실행시킨다.
클라우드 환경이기 때문에 트래픽 대응이나 서비스들을 붙이기 쉬워진다는 장점도 있다.
이제 AWS에서 컴퓨터를 구매해보자.
2. AWS 서버 구매하기
AWS 컴퓨터의 OS는 리눅스이다!
'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
로그인 하고,
언어는 한국어,
위치는 서울로 맞춰준다. (서울에 모여있는 컴퓨터들 중 한 대를 빌려 쓰게 되는 것!)
Step1. 인스턴스 시작 클릭
Step2. AMI(Amazon Machine Image) 선택
Ubuntu Server 20.04 선택
(** '프리 티어 사용 가능'이라는 쓰여 있으면 1년 동안 한 대에 대해서 무료)
Step3. 새 키 페어 생성
'sparta_mykey' 라는 이름으로 새 키 페어를 생성하고 다운로드한다.
(나는 "C:\Users\User\Downloads\sparta_mykey.pem" 이 경로에 저장했다.)
Step4. 인스턴스 시작
'인스턴스 시작'을 하고 인스턴스 보기를 누르면 왼쪽 화면처럼 인스턴스가 실행 중인 것을 확인할 수 있다. 즉, 컴퓨터의 전원 버튼을 눌러서 켜 준 것으로 생각하면 된다!
☆ 인스턴스 중지 : 컴퓨터 끄기
☆ 인스턴스 종료 : 컴퓨터 반납
작업 하다가 잘 안 돼서 컴퓨터를 새로 만들고 싶다 하는 경우에는 인스턴스 '중지'가 아닌 '종료' 선택해서 반납 후 새로 만들면 됨.
Step5. EC2 접속하기
Git-bash를 실행하고 다음과 같이 입력하고 엔터를 친다.
① ssh -i
② 키 페어 파일 경로 (키 페어 파일 끌어다 넣기)
③ ubuntu@인스턴스의 퍼블릭 IPv4 주소 (윈도우의 경우 우클릭, Paste 해서 붙여넣기)
'yes' 입력하고 한번 더 엔터
원격 접속 에러 해결..!!
사실 위에서 yes를 입력했을 때 접속이 잘 되고 ssh 쉘로 연결이 되어야 한다.
(★SSH(=Secure shell) : 네트워크 상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행할 수 있도록 해 주는 응용 프로그램 또는 그 프로토콜, 통상적으로 22번 포트 사용)
그런데 나는 위의 메세지에서 보이듯이 연결 거부가 되었다.
어떻게 해결하면 좋을지 몰랐는데 스파르타 코딩클럽의 즉문즉답을 통해 질문해서 해결할 수 있었다.
이 방법으로 연결에 성공하고 나서 gitbash 상에서 다시 연결 시도를 해보니 gitbash도 연결이 잘 되었다.
아마 뭔가 일시적인 문제였던 듯 하다..
튜터님이 인바운드룰에 22번 외에 80번도 추가해야 브라우저 페이지에 접근 가능할거라도 조언해주셔서 80번도 추가해줬다. 친절하게 답변 주셨던 튜터님 짱짱~!!
Git-bash가 뭐지??
지난 시간에 Git-bash를 설치했었고 지금 뭔가 하고 있긴 한데 그래서 git-bash가 무엇인가 하는 의문이 들었다.
찾아보니 아래 블로그에 쉽게 설명이 잘 되어있었다!
정리해보자면..
★ 유닉스(Unix) ☞ 리눅스(Linux)가 유닉스 계열의 운영체제를 본 떠서 만들어짐
★ 쉘(Shell) 프로그램 ☞ 키보드로 입력한 명령어(Command)를 운영체제에 전달하여 실행하도록 하는 프로그램
따라서 Git-bash가 있으면 윈도우 OS 환경에서도 리눅스 커맨드를 사용할 수 있게 된다고 한다!!
Git, Git Bash 쉬운 설치/ Git Bash 설치 쉽고 자세한 설명/ 윈도우 OS에서 리눅스 환경 구축하기/ Git Bash
Git Bash라는 것을 설치하기 전에 Git Bash가 무엇인지 부터 알아보고 가자. Git Bash란 무엇인가? 아래 사진을 보면 왼쪽은 우리가 Windows 운영체제에서 주로 쓰는 '명령 프롬프트, cmd'이고 오른쪽 사진
parkjh7764.tistory.com
** 리눅스 OS는 마우스가 없이 명령어를 통해 모든 것을 통제한다.
간단한 리눅스 명령어
ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)
3. 서버 세팅하기
컴퓨터 구매까지 했으니 이제 이런저런 세팅들을 해보자.
파이썬 파일을 올려서 실행해 보는 것까지 해볼 예정!
'EC2 한방에 세팅하기' 코드스니펫
# python3 -> python
python3 대신 python만 치고 명령을 하기 위해 필요한 세팅
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
# pip3 -> pip
Flask, pymongo, dnspython과 같은 패키지들을 깔 때 필요한 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
ssh에 위의 다섯 가지 명령어들을 차례대로 입력해준다.
엔터 쳐가면서 실행해주면 된다.
그러고 나서 전 수업에서 다운로드 받아놨던 FileZilla를 실행해준다.
아래와 같은 화면이 나올 것이다.
처음에는 오른쪽이 비어 있을 것이다.
이제 오른쪽에 내가 산 컴퓨터를 띄워보고,
내 컴퓨터에서 내가 산 컴퓨터로 파일 옮기는 작업을 해 줄 것이다.
왼쪽 위의 '사이트 관리자 열기' 클릭
① 새 사이트(N) -> 'myec2' 생성
② 프로토콜 : SFTP로 변경
③ 호스트 : 퍼블릭 IPv4 주소 복붙
④ 포트 : 22 고정
⑤ 로그온 유형 : 키 파일
⑥ 사용자 : ubuntu
⑦ 키 파일 찾아서 선택 (해당 경로에 키 파일이 안 보인다면 검색 파일 유형 'PEM 파일'로 변경)
⑧ '연결'
위 작업을 해주면 내가 산 컴퓨터가 오른쪽에 표시된다.위에서 만들어서줬던 'sparta' 폴더도 보이는데 이 폴더에 test.py 파일을 드래그해서 옮겨준다.
옮긴 파일을 실행시켜보자!
'sparta' 폴더에 'test.py' 파일이 잘 있는 것을 확인할 수 있고,
python test.py 명령어를 통해 파일을 실행해보면
hello sparta!!가 프린트 되는 것을 통해 잘 실행됨을 확인할 수 있다.
4. Flask 서버 실행해보기
위에서 연습삼아 올렸던 test.py는 삭제하고,
homework 폴더 안에 있는 static, templates, app.py 3가지를 다시 sparta 폴더로 드래그해서 옮겨준다.
원격 접속 창에서 확인해보면 sparta 폴더 안에 3가지 폴더와 파일들이 잘 들어가 있음을 볼 수 있다.
그래서 app.py 파일을 실행해보려고 하면 flask가 설치되어 있지 않다는 안내가 뜬다.
pip install flask 명령어를 통해 flask를 설치해 주면 된다.
마찬가지로 그동한 항상 설치해주었던 패키지인 pymongo와 dnspython도 설치해준다.
dnspython까지 설치 완료 후 app.py를 다시 실행시키면 서버가 잘 돌아간다.
퍼블릭 IP 주소를 다시 복사해서 주소창에 붙여넣고 :5000 추가해서 엔터쳐주면!
아직 접속할 수 없다.. 5000에 해당하는 창구를 만들어주지 않았기 때문!
아래와 같이 보안 항목에 들어가서 인바운드 규칙 편집을 해준다.
5000과 80 포트에 해당하는 규칙을 추가해줬다.
그러고 나서 다시 아까와 똑같은 주소로 들어가보면 내가 만든 팬명록 페이지가 뜨는 것을 볼 수 있다.
이제 내 로컬 개발환경에서가 아닌, 전 세계 사람들이 볼 수 있게 된 것이다!!
5000이 있고 없고?
http 요청에서는 80포트가 기본으로 사용된다. 따라서 굳이 :80을 붙이지 않아도 자동으로 연결이 된다.
(예를 들어, 네이버 주소는 http://naver.com/ 이다. 그런데 http://naver.com:80 도 똑같이 네이버로 연결이 된다.)
우리는 5000포트에서 웹 서비스를 실행하고 있다.
따라서 80으로 받아서 5000으로 채널링해서 연결해주면 된다.
처음에 서버 세팅을 할 때 입력했던 port forwarding 명령어가 바로 이것을 위한 명령어였던 것이다.
그래서 결과적으로 퍼블릭 IP 주소(나의 경우 3.34.90.215) 뒤에 :5000을 붙여도, 붙이지 않아도 해당 페이지에 접근할 수 있는 것이다.
# port forwarding
localhost:5000에서 5000을 떼는 명령어
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
5. nohup 설정하기
한 가지 해결해야 할 문제!
현재는 원격 접속 창(git-bash)을 끄면 홈페이지도 같이 꺼져버린다.
홈페이지를 켜두기 위해 컴퓨터를 계속 켜둘 수는 없지 않은가.
따라서 원격접속을 종료하더라도 서버가 계속 돌아갈 수 있게 만들어 줘야 한다.
방법은 간단하다!
nohup python app.py &
이렇게 명령어를 입력하면 원격 접속 창을 꺼도 홈페이지가 꺼지지 않고 남아있다.
그냥 python app.py로 실행했을 때와 달리 홈페이지가 켜져 있는 채로 다른 파일들에 접근하거나 명령을 내릴 수도 있다.
그렇다면 어떻게 종료해야 할까..?
'강제 종료하기' 코드스니펫
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
위의 명령어를 복사해서 붙여넣으면 된다.
6. 도메인 연결하기
퍼블릭 IP 주소(나의 경우 3.34.90.215)로 계속 쓸 수는 없으니 도메인을 연결해 주도록 하자!
가비아에 접속하고 로그인을 하면 예전에 내가 사뒀던 도메인을 볼 수 있다.
도메인 선택 -> DNS 설정 -> 호스트 : @ , 값/위치 : 퍼블릭 IP 주소 -> 확인 -> 저장
설정을 해주고 나서 주소창에 yudaeng.shop을 입력하면 홈페이지가 뜬다!
가비아가 하는 일?
가비아는 네임서버를 운영한다. 즉, IP 숫자와 도메인의 문자열을 매칭해주는 일을 하는 것이다.
전세계에서 사용할 수 있도록 퍼져야하기 때문에 길게는 2~30분 정도 시간이 걸릴 수도 있다고 한다!
7. og 태그
스파르타피디아를 할 때 og태그 에 대해 배웠었다. (참고 : https://yudaeng-log.tistory.com/3 meta 태그 부분)
그 때는 이미 설정되어 있는 태그를 가져다 쓰는 것을 했었는데
이번에는 내가 og 태그를 붙이는 작업을 해보겠다!
'og태그 넣기' 코드스니펫
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
파이참을 켜고, 이 코드를 기존의 homework 폴더의 html 파일 head 부분에 붙여넣어 준다.
파이참에서 작업한 것은 로컬 개발환경에서만 적용되므로 이것을 다시 전세계로 공유하려면 파일을 다시 올려야 한다.
1) 우선 현재 실행되고 있는 홈페이지를 끈다.
(원격 접속 창에서 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill)
2) Filezilla 에서 내가 산 컴퓨터에 올려둔 파일들(static, templates, app.py)을 전부 지운다.
3) 수정한 파일들(static, templates, app.py)을 다시 올린다.
4) 원격 접속 종료해도 홈페이지 유지되도록 nohup 설정하기
(원격 접속 창에서 nohup python app.py &)
★ nohup 설정할 때 파일 경로 확인 잘 하기!! sparta 폴더가 아닌 이전의 전체 폴더에서 nohup 설정하고 홈페이지 실행했더니 계속 연결 거부 떠서 약간 헤맴.. cd sparta/로 sparta 폴더로 들어간 후에 (즉, 실행하고자 하는 파일이 있는 폴더로 들어간 후에!!) nohup 설정해주자.
5) 홈페이지 실행해보기
og태그를 바꾸고 수정했는데 내용 및 이미지가 그대로 나온다??
주소가 공유될 때마다 크롤링을 하기엔 무리가 있기 때문에 페북과 카톡은 주소가 한 번 공유될 때마다 저장을 해둔다고 한다. 따라서 og 태그를 수정하고 싶다면 아래 링크를 통해 초기화 작업을 해주면 된다.
- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
최종 정리
내 눈에 보이는 것들 만들기 - html, css, javascript
내 눈에 보이는 것들을 건네줄 서버 만들기 - python, DB
만든 서버 인터넷 환경에 배포하기
이러한 흐름으로 웹 서비스를 만드는 공부를 했다.
아직 완벽하게 아는 것도 아니고 다시 새로운 프로젝트를 한다고 하면 전에 배웠던 것들을 들춰가며 해야겠지만
그래도 강의를 수강하면서 기본적인 베이스는 잡히지 않았나 생각한다!
이 베이스를 기반으로 앞으로 더 많은 것들을 쌓아 나가야겠지!!
이만 스파르타 '웹개발 종합반'을 졸업해보려 한다:)
