스파르타 코딩 5주차
**[수업 목표]**
1. Flask 프레임워크를 활용해서 API를 만들 수 있다.
2. '마이 페이보릿 무비스타'를 완성한다.
3. EC2에 내 프로젝트를 올리고, 자랑한다![무비스타] - GET연습(보여주기)
- 우리가 만들 기능은
영화인 정보를 카드로 보여주기(Read) - 화면에 어떤 데이터가 어떤 부분에 보여지는지 영화인 카드 화면 코드를 보며 분석해보기.
- 영화인 이름
- 영화인 이미지 : 이미지 src 속성
- 좋아요 개수
- 최근 작품 내용이 들어가는 부분
- index.html을 크롬에서 실행시켜 크롬 개발자도구 - 검사하기(Inspector)로 어떤 요소에 어떤 데이터가 보일지 분석
@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}) 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)
}
}
});
}
POST 연습 (좋아요 +1)
app.py
@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': '좋아요 완료!'})index.html
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
);
}
POST연습(삭제하기)
클라이언트에서 받은 이름 (name_give)으로 영화인을 찾고, 해당 영화인을 삭제
@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': '삭제 완료!'})function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
내 프로젝트를 서버에 올리기
-"웹서비스 런칭" 에 필요한 개념 소개
- 웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시
- 언제나 요청에 응답하려면,
1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야함. - 서버는 그냥 컴퓨터이기 때문에 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있음.
- 우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용할 예정.
https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2
1년동안 t2.micro사이즈에 인스턴스에 대해서 하나 계속 켜둘수 있음!
1년뒤 반납할때는 인스턴스 종료 잠깐 꺼둘때는 인스턴스 중지 둘이 헷갈리않도록 주의!
EC2에 접속하기
1) terminal 실행
2) sudo chmod 400 받은키페어를끌어다놓기
3) ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피
간단한 리눅스 명령어 연습하기
- 리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작한다. (일종의 마우스 역할)
ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)원페이지쇼핑몰 업로드해보기
1) Robo3T를 이용해서, "내 컴퓨터에서"→"서버에 있는 mongoDB"에 접속하기
2) create 클릭하기
3) 접속 정보를 세팅
4) 상단 Authentication 탭을 클릭하고 perform authentication 체크박스를 클릭. 생성한 계정의 아이디와 비밀번호를 입력하고, 'save'를 클릭.
5) pymongo계정에 접속해서 client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017) 설정하기
6) 원페이지쇼핑몰 완성본을 filezilla로 EC2에 업로드
7) fluffybonnie.shop 접속!
og 태그 만들기 (예시)
index.html 아래에 "og:title" "og:description" "og:image" 추가하기
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />SSH 접속을 끊어도 서버가 계속 돌게 하기 - nohup설정하기
-Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않음. 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다
nohup python app.py &-서버 종료하기: 강제종료하는 방법
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]-다시 켜기
nohup python app.py &SSH 접속을 종료한 후 다시 접속해보기
