웹개발 종합반 (5-1~5주차숙제)
[무비스타] 작업
기본세팅 - app.py/templates/static/index.html
+ flask / pymongo /bs4 / requests 설치
1. 데이터 쌓기
- 파이썬 파일 만들어서 크롤링코드 복붙(나중에 직접해보기)
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
# DB에 저장할 영화인들의 출처 url을 가져옵니다.
def get_urls():
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rpeople.nhn', headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
trs = soup.select('#old_content > table > tbody > tr')
urls = []
for tr in trs:
a = tr.select_one('td.title > a')
if a is not None:
base_url = 'https://movie.naver.com/'
url = base_url + a['href']
urls.append(url)
return urls
# 출처 url로부터 영화인들의 사진, 이름, 최근작 정보를 가져오고 mystar 콜렉션에 저장합니다.
def insert_star(url):
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
name = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info.character > h3 > a').text
img_url = soup.select_one('#content > div.article > div.mv_info_area > div.poster > img')['src']
recent_work = soup.select_one(
'#content > div.article > div.mv_info_area > div.mv_info.character > dl > dd > a:nth-child(1)').text
doc = {
'name': name,
'img_url': img_url,
'recent': recent_work,
'url': url,
'like': 0
}
db.mystar.insert_one(doc)
print('완료!', name)
# 기존 mystar 콜렉션을 삭제하고, 출처 url들을 가져온 후, 크롤링하여 DB에 저장합니다.
def insert_all():
db.mystar.drop() # mystar 콜렉션을 모두 지워줍니다.
urls = get_urls()
for url in urls:
insert_star(url)
### 실행하기
insert_all()- Robo3T에서 dbsparta-collections-mystar 확인
2. 뼈대복붙
-localhost:5000으로 확인
3. GET연습 - 보여주기
(1)클라이언트와 서버 연결 확인하기
app.py : 주소는 /api/list , html에서 showStar함수에서 받는다
@app.route('/api/list', methods=['GET'])
def show_stars():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': 'list 연결되었습니다!'})
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
alert(response['msg']);
}
});
}
(2) 서버
-데이터를 내려줘야함 **like의 역순으로!!(큰순서대로)
-클라이언트로부터 받을데이터x
-pymongo의 정렬기능 - 구글링 - sort
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
return jsonify({'movie_stars': movie_star})
**이건그냥 임의값임(아무이름이나 ㅇ)
return jsonify({'movie_stars': movieeee})
(3)클라
- showstar함수에서 let mystar 확인 (response-console)
- for문으로 돌리기
success: function (response) {
let mystars = response['movie_stars']
for (let i = 0; i < mystars.length; i++) {
let name = mystars[i]['name']
let img_url = mystars[i]['img_url']
let recent = mystars[i]['recent']
let url = mystars[i]['url']
let like = mystars[i]['like']-temp_html =`` 붙이고 내용수정 ${}
-append
-기존에있던자료(카드)는삭제
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
let mystars = response['movie_stars']
for (let i = 0; i < mystars.length; i++) {
let name = mystars[i]['name']
let img_url = mystars[i]['img_url']
let recent = mystars[i]['recent']
let url = mystars[i]['url']
let like = mystars[i]['like']
let temp_html = `<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="${img_url}"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
<p class="subtitle is-6">${recent}</p>
</div>
</div>
</div>
<footer class="card-footer">
<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>`
$('#star-box').append(temp_html)
}
}
});
}
(4)확인
robo3T에서 like 우클릭->eddit doc -> like를 수정하고 사이트새로고침 -> 반영되면 성공
4. POST연습(1) - 좋아요+1
(1) 서버-클라
서버
@app.route('/api/like', methods=['POST'])
def like_star():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'like 연결되었습니다!'})
클라
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {sample_give:'샘플데이터'},
success: function (response) {
alert(response['msg']);
}
});
}
(2) 서버
- 이름받기 name_give
- 이름찾기 - 현재의 좋아요 - 좋아요+1 - 업데이트
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name': name_receive})
current_like = target_star['like']
new_like = current_like + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
return jsonify({'msg': '좋아요 완료!'})
(3) 클라
-이름주기 data값 수정
-새로고침
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
(4)확인
*서버끊기면 다시run해주면됨
5. POST연습(2) - 삭제
(1)서버-클라
서버
@app.route('/api/delete', methods=['POST'])
def delete_star():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'delete 연결되었습니다!'})
클라
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {sample_give:'샘플데이터'},
success: function (response) {
alert(response['msg']);
}
});
}
(2) 서버
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
db.mystar.delete_one({'name': name_receive})
return jsonify({'msg': '삭제 완료!'})
(3)클라
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
(4)확인
6. 프로젝트를 서버에올리기
언제나 요청에 응답하려면,
1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야해요.
= 클라우드(인터넷환경)의 서버를 사서 코드를 올려서 접속하게한다
---------
- [열 걸음 더 🏃] IP 주소와 포트
- 사실 우리가 접속하는 컴퓨터는 숫자로 되어있는 주소(IP 주소)가 붙어있어요. 우리가 아는 URL 은 우리가 알아보기 쉽게 하는 등의 이유로 IP 주소를 알파벳으로 바꾼 거에요. 이렇게 변환해주는 시스템을 DNS 라고 합니다.
- IP 주소(줄여서 IP라고 부릅니다)
- : 컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소라고 생각하면 됩니다. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호입니다. 서버는 하나의 주소를 가지고 있습니다.
- 포트(port)
- : 하나의 IP에 여러 포트가 있습니다. 하나의 포트에 하나의 프로그램을 실행시킬 수 있습니다.
----------------
7. AWS 서버구매 (*1년간만무료)
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
-우측 상단에 <서울>인지 체크하기
-인스턴스 -> 인스턴스시작하기 -> 3번째 Ubunt server 18.04~~선택 (리눅스OS-오픈소스)
-t2.micro 선택 - 시작하기 -> 새 키 페어생성 -> 시작하기
**1년후에는 돈나가니까 우클릭->인스턴스 종료 누르면 됨 (중지는 컴퓨터끄는거)
-윈도우는 Gitbash/맥은 terminal 켜기 : 입력
ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피 - yes- 맨아래에 우분투@ip어쩌고 나오면 완료
**리눅스명령어 - 쉘명령어를 통해 OS조작
ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)
*팁! 리눅스 커널에서 윗화살표를 누르면 바로 전에 썼던 명령어가 나옵니다.
8. AWS 서버세팅
filezilla -> 왼쪽 아이콘 -> 아래와같이 입력
좌측이 내컴퓨터 / 우측이 클라우드 컴퓨터
test파일 옮겨서 확인해보기
-클라우드컴퓨터에 몽고디비 등 프로그램 설치하기
**EC2 한번에 세팅하기 (파일) -> 명령어입력
sudo chmod 755 initial_ec2.sh
./initial_ec2.sh
**서버에 문제가있으면 꼬이지말고 그냥 ec2에서 종료후 다시들어가기
9. flask서버실행
homework폴더 열기 -> 다운받은 test.py 열기 -> flask코드 복붙
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)-filezilla에서 옮겼던 파일2개삭제하고 test.py를 app.py로 이름바꿔서 옮기기
-gitbash에서 flask깔아주기 (똑같이 pymongo도 설치 pip install pymongo)
pip install flask
-다시 실행
python app.py
**그래도 연결은안된다! 포트설정필요
10. AWS포트열기
ec2 페이지->보안 -> 보안규칙 수정
- 세 가지 포트를 추가해봅니다.→ 5000포트: flask 기본포트
- → 27017포트: 외부에서 mongoDB 접속을 하기위한 포트
- → 80포트: HTTP 접속을 위한 기본포트
*연결가능 http://내아이피:5000
gitbash에서 계속 작동중이어서 명령어인식x
Ctrl+C누르면 종료됨
11. 쇼핑몰업로드하기
(1) Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속하기
create -> address에 내IP주소입력 -> 상단 authentication -> perform - >
user name : test / password : test ->connect
**아이디비번 수정하려면 initial파일 파이참에 열어서 수정하고 실행하면됨(선택)
(2) mongodb 세팅바꿔주기 + 파일업로드
app.py 코드에 입력 (기존 client~는 주석처리)
client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)
파일질라에서 homework 폴더 째로 EC2 인스턴스의 home/ubuntu 폴더에 업로드 -> gitbash에서 python app.py 입력
12. 포트포워딩
(1) 포트 번호 떼기 - initial파일에서 이미 작업되어있음
(2) 포트 번호 없애기
- 지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
- http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
- 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
- 리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.
13. nohup설정
1) 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다
nohup python app.py &
2) 서버 종료하기 - 강제종료하는 방법 (백스페이스 밑에꺼 shift누르고임!!! ||)
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]3) 다시켜기
nohup python app.py &
14. 도메인구입
가비아 - DNS관리 - 레코드수정 - 호스트:@ ip주소:내ip값 - 완료
vwlswnv.shop로 접속되는지 확인 (시간소요)
15. og태그
title태그 밑에 og기본코드 넣기
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장 (구글 800x400 사이즈검색)
(1) gitbash에서 서버끄기
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값](2) 파일질라 기존파일 모두삭제
(3) 수정된 새 파일 업로드
(4) 서버실행
nohup python app.py &
** 수정한 이미지 반영하려면 수동초기화가필요
- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og
16. 5주차숙제
없음~
나 파이썬자꾸오류나서 나중에 맥북오면 다시첨부터 작업해봐야지~~~ㅎㅎ
'코딩' 카테고리의 다른 글
| function sum(a, b) (0) | 2022.11.23 |
|---|---|
| 아키텍처 (0) | 2022.11.06 |
| 웹개발 종합반 5주차 공부일지 (0) | 2022.11.05 |
| 비개발자를 위한, 웹개발 종합반 4주차 (0) | 2022.11.05 |
| 스파르타코딩클럽 웹개발 종합반(3주차) (0) | 2022.11.03 |
