5주차.
5주차는 마지막으로 버킷리스트 프로젝트를 만들면서 복습을 한 번 더 해보고,
숙제로 만들었던 팬명록을 클라우드 환경에 배포해볼 예정.
배포된 url 에 <meta> 태그를 넣어서, 공유했을 때도 깔끔하게 미리보기로 보이도록 작업해볼 거야.
—설치해야 할 것들—
FileZilla.
—가입해야 하 것들—
가비아. 가입해서 도메인을 구입해야 함.
Filezilla란?
- 클라우드 환경에다가 우리가 작업한 url을 업로드 할거야. 쉽게 얘기하면, 파일 질라는 클라우드에 쉽게 파일을 보낼 수 있도록 도와주는 프로그램.
——
https://filezilla-project.org/download.php => 파일질라 다운로드 링크
——
=> download FileZilla client 클릭하고 가장 왼쪽 것을 다운로드. 다운로드 된 것을 압축 해제. 나는 바탕화면에 클라이언트를 위치시켰음.
가비아 가입하기. 도메인 구입을 위해서.
——
——
=> 로그인 후, 우측 상단 닉네임 아래 My가비아 클릭. 이용 중인 서비스에 현재 내가 구매한 도메인이 나와있어. 처음에는 당연히 아무것도 없지.
https://www.gabia.com/ 대문에서 화면 중앙에 원하는 도메인 입력. 나는 ‘msdou46-94’
-> 추천 도메인에 msdou46-94.shop 선택. 500원 짜리. 선택하고 우측에 ‘신청하기’ 클릭.
-> 등록 비용 기간은 ‘1년’ 으로 설정. 나머지 개인 정보 입력하고, 아래쪽은 건들 거 없어. 다음 단계 클릭. 그리고 무통장 입금으로 550원에 구입. 도메인 등록 완료.
-> 입금이 완료되면 구입한 도메인이 정식으로 등록되는 데에 시간이 좀 걸려.
__________________________________
버킷리스트 프로젝트 시작.
우선 기본 셋팅부터.
파이참 상단 메뉴 ‘파일’ -> 새 프로젝트 -> 위치는 projects-bucket -> 두 번째 위치 디렉토리 마지막에 venv 확인, 인터프리터 버전 3.8 확인.
-> 웰컴 스크립트 생성 체크 해제. -> 생성
새 프로젝트 생성 후 -> bucket 바로 아래에 ‘static’, ‘templates’ 디렉토리 경로 생성. -> templates 안에 index.html 생성
-> bucket 바로 아래에 app.py 생성.
그 다음으로 패키지 설치 -> 파이참 상단 매뉴 파이참-설정(preferences) -> 좌측 카테고리 중 ‘프로젝트:bucket ‘ -> Python 인터프리터 선택
-> 패키지 목록 좌측 상단 + 클릭 -> 패키지 설치.
=> flask, pymongo, dnspython, certifi 총 4개의 패키지 설치.
뼈대 준비하기.
——
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://msdou46:klh17dj5a8@cluster0.n5ofnw1.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCaFile=ca)
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(기록) 연결 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST(완료) 연결 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
——
=> app.py 뼈대. index.html 뼈대는 코드스니펫에서.
구현할 기능은 총 세 가지. 1) 버킷 작성 후 post 2) DB에서 버킷 리스트 가져와서 보여주기. 3) ‘완료’ 버튼 클릭 시 버킷이 완료됨.
- 버킷 작성 후 post
——
<!—html—>
function save_bucket(){
let bucket_give = $('#bucket').val();
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket_give},
success: function (response) {
alert(response["msg"])
window.location.reload();
}
});
}
# app.py
@app.route("/bucket", methods=["POST"]) # 버킷 리스트를 기록했을 때 데이터를 보내는 주소.
def bucket_post():
bucket_receive = request.form['bucket_give']
print(bucket_receive)
bucket_list = list(db.bucket.find({}, {'_id':False}))
count = len(bucket_list) + 1 # len() 은 괄호 안에 인자로 줄 배열의 index 수를 세서 return 해줘. js의 .length처럼
doc = {
'num': count,
'bucket': bucket_receive,
'done': 0
}
db.bucket.insert_one(doc)
return jsonify({'msg': 'bucket 등록 완료!'})
——
=> num은 일종의 id값으로 사용할거야. 버킷 데이터들을 구분하기 위해. 그래서 현재 버킷리스트의 갯수의 총 수 +1 을 해서 num을 기록해줄거야. 순차적으로 쌓이겠지.
done 은 지금 이 버킷이 완료가 되었는지 안되었는지 구분하기 위해. 완료가 되지 않은 상태라면 0, 완료된 상태라면 1.
- Get 요청을 받아 버킷 리스트를 보여주기.
——
<!— html —>
$(document).ready(function () {
show_bucket();
});
function show_bucket(){
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
console.log(response['msg']);
let bucket_list = response['result']
for(let i=0; i<bucket_list.length; i++) {
let bucket = bucket_list[i]['bucket'];
let num = bucket_list[i]['num'];
let done = bucket_list[i]['done'];
let temp_html = ``;
if(done === 0) {
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<button onclick="done_bucket(${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);
}
}
});
}
#app.py
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'msg': 'GET 연결 완료! bucket_list 가져오기 성공!', 'result': bucket_list})
——
=> 우선 num, bucket, done 값을 전부 다 받아와.
num은 나중에 ‘완료’ 버튼을 눌렀을 시, 어떤 버킷이 완료 된건가 구분하기 위해 고유값을 알기 위해서 미리 데이터를 매개변수의 형태로 저장해 둬.
* vue 나 리액트를 사용한다면 프론트에 마치 간이 DB를 만들듯 id값을 저장해둘 수 있어. 허나 지금은 그렇지 않으니 매개변수라는 형태로 저장해두는 것.
done의 경우, 0이면 이 버킷이 아직 완료가 되지 않았으니 num 값과 함께 완료 버튼도 함께 html 에 추가.
done이 1이면, 이미 이 버킷은 완료가 되었으니 css로 버킷의 가운데에 줄을 긋고 버튼은 없는 채로 html 추가.
- ‘완료’ 버튼을 누를 시 해당 버킷의 done 값을 1로 수정하고, 페이지를 새로고침하여 다시 get 요청-버킷 리스트를 가져오기.
——
<!— html —>
function done_bucket(num){
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
});
}
#app.py
@app.route("/bucket/done", methods=["POST"]) # 프론트에서 버킷 리스트 '완료' 를 눌렀을 때 업데이트.
def bucket_done():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷을 완료하였습니다!'})
——
=> 클라이언트에서 post 요청을 보낼 때, done_bucket 함수를 호출할 경우 인자로서 get-bucket_list 요청 때 미리 저장해 둔 num의 값을 함께 보낸다.
app.py 에서는 num의 값을 받아서 int로 한 번 파싱을 해준 다음에 update 문을 실행시킨다.
num 값은 클라이언트에서 보낼 때는 숫자형으로 보내지지만, 서버와 통신을 하는 과정에서 string으로 타입이 변하기 때문에
서버에서는 이를 다시 원래의 형태인 숫자형으로 되돌려서 사용해야 한다.
________________________________________________________________________________________________
완성된 프로젝트를 인터넷 환경에 배포해보자.
로컬 코딩은 이로서 완료. 마지막으로, 이렇게 만든 로컬 환경을 인터넷에 직접 등록해보는 작업을 해보자.
이는 ‘내 프로젝트를 서버에 올리는 작업’ 이며, ‘웹서비스 런칭’ 이라고 부른다.
로컬 개발 환경에서는 본인의 컴퓨터가 꺼지면 서버도 같이 내려간다.
실무에서는 클라우드 컴퓨터를 빌려서, 클라우드 환경에 서버를 업로드 시켜 유지한다.
몽고DB는 클라우드 DB 환경을 빌린 것. 그렇기에 트래픽 대응도 편해져. 서버도 마찬가지. 이미 존재하는 클라우드 컴퓨터를 빌려서 서버를 업로드해 두면
트래픽 대응도 쉽고 서비스를 붙이기도 쉬워져. 무엇보다 내 컴퓨터를 계속 켜놓고 있지 않아도 되고….
AWS 에서 클라우드 컴퓨터를 빌려서, 그 컴퓨터를 켜고, 그 컴퓨터 안에 서버를 업로드하여 실행시킬 거야.
AWS에서 구매하는 클라우드 컴퓨터는 리눅스OS 를 가지고 있어. 리눅스는 오픈소스이며, 대부분의 회서에서 컴퓨터를 빌려 쓸 때는 리눅스가 깔린 컴터를 빌려.
AWS 에서 EC2 라는 서버를 구매할거야. 다음은 EC2 콘솔페이지.
——
https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2
——
AWS 홈페이지 로그인. https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2#Home:
-> 좌측 하단 언어 한국어. 우측 상단 지역 서울.
-> 좌측 카테고리 ‘인스턴스’ -> 하위 ‘인스턴스’ 접속. -> ‘인스턴스 시작’ 버튼 클릭
-> 애플리케이션 및 OS 이미지(Amazon Machine Image) 란에서 Ubuntu Server 22.04 LTS(HVM), SSD Volume Type (프리 티어 사용 가능) 선택.
* 프리티어 사용 가능 => 1년 동안 1대에 대해서 무료.
-> 인스턴스 유형은 ‘t2.micro’
-> 키 페어 생성. 새로 생성. 이름은 sparta_msdou46, 유형은 RSA에 프라이빗 키 파일 방식은 .pem
생성된 키 페어 pem 은 바탕화면에 위치시킴.
-> 인스턴스 시작.
-> 다시 카테고리 인스턴스 -> 인스턴스에 접속하면 내가 시작했던 인스턴스가 등록되어 있어. 인스턴스 상태가 ‘실행 중’ 이면 클라우드 컴퓨터가 켜진 상태인거야.
-> 해당 인스턴스 우클릭 하면 ‘인스턴스 중지’ 가 있고 ‘인스턴스 종료’ 가 있는데, 중지는 컴퓨터를 끈 거고 종료는 컴퓨터를 반납하는거야.
* 내가 만약 인스턴스 컴퓨터를 하나 더 만들고 싶다? 기존에 쓰던 인스턴스가 뭔가 문제가 생겨서?
그럼 중지가 아닌 ‘종료’ 를 누른 다음 ‘인스턴스 시작’ 버튼을 눌러서 다시 만들어야 해.
무사히 AWS EC2 서버에 인스턴스 컴퓨터를 생성하였으니, 이제 접속해보자.
-> 바탕화면
-> 터미널 켜기.
-> sudo chmod 400
이라고 친 다음 바탕화면에 다운받아 놨던 sparta_msdou46.pem 파일을 터미널 창 위로 클릭 앤 드랍. 이러면 pem 파일의 경로가 입력돼.
400 이랑 경로 사이엔 띄어쓰기 두고.
그 다음엔 엔터, 맥 pw 입력하면 사전준비 끝.
-> 그 다음 계속해서 터미널에 입력.
ssh -i 라 치고 띄어쓴 다음 키페어 pem 클릭앤 드랍으로 경로 입력. 나는 경로가 /Users/kimminsoo/Desktop/sparta_msdou46.pem.
즉,
ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem 그 다음,
ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem ubuntu@ 라 입력.
여기서 AWS 카테고리 인스턴스 -인스턴스 목록에서 내 가상 컴퓨터 클릭 후 하단에 퍼블릭 IPv4 주소 복사.
ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem ubuntu@<IPv4 주소>
그리고 엔터. 뒤에 뭐라 물어보면 yes. 그러면
——
ubuntu@ip-<>:~$ 이렇게 터미널에서 접속 완료.
리눅스는 인터페이스랄게 딱히 없어. 모두 다 터미널에서 명령어를 내려서 하는 것.
계속해서 리눅스에 명령어를 입력해보자.
——
mkdir sparta. <= sparta 라는 폴더를 만들겠다.
ls <= 내 위치에서 폴더 구성을 확인.
cd sparta <= 내 위치에서 바로 아래에 있는 sparta 라는 폴더로 들어가.
cd .. <= 내 폴더에서 바깥으로 나가 상위 폴더로 가고 싶을 때.
——
______________________________________________________________________________
우리는 EC2 라는 서버에 있는 인스턴스 컴퓨터를 구매했어.
이제 본격적으로 리눅스os가 깔린 이 컴퓨터에 파이썬 프로젝트를 올려보고 실행해볼 차례.
허나 아직 몇 단계가 더 남았어. 우선 서버를 세팅해줘야 해.
왜? 이제 막 클라우드 컴퓨터를 구매한 거잖아. 업그레이드도 해줘야 하고, DB도 설치해줘야 해.
——
ubuntu@ip-<>:~$
——
터미널을 통해서 클라우드 컴퓨터에 원격 접속한 상태.
* 접속하는 법은 5주차 교육자료 pdf에 있어. ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem ubuntu@<EC2 Ipv4주소>
리눅스에서는 뭘 설치할 때도 전부 다 명령어. 교육자료 코드스니펫에 EC2 한 방에 설치하기 명령어가 있어.
——
# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10
# 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
——
# 은 주석이니까 그 아래에 있는 명령어들을 한 줄 한 줄씩 차례대로 붙여넣어서 입력해주면 돼.
첫 번째 줄은, 원래라면 python3 라고 치고 명령어를 쳐야 하는데, 걍 python 이라 치고 명령어를 쓸게 라고 명령하는 부분.
두 번째 -1는 flask, pymongo, dns 등등 패키지나 라이브러리 설치할 때 pip 라는 프로그램이 필요해. 패키지 마법사 같은 친구야. 이 친구를 설치한거지.
두 번째 -2 는 root 권한을 달라 요청하는 것.
세 번째는 localhost 5000 을 떼는 명령어.
세팅은 끝. 다음으로 filezilla 실행.
Filezilla 창의 왼쪽은 내 컴퓨터, 오른쪽은 내가 산 컴퓨터.
일단 homework 프로젝트를 파이참으로 켜두기.
왼쪽 디렉토리 ‘bucket’ 폴더에 우클릭 -> 새로 작성 -> python 파일 생성. 업로드 할 테스트 파일을 하나 만들어보자. 파일 이름은 test.py
이제 filezilla의 오른쪽에 내가 산 컴퓨터를 띄워볼거야.
——
Filezilla 좌측 상단 창 없애기 버튼 바로 아래에 ‘사이트 관리자’ 열기.
-> 새 사이트 클릭 -> 새 항목 이름은 myec2 -> 우측에 프로토콜을 SFTP 로 변경 -> 호스트는 퍼블릭 ipv4 주소 3.38.101.150
-> 포트는 22
-> 로그온 유형은 ‘키 파일’ -> 사용자는 ‘ubuntu’
-> 키 파일은 바탕화면의 pem 파일을 찾아줘.
-> 그리고 연결. 계속 확인 확인.
이러면 filezilla 오른쪽에 내가 산 클라우드 컴퓨터가 나타나.
그럼 아까 터미널 창에서 만들었던 sparta 폴더가 보일텐데, 여기다가 test.py를 한 번 넣어보자. 클릭 앤 드래그 하면 업로드 되는거야.
__________________________________________________________________
그럼, EC2 의 컴퓨터에 들어간 test.py를 실행해보자. 다시 터미널 창.
ls, cd 를 이용하여 sparta 폴더에 들어가서 ls 를 치면 test.py 가 들어와 있음을 알 수 있어.
——
Sparta 폴더 안에서 다음과 같이 입력.
python test.py
——
이러면 test.py가 실행되면서 해당 파일의 내부 코드인 print(‘hello sparta!!’) 가 출력돼.
즉 파일질라를 사용하여 EC2 컴퓨터를 가져왔고, 그 컴퓨터 안에 test.py 를 업로드 한 뒤,
터미널 창으로 test.py 를 실행시켜 본 거지.
______________________________________________________________________________
이제, 우리가 만든 파이썬 프로젝트를 filezilla 를 통해서 EC2 클라우드 컴퓨터에 업로드 해보자.
Filezilla -> EC2 컴퓨터(우측) -> test.py 는 삭제. 더 필요 없으니.
-> 좌측 내 컴퓨터 -> homework 프로젝트 -> static, templates, app.py 총 3개를 클릭 앤 드래그 해서 EC2 의 sparta 폴더 안에 업로드
-> 다시 터미널 창에 가서 잘 작동하는지 확인해보자.
-> cd sparta 해서 EC2 sparta 폴더에 접속. ls 쳐 보면 폴더 2개랑 파일 1개가 잘 들어와 있을거야.
——
python app.py
——
실행. 쳐 보면 flask 가 안 깔려 있다고 나옴. 깔면 되지. 설치하는 김에 mongo 랑 dns도 깔아야지.
ubuntu@ip-<>:~/sparta$ 에 들어와 있는 상태에서 다음 명령어를 실행.
——
pip install flask
Pip install pymongo
pip install dnspython
pip install certifi
——
=> node 로 치면 ppm, 맥으로 치면 sudo 나 brew. Pip 또한 파이썬 관련 패키지나 라이브러리를 다운받기 위한 키워드인거지.
필요한 패키지들 다 설치해줬으니, python app.py 실행. 그럼 뭔가 작동이 돼. 서버가 올라갔나?
——
<EC2 ipv4주소>:5000
——
EC2 컴퓨터의 퍼블릭 ipv4 주소:5000 포트로 접속을 시도했지만 아직은 불가.
왜? 아직 EC2 컴퓨터에서 5000번 포트로 접속할 수 있는 구멍을 뚫어두지 않았기 때문.
____________________________________________________________________________________
EC2 컴퓨터에서 5000번 포트로 접속할 수 있도록 세팅.
AWS 인스턴스 - 인스턴스 접속
-> 내 EC2 컴퓨터 선택.
-> 아래 카테고리 중 ‘보안’ 클릭
-> 보안 그룹
sg-003775357b9f7922c (launch-wizard-1)
라는 부분이 있어. 해당 링크로 들어가
-> 아래쪽 ‘인바운드 규칙’ 카테고리의 우측에 ‘Edit inbound rulse’ 라고 해서 ‘인바운드 규칙 편집’ 이라는 버튼이 있어. 클릭.
-> 인바운드 규칙 편집 화면으로 이동. 좌측 하단에 ‘규칙 추가’ 클릭.
-> 새로 열린 규칙의 포트란에 5000 입력. 바로 옆에 소스-사용자 지정은 ‘Anywhere Ipv4’ 선택.
-> 5000번으로 새 규칙 연 김에 하나 더 추가해서, 이번엔 포트를 80으로 입력. 80도 소스는 ‘Anywhere Ipv4’ 선택.
-> 규칙 저장.
다시 5000번 포트로 EC2 컴퓨터 접속.
——
<EC2 ipv4>:5000
——
이러면 이제 나와. 사실 뒤에 :5000 빼도 접속 가능.
왜 :5000 을 빼도 접속이 되느냐.
예를 들어서, naver.com 은 사실 뒤에 naver.com:80 이라고 :80 이 숨겨져 있어.
:80 포트가 열려 있으면 :80을 생략해도 접속이 가능해.
즉 우리의 전략은 무엇이냐? :80 포트로 주소를 받아서, :5000 으로 연결시켜 주면 된다는 것.
교육자료에도 있는데, 클라이언트 측이 3.38.101.150 으로 리퀘스트를 보내면, 80포트를 사용해서 리퀘스트를 보내.
그럼 80포트로 리퀘스트 받은 걸 5000 포트로 연결해서 서버 측으로 받아서 리스폰스를 해주는거야.
우리 서버는 5000 포트로 돌고 있는데, 80으로 받으면 5000으로 채널링 해주는거지. 80 포트가 특별한거야.
——
# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
——
=> 처음 리눅스 컴퓨터 구매하고 첫 세팅 해줄때 입력했던 마지막 명령어.
이 명령어 덕분에 클라이언트가 80으로 접속하여 5000으로 리퀘스트가 채널링 될 수 있는거야.
__________________________________________________________________________________________
문제가 하나 남았어!
파이참에서 콘솔창 끄면 서버가 내려가는 것 마냥, 터미널을 종료하면 서버가 내려가!
리눅스 컴퓨터가 항상 켜져있다곤 해도 콘솔창이 꺼져 버리면 서버가 다운돼 버리지!
그래서 리눅스 컴퓨터와 연결된 터미널 창을 닫아도 서버가 계속 유지되도록 작업을 해볼거야.
우선 터미널에서 다시 EC2 컴퓨터로 접속해보자.
-> 터미널 on
-> 화살표 윗키 눌러봐. 그럼
ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem ubuntu@<ec2 ipv4>
가 나올거야. 엔터. 리눅스 컴퓨터 접속.
-> cd sparta 로 sparta 폴더에 접속.
-> python app.py 로 다시 설버 실행.
*********** 참고로, 맥북 기준 control + C 누르면 서버가 꺼짐. ***********
다시 리눅스 터미널에서 서버를 올렸어.
그럼 이제 어떻게 터미널이 꺼져도 서버가 계속 돌아갈 수 있게 할건데?
서버가 꺼진 상태에서,
——
nohup python app.py &
——
이렇게 치면 돼.
이제 터미널을 꺼도 주소 접속이 가능.
사실 문제가 하나 더 있어…
다시 터미널에서 EC2 컴퓨터로 접속.
문제는… 이제는 서버를 다시 끌 줄을 모른다는 것…
다행히 코드스니펫에 코드가 있어.
——
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
——
=> EC2 컴퓨터 서버 강제 종료.
________________________________________________________________________________________________
이제 내가 만든 파이썬 프로젝트를 AWS 리눅스 컴퓨터에 올려서 인터넷에 배포하는 것은 성공.
근데 언제까지 주소로 3.38.101.150 를 칠거야? 도메인을 받자.
가비아에서 도메인 받기!
우선 리눅스에 접속해서 프로젝트 서버를 켜놓을거야.
——
ssh -i /Users/kimminsoo/Desktop/sparta_msdou46.pem ubuntu@<ipv4주소>
cd sparta
nohup python app.py &
——
가비아 접속하기.
——
——
가비아의 dns 관리창으로 연결. 내가 산 도메인이 있을거야. 앞의 체크박스를 클릭하고, 바로 위 ‘DNS 설정’ 클릭.
-> 호스트 이름은 @
-> 값/위치의 IP 주소는 AWS 인스턴스 컴퓨터 주소.
-> 확인 후 저장.
-> 내 도메인인 msdou46-94.shop 로 한 번 접속해보기.
가비아 같은 업체를 ‘네임 서버를 운영한다’ 라고 표현하는데,
IP 주소의 숫자와 도메인 주소를 매칭시켜주는 회사. 전화번호부 역할인거지.
즉 가비아가 이 IP와 도메인 주소를 매칭시켰다는 소식을 전 세계의 전화번호부에 알려줘서 등록시켜야 해.
그래서 도메인 주소를 막 등록했을 때에는 접속이 가능해 지는데에 좀 시간이 걸릴 수도 있어. 사는 곳에 따라서.
* 한국에서 등록하면, 1시간 정도만에 전세계로 퍼진다고 이야기들을 한다고.
___________________________________________________________________________________________________
msdou46-94.shop 이 주소를 카톡이나 sns로 공유했을 때 미리보기가 이쁘게 나오려면?
Og image, og title, 등의 설정이 필요하겠지?
OG 태그를 만들어서 삽입해보자.
Projects - homework - templates - index.html
코드스니펫에서 복사해 와서 <meta> 태그를 삽입해보자.
——
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
——
Html 파일을 수정했으니, 서버에 다시 올려야 해.
우선은
——
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill
——
가동중이던 서버를 내리고, 파일질라에 들어가서 기존에 EC2 컴퓨터 sparta 에 들어가 있던 static, templates, app.py 삭제.
그리고 homework 에서 다시 세 파일들을 업로드.
——
nohup python app.py
——
다시 서버를 실행시켜주면 완료.
참고로!
카카오톡이나 sns 들은 한 번 og 태그를 등록해 두면, 내가 파일을 수정해서 다시 업로드해도 og 이미지나 문자들이 그대로 일거야.
왜? 한 번 og태그를 올리면 그걸 그대로 저장해두거든.
——
페이스북 og태그 초기화하기 : https://developers.facebook.com/tools/debug/
카카오톡 og태그 초기화하기 : https://developers.kakao.com/tool/clear/og
——
위의 사이트에 접속해서 og태그를 초기화 시킬 수 있어. 본인 url 을 입력하면 해당 url의 og태그가 등록되어 있는 것을 없애주거든.
흐름을 잡아보자.
- Html, css, js 로 눈에 보이는 ‘브라우저 화면’ 을 만들기.
- Flask, mongoDB 를 사용해서 ‘서버’ 를 만들기. 클라이언트의 request가 들어오면, ‘브라우저’ 화면을 정해둔 포트로 뿌려준다.
- 다음으로 완성된 프로젝트를 인터넷 상에 배포해야 한다.
1) 가비아에서 도메인 구매. 2) AWS에서 인스턴스 컴퓨터 구매 3) 파일질라 설치
터미널을 통해서 AWS 컴퓨터에 접속. Python, pip 등 파이썬 백엔드를 실행시키기 위한 프로그램 설치.
인스턴스 컴퓨터에 sparta 라는 폴더를 만들어주고, 파일질라와 연결하여 폴더 안에 내가 만든 프로젝트를 업로드해준다.
그리고 실행. 어? 안되네? Flask, pymongoDB 등 패키지가 설치가 안된거야. 터미널 창을 통해서 sparta 폴더 안에 설치해주자.
그리고 AWS 인스턴스 컴퓨터에 들어가서 5000번 포트와 80번 포트로 클라이언트가 접속할 수 있도록 길을 열어둬.
그 다음에는 터미널이 꺼져도 서버가 인스턴스 컴퓨터에서 계속 돌아갈 수 있도록 nohup python app.py 명령을 실행.
그리고 마지막으로, AWS 인스턴스 컴퓨터의 IPv4 주소를 가지고 가비아에 가서 도메인 주소와 매칭시켜줘. 그럼 완료.
'내일배움캠프_개발일지 > 웹개발 종합반' 카테고리의 다른 글
| 웹개발 종합반 4주차 일지 (0) | 2022.10.26 |
|---|---|
| 웹개발 종합반 3주차 일지 (0) | 2022.10.24 |
| 웹개발 종합반 2주차 일지 (0) | 2022.10.21 |
| 웹개발 종합반 1주차 개발일지 (0) | 2022.10.20 |
| 글 업로드 테스트 (0) | 2022.10.17 |