프로젝트를 서버에 올리기

• 순서
  AWS 서버 구매하기 > 서버 세팅하기 > flask 서버를 실행해보기 > AWS에서 포트 열어주기 > 원페이지쇼핑몰 업로드해보기 > 포트포워딩 > nohup 설정하기 > 도메인 구입하기 > og 태그
  (? 뭐이렇게 많아)

1. AWS 서버 구매하기

• 나중에 찾아서 하면 된다.
  *무료기간 1년이 지나기 전에 서버를 종료해야 결제가 되지 않는다.

1) EC2에 접속하기

Window: ssh가 없으므로, git bash라는 프로그램을 이용!
gitbash 실행 후 아래 내용 입력

ssh -i (받은키페어를끌어다놓기) ubuntu@AWS에적힌내아이피

<예시>

ssh -i /path/my-key-pair.pem [email protected]

<자주 쓰는 리눅스 명령어>

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

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

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

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

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

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

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

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

2. 서버 세팅하기

1) filezilla 설정
*5주차 강의자료 참고

2) 서버 환경 통일하기

*제공되는 <EC2 한방에 세팅하기> 파일을 파일질라로 업로드하고 git bash에서 코드를 입력하면 자동으로 세팅이 된다.

sudo chmod 755 initial_ec2.sh

./initial_ec2.sh

3. flask 서버를 실행해보기

1) flask 서버 실행해보기

*flask 서버 파일을 만들어서 filezilla로 EC2에 업로드하고 실행
<app.py 파일 코드>

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

if __name__ == '__main__':  
   app.run('0.0.0.0', port=5000, debug=True)

<실행>

# 실행
python app.py

-> flask 패키지가 없다는 에러가 난다

2) pip로 패키지 설치하기

pip install flask

3) 다시 실행해보기

크롬 브라우저 창에 아래와 같이 입력합니다.

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

*아직 작동하지 않음, AWS에서 추가 설정 필요

4. AWS에서 포트 열어주기

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

• EC2 서버(=가상의 내 컴퓨터)에서 포트를 따로 설정하는 것 외에도,
  AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있습니다.
  

→ 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 합니다.

• 일단, EC2 관리 콘솔로 들어갑니다. 그리고 보안그룹(영문: Security Group)을 눌러 들어갑니다. 여기선 launch-wizard-1 이라고 쓰여 있네요
  
• 해당 보안그룹을 클릭합니다.
  
• Edit inbound rules를 선택합니다.
  
• 세 가지 포트를 추가해봅니다.→ 80포트: HTTP 접속을 위한 기본포트→ 5000포트: flask 기본포트→ 27017포트: 외부에서 mongoDB 접속을 하기위한 포트

5. 원페이지쇼핑몰 업로드해보기

1) Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속하기

2) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드해봅니다.

• AWS의 MongoDB에 아이디와 비밀번호를 추가했으니, 우리의 pymongo에도 아이디와 비밀번호를 입력해주어야 합니다! 그래야 pymongo가 올바르게 DB에 접근할 수 있습니다.
  app.py 파일을 열어서,
  아래 처럼 가운데 한 줄을 바꿔주세요!

client = MongoClient('mongodb://test:test@localhost', 27017)

<다음과 같은 뜻>

client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)

• 파일질라에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드합니다.

3) 완성본을 실행해봅니다.

a. 실행하려고 시도하기

# home 디렉토리로 이동
cd ~

# 해당 폴더로 이동해서 아래 코드를 실행합니다.
python app.py

b. 에러가 나죠? 패키지를 설치하지 않았기 때문입니다.

# 설치하기
pip install pymongo

c. 다시 실행해봅니다

python app.py

d. 접속해보기
<브라우저에서 접속하기>

http://내AWS아이피:5000/

6. 포트포워딩
   :포트 번호 없애기(앞에서 이미 세팅됨)

• 지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
• http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.

7. nohup 설정하기

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

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

<서버 (강제)종료>

# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

<브라이저에서 접속>

http://내AWS아이피/

8. 도메인 구입하기
   -> 가비아에서 구매(자세한 내용은 강의자료 참고)

9. og 태그
   -> static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 <헤드>~</헤드> 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있습니다.

a. "내 사이트의 제목" 입력하기
b. "보고 있는 페이지의 내용 요약" 입력하기
c. 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기!
(사이즈 800x400인 이미지를 구글에서 검색!)

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

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

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

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

10. 마지막으로 마치며

내 웹사이트를 올린다는 거창한 목표와는 달리 조금 김빠지게 끝난 것 같다.
(물론 5주짜리 강의에서 이 정도를 만들 수 있게 한 것도 대단한 거라고 생각하지만)
강의를 다 듣고 이를 응용해서 스스로 하나의 페이지를 만드는 거라고 생각해서 그런 것 같다.
다시 한번 쭉 연습하면서 진짜 내 사이트를 만들어서 올려봐야겠다.