서버에 프로젝트 올리기
- 클라이언트의 요청에 항상 응답하려면 :
1 서버 컴퓨터가 계속 켜져 있어야 함
2 모두가 접근 가능한 공개 IP 주소로 접근할 수 있어야 함
-> AWS 클라우드 서비스에서 항상 켜놓을 수 있는 컴퓨터 EC2의 사용권 구매해 서버로 사용
AWS EC2 접속
- Git Bash 접속
ssh -i 키페어주소 ubuntu@인스턴스퍼블릭IPv4주소입력
(키페어 주소는 파일 끌어다 놓으면 자동 입력됨)- 연결 여부 질문에 yes 치면 컴퓨터에 원격 접속 성공!
< 기초 리눅스 명령어 참고 >
- mkdir 폴더명 : 폴더 생성
- ls : 현재 위치의 파일 목록 출력
- cd : 이동 명령어(cd 주소 : 해당 주소로 이동 / cd .. 상위 폴더로 이동)
- python 실행할파이썬파일.py : 파이썬 파일 실행
EC2 세팅
# 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- 각각의 명령어 차례로 실행
- 1문단 : python3을 python으로 명령 내리겠다
- 2문단 : pip 패키지 마법사 설치
- 3문단 : localhost:5000에서 5000을 떼도 접속 가능하게 하겠다(포스포워딩)
FileZila로 파일 전송
-
왼쪽 구역이 내 컴퓨터, 오른쪽 구역이 EC2
-
EC2 연결 :
1 filezila 사이트 관리자 버튼(파일 버튼 아래) 클릭 -> 새 사이트
2 프로토콜을 sftp로 변경
3 호스트 입력(인스턴스 주소), 포트 22로 입력
4 로그온 유형을 키 파일로 두고 사용자는 ubuntu로 입력, 키 파일 입력
5 연결 -
왼쪽의 내 컴퓨터에서 파일을 끌어다 오른쪽의 EC2에 놓으면 파일 전송이 완료된다.
-
서버에 올릴 프로젝트 폴더의 static 폴더, templates 폴더, app.py 파일을 전송
EC2에서 app.py 파일 실행
- Git Bash에서 app.py를 실행시 필요한 모듈 먼저 깔아준다
pip install flask
pip install pymongo
pip install dnspython- 세 모듈을 전부 깔았으면 python app.py 실행
EC2에서 5000 포트 열기
- '인스턴스주소:5000'에 프로젝트가 올라갔지만 EC2에서 5000 포트를 아직 열어주지 않아 접속 불가능
- AWS 사이트 인스턴스에서 보안 -> 보안 그룹 -> 인바운드 규칙 편집
1 규칙 추가 : 포트 번호 5000, 소스 Anywhere-IPv4
2 규칙 추가 : 포트 번호 80, 소스 Anywhere-IPv4 - 2개의 규칙을 추가 후 저장
- 이제 '인스턴스주소:5000' 주소에 접속하면 프로젝트가 뜨는 게 보인다
(5000 빼도 접속 가능)
주소에서 5000을 떼도 접속 가능한 이유(포트 포워딩)
- 프로젝트는 5000 포트에서 돌기 때문에 주소에 :5000을 항상 붙여줘야 한다
- http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결된다
- 80 포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩을 사용하여 주소(:80)로 접속하면 주소:5000로 연결되게 한다
nohup 설정하기
- 원격 접속을 종료해도 서버가 돌아가게 한다
실행 명령어 :
nohup python app.py &
종료 명령어 :ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
도메인 변경하기
-
DNS 설정 :
호스트 : @
값/위치 : 인스턴스 주소확인 후 저장
-
설정한 DNS 주소로 접속하면 프로젝트 사이트가 나오는 것을 볼 수 있다
메타(og) 태그 설정
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />-
바꾼 html 파일은 서버에 보낸 후 재시작하면 적용된다
-
카톡으로 주소를 공유하면 메타 태그로 적용한 제목, 이미지, 설명이 뜨는 것을 볼 수 있다
-
주의 : 카톡은 한 번 공유된 사이트는 정보를 저장해놓고 계속 쓰기 때문에 메타 태그를 바꿔도 반영되어 나오지 않는다. 아래 사이트에서 초기화하자
카카오톡 og 태그 초기화
페이스북 og 태그 초기화
결과물
페이지 방문 시 :
응원 남기기 :
카카오톡 공유 :
