항해99) 웹종 5주차 웹서비스 런칭

* 배포 위한 사전 준비

- Filezilla: (설치必) 직접 만든 코드 소스들을 서버(클라우드)로 올려주는 프로그램

- 가비아: 도메인 구매요(___.shop)

- AWS: 서버 사용권(EC2 사용권) 구매(AWS는 클라우드 서비스)

- Git Bash: (설치必) AWS에서 산 서버 EC2의 OS는 Ubuntu임. Window에서 Linux의 명령어를 쓰려면 Git Bash가 필요함.

 (git bash 는 window 의 cmd, linux와 mac 의 terminal과 같은 역할을 한다. 그러나 운영체제마다 명령어가 다르다는 문제점이 있는데, 이를 극복한것이 바로 Git bash!! 얘를 이용하면 window 에서도 리눅스의 명령어를 쓸 수 있다.)

---

 

* 프로젝트를 배포해보자!

1] 필요한 개념 소개

2] AWS 서버 구매

3] 서버 세팅하기

4] Flask 서버 실행하기

5] nohup 설정하기

6] 도메인 연결하기

7] og 태그 붙이기

 

1] "웹서비스 런칭" 에 필요한 개념 소개

- 배포:누구나 내 서비스를 사용할 수 있게 하기 위해서 작업들이. 웹 서비스 런칭!!

- 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줄 거.

- 언제나 요청에 응답하려면, 1) 컴퓨터가 항상 켜져있고 프로그램이 항상 실행되어 있어야하고, 2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야 함.

- 서버는 그냥 컴퓨터.. 그러므로 외부 접속이 가능하게 설정한 다음, 내 컴퓨터를 서버로 사용할 수도 있음.

- 우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 것.

 

 

2] AWS 서버 구매하기

2-1) EC2 서버 구매하기

• AWS EC2 서버 사기 (준비 상식 편)
  • 클릭만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위한 운영체제(OS)를 설치
  • EC2도 하나의 컴퓨터를 산 것!!! 그 컴퓨터(EC2)의 OS로 리눅스의 Ubuntu를 설치(ios, 윈도우 등 OS는 여러개. 리눅스도 그 중의 하나이며, 오픈소스로 발전되는 OS)
• AWS EC2 서버 사기
  • EC2 콘솔페이지: https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2
  • Name은 마음대로, Application and OS Images는 Ubuntu Server 18.04 또는 20.04 버전을 구매, Instance type은 t2.micro가 1년에 한 대 무료(1년 기한)
  • 위 세 개 처리 후 새 키 페어 생성하기를 클릭해 KEY 발급받기(⭐서버 접속 시, 매우 중요!!!)
  • 나머지 체크리스트들을 체크 후, Launch instance를 클릭

2-2) EC2 서버 종료하는 방법(1년 후 자동결제 방지!!)

: 중지 또는 종료하는 법. 무료 기간(1년) 후 결제가 되기 전에, 이렇게 종료하기~!

• 대상 인스턴스에 우클릭 > '인스턴스 상태' 클릭 > 중지 또는 종료 중 하나를 클릭(중지: 컴퓨터를 그냥 끈 것!, 종료: 컴퓨터 아예 반납!!)
• 만약에 잘못 만들어서 이거 폐기하고 새로 만들고싶다? '종료'

2-3) EC2에 접속하기

• AWS EC2에 접속하기 (준비 상식 편)
  • SSH(Secure Shell Protocol)
    • 다른 컴퓨터에 접속할 때 쓰는 프로그램. 다른 것들 보다 보안이 상대적으로 뛰어남.
    • 접속할 컴퓨터가 22번 포트가 열려있어야 접속 가능. AWS EC2의 경우, 이미 22번 포트가 열려 있음👇🏻

• AWS EC2에 접속하기 (준비 상식 편)
  • Window: ssh가 없으므로, git bash라는 프로그램을 이용
    • gitbash를 실행하고, 아래를 입력 후 엔터

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에 적힌 퍼블릭 IP 주소

예) 아래와 비슷하게 생길 것

ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20

• Connecting key fingerprint 관련 메시지가 나올 경우 엔터! 그러면 접속 완료
• git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊어주셈

2-4) 간단한 리눅스 명령어 연습하면서 EC2 서버에 sparta 폴더 만들기(원격 접속~! jonmud...)

: 리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작(일종의 마우스 역할)

- 2-3)까지 잘 했으면 일단 EC2 컴퓨터에 접속한 상태가 됨!!! 여기다가 폴더 함 만들어보쟈규

(만약 폴더 이미 만들었고 걍 확인만 하고싶으면? ls 입력 후 클릭!!)

- sparta 폴더 생성: mkdir sparta 입력 후 엔터(?후 무반응? ㅋ 리눅스는 무반응이 정ㅋ상ㅋ)

- 만든 sparta 폴더 안으로 들어가보기: cd sparta 입력 후 엔터(c치면 ~/sparta$ 이렇게 바뀌는데, 이게 폴더 안으로 들어왔다는 뜻...ㅎㅎㅎㅎ 몬가 귀여웡)(글고 cd sp까지 치고 걍 tab 누르면 자동완성도 됨ㅎㅎ)

- 만약 지금 상태로 ls 치면? 아무것도 업찌,, 암것도 안만들었으니까,,,,

- sparta 폴더에서 빠져나오고싶다? cd.. 입력 후 엔터!

 

[가장 많이 쓰는 몇 가지 명령어]

• 팁! 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나옴!

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

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

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

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

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

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

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

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

 

 

 

3] 서버 세팅하기

1) 서버 환경 통일하기

: 우리는 지금 막! 컴퓨터를 구매한 상태. 여기에 원격 접속해서 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해줘야 본격적으로 이용할 때 편리.

👉이거 뒷부분부터 적는거임!!!!
# 맨 처음 EC2 접속 명령어:
👉🏻ssh -i /c/Users/okyee/Downloads/poem.pem ubuntu@AWS의 퍼블릭 IP 주소

# python3 -> python(명령: python3라고 python 명령어 쳐야되는데 걍 python이라고만 쓸게!)
👉🏻sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip(명령: Flask, pymongo, dnspython 이런 패키지들 깔 때 pip가 필요한데 걔들의 패키지를 설치해줄 수 있는.. 쉽게말해서 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

※혹 진행 중 보라색 화면(Daemons using outdated libraries) 나타나면 설정 변경 없이 <ok> 선택 후 엔터 쳐서 창 닫기

 

2) filezilla 이용해서 python 파일 올리기

왼쪽이 내 컴퓨터, 오른쪽이 내가 산 컴퓨터!!!

2-1) 내 컴퓨터 - 내가 산 컴퓨터 연결부터 시켜주자

1. 파일 버튼 밑에 '사이트 관리자 열기' 버튼 클릭

2. 새 사이트 클릭 후 eg)myec2 뭐 이렇게 써 줌

3. 프로토콜: SFTP로 변경

4. 호스트: AWS 의 퍼블릭 IP 주소 기입 

5. 포트: 22

6. 로그온 유형: 키 파일

7. 사용자: ubuntu

8. 키파일: 찾아보기 해서 받아놓은 것 클릭(poem.pem! pem 파일로 확장자 바꿔줘야 보인다)

9. 연결 클릭, 확인 클릭

10. 존나 신기하게 아까 깃배시로 만든 sparta 폴더 들어와있음,,,,,~!~!~!~

 

2-2) 연결 끝났으니 파일 올려보자

1. sparta 폴더 클릭

2. 올려줄 파일 끌어다 넣기

3. ....업로드 끗!

 

2-3) 그럼 저 업로드한거 실행하려면?!

1. ssh -i /c/Users/okyee/Downloads/poem.pem ubuntu@AWS의 퍼블릭 IP 주소
2. ls  //치면 만들어놓은 폴더 1개(sparta) 뜸
3. cd sparta  //sparta 폴더로 들어가기
4. ls //그 폴더에 뭐 있는지 다 보여줘
5. python test.py  //python파일인 test.py 실행시켜줘

 

 

4] Flask 서버를 실행해보기

1) e.g.) 팬명록 완성본을 파일질라로 EC2에 업로드 후 우분투로 실행하기:

• 프로젝트 폴더 클릭 > (파일 전부 다 올리는것 아님!!!) static, templates, app.py 세 개만 잡고 서버로 끌어당겨놓기
• 우분투에서 python app.py 입력 후 클릭하기

2) pip로 패키지 설치하기: 이 때, flask module 없다는 에러 뜰 수 있음. 그러면 걍

• pip install flask 입력 후 엔터 쳐버리면 그만...(file → setting → .. 에서 + 버튼 누르고 설치했던 작업을, 명령어로 이렇게 초간단하게....ㅋ_ㅋ)
• 근데 이렇게 하고 python app.py 했는데 또 모듈 미설치 된 것 있으면 오류 계속 나올것... 그러니까 pip install pymongo이랑 pip install dnspython 차례로 설치해주자~!

3) 다시 flask 서버 실행해보기: python app.py 다시 입력해봐~! 그러면 아래와 같은 화면 뜨면서 서버 쭉 올라온다..(너무멋져.....)

그러믄 크롬서 함 접속해봐!!

http://[내 EC2 IP]:5000/

....? 아직 안 됨ㅡㅡㅋㅋㅋㅋㅋㅋㅋㅋWHY?!

AWS에서 5000으로 접속할 수 있는 포트를 안열어뒀어,,, 좀 더 설정이 필요쓰

 

4) AWS에서 5000포트 열어주기: EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도, AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 함. 래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 함.

1. EC2 관리 콘솔로 들어갑니다.

2. 그리고 보안그룹(Security Group)을 눌러 들어감.

3. 인바운드 규칙 편집 클릭

4. 규칙 추가 클릭

5. 아래 두 개 규칙 추가(Port:5000, Source: Anywhere~ & Port: 80, Source: Anywhere~)

6. 규칙 저장 클릭 후 빠져나오기

7. 이제 이거 들어가보면?

http://[내 EC2 IP]:5000/

됨!!!!!!!!! 긍까 방금 4-6)번까지 죽어라(..) 해준게 전 세계 어디에서든 위의 주소만 입력하면 내가 만든 웹에 접속 가능하게 만들어 준 것!!!!!!!!!

근데,,, 사실 뒤에 :5000 빼도 되는데,,, 그 이유가 머냐면 port 80도 열어줬기 때문~~~~~~~~~!

위와 같은 이유 때문이라는데 암만 봐도 이해 안돼서 걍 패쓰.. 별로 중요하지도 않은 것 같..고.... 아마도....?

 

 

5] nohup 설정하기

1) SSH 접속을 끊어도 서버가 계속 돌게 하기:

• 현재 상황: Git bash 또는 맥의 터미널을 종료하면(=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않음... 그러나 우리가 원격접속을 끊어도, 서버는 계속 동작해야지?!!
• 내가 원격 접속 종료하더라도 서버는 계속 돌아가게 하자!!!

# 아래의 명령어로 실행하면 된다
nohup python app.py &

- 일단 위의것 해주려면, Ctrl + C 눌러서 서버 꺼주고,

- ~/sparta$까지 들어와서 nohup 명령어 입력 후 엔터(꼭 &까지 전부 입력,,)

 

2) 서버 종료하기 - 강제종료하는 방법

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

위의 코드 입력해주면 서버가 강제 종료됨,, 이젠 http://내 AWS IP/ 들어가도 암것도 안나옴쓰

 

 

6] 도메인 연결하기

1) 도메인 구입/연결

- 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에 IP와 도메인 매칭 유지비를 내는 것. 한국 또는 글로벌 업체 어디든 상관 없지만, 우리는 한국의 '가비아'라는 회사에서 구입 ㄱㄱ

 

2) 구입 후 아래 가비아(https://dns.gabia.com/)에서 dns 설정하기

여기서 말하는 IP 주소는 39. 어쩌고 저쩌고.. 아무튼 AWS의&nbsp;퍼블릭 IPv4 주소

3) 10분 정도 기다리기: 네임서버에 내 도메인-IP가 매칭되는 시간이 필요합니다.

 

4) IP주소로 접근해보기

- 내 IP주소로 지금 flask 서버가 잘 돌고 있는지 먼저 CK: <http://내AWS아이피/>

- 약간의 시간을 가진 후, 내 도메인으로 접근하면 접속 됨!: http://내도메인/

 

 

7] og 태그 붙이기

1) og 태그 만들기: 내 프로젝트도 카톡/페이스북/슬랙에 공유했을 때 예쁘게 나오도록, 미리 꾸며보자!!!ㅎㅅㅎ

- <head> 밑의 줄줄이 붙은 <meta~> 여기다가 붙여줄거임~!

 

넣을 og태그👇🏻

<meta property="og:title" content="내 사이트의 제목(<h1>거 갖다 쓰면 되겠쥬ㅋ.ㅋ)" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약(ㄹㅇ 암거나)" />
<meta property="og:image" content="이미지URL(얘는 <style>의 <background img의 url 있으니까 고거 고대로 갖다 붙임 됨쓰)" />

+ static 폴더 아래에 이미지 파일을 넣고, 걔를 사용해도 됨

 

2) 이젠 이걸 다시 올려줘야되니까

1. 서버 강제종료

2. 파일질라에서 새로운 파일로 바꿔주기

3. nohup으로 실행하기

 

※ 참고! 이미지를 바꿨는데 이전 ogimage가 그대로 나와요!

 👉🏻그것은 페이스북/카카오톡 등에서 처음 것을 한동안 캐쉬에 저장해놓기 때문

• 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
• 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og