✅ 5주차 수업 목표
1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '버킷리스트' 를 완성한다.
3. EC2에 내 프로젝트를 올리고, 자랑한다!
✅ 나의 버킷리스트
웹개발 5주차_나의 버킷리스트 프로젝트 연습
✅ 프로젝트 세팅 sparta → projects → bucket 폴더에서 시작! ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, static, templates 폴더, templates > index.html 파일, app.py 파일 생성 ✔ 패키지 설치하기 👉 Flask와 DB
sw-ing.tistory.com
✅ 준비하기
✔ 파일질라 다운로드
https://filezilla-project.org/download.php
✔ 가비아 접속하기
웹을 넘어 클라우드로. 가비아
그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브
www.gabia.com
✅ 배포하기
✔ AWS EC2 서버 사기
Ubuntu Server 18.04 또는 20.04 버전을 구매
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
✔ AWS EC2 서버 종료
1년 후 자동 결제 방지
인스턴스 상태 > 종료
✔ AWS EC2 서버 접속
접속할 컴퓨터의 22번 포트가 열려있어야 접속 가능
Mac OS : Mac은 ssh가 있어서, 명령어로 바로 접근 가능
▶ 터미널을 열기(spotlight에 terminal 입력)
▶ 방금 받은 내 Keypair의 접근 권한을 바꿔주기
sudo chmod 400 받은키페어를끌어다놓기
▶ SSH로 접속하기
ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
ex) ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20
Window : ssh가 없으므로, git bash라는 프로그램을 이용
▶ gitbash를 실행하고, 아래를 입력
ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내퍼블릭IPv4주소
ex) ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20
▶ Key fingerprint 관련 메시지가 나올 경우 Yes를 입력
▶ git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊기
리눅스는 다 명령어로 함
mkdir 👉 폴더 만들기
ls 👉 폴더 보기
cd 👉 이동하기
cd .. 👉 돌아가기
✔ EC2 한방에 세팅하기
# python3 -> python 👉 python3를 python으로 명령
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
# pip3 -> pip 👉 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
👉 80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
(localhast:5000에서 5000을 떼는 것)
✔ FileZilla 연결하기
[파일] 아래에 있는 [사이트 관리자] 아이콘 클릭
오른쪽 사이트에 원하는 파일을 드래그하면 끝!
Git bash에서 테스트 👉 'hello sparta!!' 출력 완료
만든 파일을 업로드할 때는 static, templates 폴더와 app.py를 드래그
No module named 'flask' 👉 flask가 안 깔려있음
👉 pip install flask 설치
👉 같은 방식으로 pip install pymongo(&dnspython)도 설치
python app.py 실행 후, 크롬에서 (퍼블릭 IPv4 주소):5000 누르면 안 뜸
👉 5000번으로 접속할 수 있도록 열어주어야 함
👉 [AWS] - [EC2] - [인스턴스] - [보안] - [보안 그룹] - [인바운드 규칙 편집] - [규칙 추가]
포트 범위 : 5000, 소스 유형 : Anywhere-IPv4
포트 범위 : 80, 소스 유형 : Anywhere-IPv4 - [규칙 저장]
HTTP 요청에서는 80포트가 기본이기 때문에 :80을 붙이지 않아도 연결이 됨
포트 번호를 입력하지 않아도 연결이 되도록 하기 위해,
포트포워딩(port forwarding)을 사용하여 80포트로 오는 요청을 5000포트로 전달해주는 것!
✔ nohup 설정하기
현재, Git bash를 종료하면(=ssh 접속을 끊으면) 프로세스가 종료되며 서버가 돌아가지 않음
원격 접속을 종료하더라도 서버가 계속 돌아가게 하는 법!
Ctrl + C 👉 git bash 접속 종료 👉 아래 명령어 실행
nohup python app.py &
✔ 강제종료하기
👉 아래 명령어 실행
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
FileZilla에서 static, templates, app.py를 옮긴 뒤,
Git bash에서 nohup으로 실행
수정이 필요하면 강제종료 후, 재실행
✅ 도메인 연결하기
✔ DNS 설정
웹을 넘어 클라우드로. 가비아
dns.gabia.com
이제 내 도메인으로 접속 가능!
✅ og 태그
✔ og:image, og:title, og:description
내 프로젝트를 카톡/페이스북/슬랙 등에 공유했을 때 예쁘게 나오도록 꾸며주는 것!
각 프로젝트 html의 <head>~</head> 사이에 아래 내용을 작성하면 og태그 사용 가능
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
✔ 태그 초기화하기
이미지를 바꿨는데 이전 ogimage가 계속 나올 때,
페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
공유 디버거 - Meta for Developers
공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.
developers.facebook.com
카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
카카오계정
accounts.kakao.com
'웹개발 > 수업' 카테고리의 다른 글
| 웹개발 5주차_나의 버킷리스트 프로젝트 연습 (0) | 2023.03.03 |
|---|---|
| 웹개발 4주차 개발일지_Sparta Coding Club (0) | 2023.03.02 |
| 웹개발 4주차_스파르타피디아 프로젝트 연습 (0) | 2023.02.27 |
| 웹개발 4주차_화성땅 공동구매 프로젝트 연습 (0) | 2023.02.27 |
| 웹개발 3주차 개발일지_Sparta Coding Club (0) | 2023.02.25 |