프로젝트 서버에 올리기 정리

1. EC2 서버 구매하기

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

언제나 요청에 응답하려면,

1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,

2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.

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

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

 

클릭 만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위한 운영체제(OS)를 설치해보자. OS로 리눅스의 Ubuntu를 설치하자. 대부분의 회사에서 컴퓨터를 빌려쓸때는 리눅스가 깔린 컴퓨터를 빌려쓴다.

Ubuntu Server 18.04 또는 20.04 버전을 구매하기.

인스턴스 상태가 '실행 중' 으로 바뀌면 서버 컴퓨터가 켜졌다는 뜻이다.

'인스턴스 중지'는 컴퓨터off, '인스턴스 종료'는 컴퓨터 반납.

 

 

2. EC2 서버 접속 및 세팅하기

1) git bash 로 서버 컴퓨터에 접속하기

gitbash를 실행하고, 아래를 입력! → Key fingerprint 관련 메시지가 나올 경우 Yes를 입력

ssh(v)-i(v)[받은키페어](v)ubuntu@[내아이피]
(실제입력 : ssh -i /c/Users/khj/Desktop/sparta_mykey2.pem ubuntu@52.78.3.42 )

아이피주소는 AWS인스턴스에서 아래 버튼 클릭해서 복사하기

위에 1줄 입력하면, 내가 산 리눅스 컴퓨터에 원격 접속을 한 것!

git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊기. 

많이 쓰는 리눅스 명령어 : 

[가장 많이 쓰는 리눅스 명령어]
리눅스는 윈도우 같지 않아서, 마우스로 조작 할 수 없다. 무조건 '쉘 명령어'를 통해 OS를 조작한다. 
TIP) 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나온다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
ls: 내 위치의 모든 파일을 보여준다.
cd .. : 나를 상위 폴더로 이동시킨다. 
pwd: 내 위치(폴더의 경로)를 알려준다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

 

2) git bash로 서버 컴퓨터 세팅하기

지금 현재 새 컴퓨터를 구매한 상태이므로 이런저런 세팅들(업그레이드, DB설치, 명령어 통일 등)을 해주기.

[세팅 해야 할 목록]
#1.  python3 -> python (python3 명령어를 python으로 사용할 수 있게 하는 명령어) - 0줄
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

#2.  pip3 -> pip 
sudo apt-get update (pip3 설치) -15줄
sudo apt-get install -y python3-pip (pip3 설치) - 5줄
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1 (pip3 명령어를 pip으로 사용하게 하는 명령어) 2줄

#3.  port forwarding (포트포워딩- 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어) - 0줄
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

위에 5줄 쭉 입력하고 세팅 하기

3. 파일질라로 서버연결 & 파일올리고 서버 실행하기

1) 파일질라에 내 아이피 정보 넣어서 서버 연결하기

파일질라로 서버 컴퓨터 위와 같이 열어주기

프로토콜: SFTP / 호스트 : aws에 있는 내 ip주소 / 포트 : 22 (정해져있는것) / 로그온유형 : 키파일

사용자 : ubuntu / 키파일 : 키페어파일(.pem)  - 연결!!!

왼쪽이 내 컴퓨터 / 오른쪽이 방금 산 컴퓨터

이렇게 서버 컴퓨터를 열어주고, 왼쪽에서 실행할 파일을 오른쪽으로 끌어다 놓으면 업로드 끝!

우측에서 원하는 폴더(sparta)클릭 후, 왼쪽의 원하는 파일(test.py) 끌어다 놓기

 

2) 팬명록 완성본을 EC2에 업로드하기

homework 폴더안의 static, templates폴더, app.py파일을 EC2인스턴스의  sparta폴더에 드래그 앤 드롭 한다. 

 

3) gitbash에서 명령어로 pip패키지 설치하기

파이참에서 file → setting → .. 에서 + 버튼 누르고 설치했던 작업을, 서버컴퓨터에서는 명령어로 하면 된다.

[패키지 설치 명령어]
pip install flask
pip install pymongo
pip install dnspython

필요한거 다 깔았으니 git bash에서 app.py 열어보자. 서버가 정상적으로 잘 열린다. 

이제 인터넷 주소창에 ip주소:5000 라고 쳐보자!  그런데 안열린다..ㅜㅜ 왜???

우리가 산 컴퓨터에서 5000번으로 접속할 수 있는 구멍을 안열어놔서 !!! AWS에서 5000포트 열어주자!!!

 

4) AWS에서 5000포트를 열어주기

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

EC2 관리 콘솔  → 보안 탭 → 보안그룹의 링크 클릭 → 인바운드 규칙 편집 → 규칙추가 : 

두 가지 포트를 추가(5000포트: flask 기본포트 / 80포트: HTTP 접속을 위한 기본포트) - Anywhere-IPv4 로 규칙저장!

 

5) 사이트 접속해보기 & nohup 설정하기 (SSH 접속을 끊어도 서버가 계속 돌도록)

주소창에 http://내아이피 입력하면 잘 작동된다. 모바일화면에서도 작동 된다.

그런데 Git bash 를 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않는다.

그러나 원격접속을 끊어도, 서버는 계속 동작해야하니까 아래와 같이 nohup을 설정하자. 

ctrl + c로 서버를 종료한 후, 아래의 명령어 입력

nohup python app.py &

이렇게 되면, git bash를 꺼도 서버가 잘 돌고 웹사이트가 정상 작동 한다.

 

6) 서버 강제종료하기 

생각해보니 마저 작업을 못했을때. 서버 끄고 ,서버에 드래그드롭한 파일 삭제하고, 작업완료한 파일 다시 올리고..!

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

이렇게 되면, 서버가 꺼지며 웹사이트도 작동 하지 않는다.

 

요약 - 파일질라로 서버 실행시키기
1) 파일질라에서 static, templates폴더, app.py파일 드래그앤드롭
2) gitbash에서 명령어로 pip패키지 설치하기 (flask, pymongo, dnspython)
3) AWS에서 5000포트를 열어주기
4) nohup 설정하기 
2,3번은 한번만 하면되니까, 나중에는 1,4 번만 하면 된다!!!!!

원래 쓰던 도메인 주소로 다른 프로그램을 실행시키고 싶으면,
AWS, 가비아는 손대지 않아도 된다. 이미 파일질라, 가비아에 ip연결되어있다.
실행중인 서버 중지시키고, 파일질라에서 파일바꾸고, 서버nohup설정만 하면 다른 프로그램이 실행된다!!!

 

4. 도메인 연결하기

도메인 구입/연결 도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭 유지비를 내는 것. 한국의 '가비아'라는 회사에서 도메인을 구입해보자.

구입 완료 한 후,

DNS관리 - DNS설정 - 호스트 이름에 @, IP주소에 IP주소를 입력! 

네임서버에 내 도메인-IP가 매칭되는 시간인 10분~30분 정도가 지나면 도메인주소가 정상 작동한다.

웹사이트에 도메인 주소입력후 확인!

내가 산 도메인으로 웹사이트가 정상 작동 한다.

5. og 태그 넣기

내가 만든 사이트를 카톡으로 공유했을때 예쁘게 나오도록 og 태그를 넣어보자.

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

- 이미 배포해서 서버가 돌아가고 있는데 수정하고(og태그 삽입) 다시 배포하는 법!

1. 다시 파이참에서 homework/index.html파일을 열고 <head> 안에 og태그 3줄 붙여넣기

2. 지금 돌아가고 있는 서버 끄기 ( gitbash에서 명령어 입력 --> ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill )

3. 파일질라 오른쪽 화면에서 내가 올린 파일들 삭제 & 수정한 파일 다시 드래그 앤 드롭 (따로 새로고침 안해도 됨)

4. 다시 nohup 명령어 입력하여 서버 열어주기. ( gitbash에서 명령어 입력 --> nohup python app.py & )

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    //이렇게 head태그 안에 내가 썸네일로 보여주고 싶은 제목, 내용, 이미지를 넣자.
    <meta property="og:title" content="뉴진스(New Jeans) 팬명록" />
    <meta property="og:description" content="응원 한마디 남기고 가세요!" />
    <meta property="og:image" content="https://cdn.mhnse.com/news/photo/202208/129866_120842_1941.jpg" />

- 이미지를 바꿨는데 이전 ogimage가 그대로 나올때 해결법

페이스북/카카오톡 등에서 처음 것을 한동안 저장해놓기 때문이다. 아래 링크 들어가서 초기화 눌러서 해결하자.

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