[스코클] 비개발자를 위한 웹개발 종합반-5주차

take-away

1. 지금 상황에서는 코드를 외워서 쓰는 것이 아니라, 다른 코드를 보고 이해하고 따라 쓸 수 있는 실력을 쌓아야 함

2. 지금까지 배운것을 여러번 반복숙달시키기

3. 배운것들을 조금씩 수정해보면서 새로운 기능 익히기

 

* 질문: 코드 똑같이 했는데 명령이 안먹힐 때가 있다... 왜 그런지...? 껏다 키니까 되긴 함...

* 질문2: python 코드를 수정할때마다, filezilla 를 통해 업뎃을 따로 해야 하는지? yes

 

1. 5주차

1.1. 5주차 할것

- 버킷리스트 프로젝트 (복습)

- 팬명록 배포하기

1.2. 설치할 것

- 파일질라(filezilla): 클라우드 환경에 파일을 보낼 수 있는 프로그램

- 가비아: 도메인 구매

 

2. 버킷리스트

2.1. Post 요청: 버킷리스트 기록 API (Create->Post)

2.1.1. 요청정보: url=/bucket, 요청방식 = post

2.1.2. 클라(ajax) -> 서버 (flask): bucket

2.1.3. 서버(flask) -> 클라(ajax): 메시지를 보냄 (기록 완료!)

2.1.4. 서버에서: 번호를 만들어 함께 넣어주는 것. 그래야 업데이트 가능 (일종의 인덱스 같은거?)

 

2.2. Get 요청: 버킷리스트 조회 API (Read->Get)

2.2.1. 요청정보: url= /bucket, 요청방식 = get

2.2.2. 클라(ajax) -> 서버(flask): (없음)

2.2.3. 서버(flask) -> 클라 (ajax): 전체 버킷리스트 보여주기

 

2.3. Done요청: 버킷리스트 완료 API (Update->post)

2.3.1. 요청정보: url= /bucket/done, 요청방식 = post

2.3.2. 클라(ajax) -> 서버(flask): num (버킷넘버)

2.3.3. 서버(flask) -> 클라 (ajax): 메시지를 보냄 (버킷완료!)

 

3. 내프로젝트를 서버에 올리기

3.1. 웹서비스 런칭에 필요한 개념들

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

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

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

3.1.2. 서버 = 컴퓨터: 외부접속이 가능하게 설정한 다음, 내 컴퓨터를 서버로 사용 할수 있음

3.1.3. But, 클라우드 서비스를 통해 동일하게 할 수 있음 (외부 컴퓨터를 한대 사는 개념, EC2사용권 구입)

 

4. AWS 서버 구매하기 (https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2)

- AWS에서 서버용 컴퓨터 (리눅스)를 구매하는 개념

- 한번에 서버 하나까지는 공짜

- 새로운 서버를 사용하려면 기존 서버 종료 후 새로 시작하면 공짜

4.1. 우리가 산 컴퓨터에 원격 접속 

- 인스턴스 시작 - 이름 설정 - Ubuntu22.04 - 인스턴스 생성 - keypair 다운받기

- 컴퓨터에서 Git bash (맥의 경우 spotlight - terminal) 켜기

- 맥: sudo chmod 400 keypair 복붙 '엔터' 맥 비번입력

- 윈도우: ssh -i keypair 복붙 ubuntu@ 인스턴스 내 퍼블릭 ipv4주소 복붙 '엔터' 후 yes '엔터'

4.2. 리눅스는 명령어로 모든 것을 함

- mkdir sparta: 스파르타라는 폴더를 만들어라

- ls: 현위치에 어떤 폴더가 있는지 보자

- cd sparta: sparta라는 폴더 안으로 들어가보자

- cd ..: sparta 폴더에서 나와서 상위 폴더로 이동해보자~!

- python test.py: test.py 라는 파이썬 파일을 열어라

- pip install flask

- pip install pymongo

- pip intall dnspython

- pip install 

 

5. 서버 세팅하기: 컴퓨터를 샀으니 세팅, 업그레이드, 명령어 통일 등등을 해야 함. 

# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
-> python3 말고 python 만 치고 명령어를 내려~
# 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
-> local:host5000 에서 뒤에 5000을 떼는 역할

6. Filezilla 를 통해 내가 쓰는 컴퓨터에 있는 파일들을 내가 산 서버로 옮기기

- 왼쪽은 내가 산 컴퓨터, 오른쪽은 서버

- 서버 열기: 왼쪽 위에 '사이트 관리자 열기' 아이콘 클릭 - 새 사이트  - 이름 설정 - 프로토콜: SFTP~ - 호스트: AWS에서 퍼블릭 IPv4 복붙 - 포트: 22 - 로그온 유형: 키파일 - 사용자: ubuntu - 키파일: keypair 다운받은거 선택 - 연결누르기

- 왼쪽에 있는 내컴퓨터에서 오른쪽에 있는 서버 컴퓨터로 내가 원하는 파일 옮기기 (클릭&드래그) - app.py, templates, static 세가지 복붙하기

7. Flask 서버를 실행해보기

7.1. 각종 라이브러리 설치 pip install 원하는 라이브러리

- 퍼블릭 아이피 뒤에 :5000 붙이기 - localhost:5000의 그 5000

- 

7.2. but 그 전에 AWS에 가서 5000 통로를 만들어 줘야함. 

- 인스턴스 - 보안 - 보안그룹 - 인바운드 규칙 편집 - 규칙추가 - 포트범위에 5000 입력 - 소스: anywhere ipv4 - 규칙 추가 하나더 - 포트범위 80 - 소스:anywhere ipv4 - 저장

- ipv4 주소:5000 으로 접속하면 해당페이지로 접속됨

- 위 주소에서 ':5000'을 빼고 연결해도 접속 가능 (위에서 5000을 떼고 해도 되는 명령어를 넣었기 때문)

8. 원격접속 (git bash)을 종료하더라도 서버가 계속 돌아가게 만들기

- 원격접속 한 상태에서 해당 폴더로 들어가기

- nohup python app.py & '엔터'

*git bash 에서 화살표 위 키를 누르면 최근에 쳤던 연결이 나옴.

9. 강제종료하기

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

 

10. 도메인 연결하기

- 도메인 구매 한 홈페이지에서 dns설정 (aws에서 ipv4 찾아 붙여넣기)

 

11. og태그: html 파일에 붙여넣기

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