https://velog.io/@rlafbf222
<항해 99 사전 준비 기간>
웹 개발 종합반 개념 정리
5주차!!
-
1~3강. 개괄
1) 파일질라 설치, 가비아 도메인 구입
2) 프로젝트 생성 (디렉토리에 templates, static 폴더와 app.py)
3) 패키지 설치 (flask, pymongo, dnspython) -
4강. 버킷리스트 – POST 연습 (기록하기)
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {
'num':count,
'bucket': bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})function save_bucket() {
let bucket = $('#bucket').val()
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}- 5강. 버킷리스트 – GET 연습 (보여주기)
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})function show_bucket() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response["buckets"]
console.log(rows)
for (let i = 0; i < rows.length; i ++){
let num = rows[i]['num']
let bucket = rows[i]['bucket']
let done = rows[i]['done']
let temp_html = ``
if (done == 0){
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
}else{
temp_html = `<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}- 6강. 버킷리스트 - POST연습 (완료하기)
1) 주의할 점: ajax에서 넘어온 num_receive 값은 문자열로 넘어온다. 따라서 int 타입으로 형변환 해줘야 한다!!
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = int(request.form['num_give'])
db.bucket.update_one({'num':num_receive}, {'$set': {'done':1}})
return jsonify({'msg': '임무 완료!'})function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}-
7~8강. 내 프로젝트를 서버에 올리기
1) 언제나 요청에 응답하려면,
2) 컴퓨터가 항상 켜져 있고 프로그램이 실행되어 있어야 하고,
3) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.
4) 즉, 서버 = 컴퓨터 라고 생각하면 편하다.
5) AWS 인스턴스 중지 = 컴퓨터 끄기 / 인스턴스 종료 = 컴퓨터 반납
6) 따라서 새로 만들려면 인스턴스 종료 후 새로 만들기
7) Git bash 키고 아래 명령어 입력
8) ssh -I /c/users/Jun_Kim/Desktop/hjkim_mykey.pem ubuntu@3.37.129.56
9) ubuntu 뒤의 IP는 구입한 인스턴스의 IPv4 주소
10) 엔터 후 yes 입력하면 우리가 구매한 컴퓨터에 원격 접속한 상태가 된다.
11) mkdir 은 폴더 생성
12) ls 는 현재 위치에서 볼 수 있는 폴더들의 리스트업 출력
13) cd 는 해당 위치로 이동 (단, ‘..’을 붙이면 밖으로 나가기) -
9강. 서버 세팅하기
1) EC2 한방에 세팅하기 명령어를 차례대로 입력해준다.
2) file zilla를 이용해서 내가 만든 서버와 연동하고 (프로토콜은 sftp 로그온은 key file에 pem 파일넣어준다. User는 ubuntu
3) 연결 시 내가 만든 서버가 오른쪽에 뜬다.
4) 이 후 드래그해서 간단히 넣어주면 끝!
5) test.py 넣어주고 해당 폴더로 이동하여 python test.py 입력 시 hello sparta!! 출력 확인 -
10강. Flask 서버를 실행해보기
1) 파일질라에서 homework 폴더에 있는 app.py, templates, static 옮기기
2) Git bash에서 pip install flask, pymongo, dnspython, certifi 설치하기
3) 주소는 3.37.129.56:5000
4) 하지만 아직 포트 개방을 안해줘서 접속 불가
5) AWS 인스턴스에서 아래 인바운드 보안 규칙 편집 후 2개 추가 생성
6) 하나는 5000포트 허용 하나는 80(디폴트) 포트 허용
7) 우리는 포트포워딩 명령을 내렸기 때문에 포트번호를 떼고 주소를 입력해도 80으로 들어와서 다시 5000으로 진입한다. 따라서 포트번호를 떼도 접속 가능하다! -
11강. Nohup 설정하기
1) 현재 git bash를 종료하면(SSH 접속을 끊으면) 서버도 같이 종료됨
2) 이를 방지하기 위해 SSH 접속이 끊어져도 서버가 돌아가는 명령어 추가!!
3) nohup python app.py &
4) 그러나 이제 끄는 방법을 모름!!! 강제 종료 명령어
5) ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
6) 정리하자면 파이참 IDE에서 작업을 완료하고 -> 이를 파일질라를 통해 static, templates, app.py를 옮겨 두고 이를 git bash에서 nohup으로 키면 된다!!
7) 그러다가 수정 사항이 생긴다면 수정 사항 고친 후 다시 파일질라에 삭제 후 넣어줘서 재 실행하면 된다. -
12강. 도메인 연결하기
1) 가비아에 접속하기
2) 내가 구매한 도메인의 DNS 설정
3) 호스트는 @
4) 값/위치에 인스턴스 IPv4 주소 숫자값만 입력하고 확인 저장
5) 완료! 해당 도메인 사용 가능 -
13강. Og 태그
1) 카톡 같은 곳에 공유할 때 뜨는 이미지 제목 설명 등등
2) <meta property="og:title" content="내 사이트의 제목" />
3) <meta property="og:description" content="보고 있는 페이지의 내용 요약" />
4) <meta property="og:image" content="이미지URL" />
5) 위 코드를 head에 넣어주기!- 14강. 숙제: 내가 배포한 url 제출하기!
URL: http://hjkim-sparta.shop/
+) 클라이언트/서버 구조
