👨‍💻 [풀스택] 내가 만든 프로젝트 배포하기

 ✏️사용 프로그램

🔎 Filezilla

https://filezilla-project.org/download.php

Download FileZilla Client for Windows (64bit x86)

 

🔎 가비아

https://www.gabia.com/

웹을 넘어 클라우드로. 가비아

 

---

 ✏️미니프로젝트  좋아요 API

🔎 Update 후 POST하기

📌 클라이언트와 서버 연결하기

서버코드 app.py

@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})

 

클라이언트 코드 index.html

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

 

📌 서버부터 만들기

좋아요 수를 증가시키기 위해 서버가 클라이언트에게 전달받아야하는 정보 

 

< 서버 로직 >

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣습니다.

2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.

3. star의 like 에 1을 더해준 new_like 변수를 만듭니다.

4. mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.

 

📌 클라이언트 만들기

좋아요 수를 증가시키기위해 클라이언트가 전달할 정보

 

< 클라이언트 로직>

1. 서버에

 1) POST 방식으로,

 2) /api/like 라는 url에,

 3) name_give라는 이름으로 name을 전달합니다. (참고) POST 방식이므로 data: {'name_give': name} 사용

2. '좋아요 완료!' alert 창을 띄웁니다. 3. 변경된 정보를 반영하기 위해 새로고침합니다.

 

🔎 Delete 후 POST하기

📌 클라이언트와 서버 연결하기

서버코드 app.py

@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})

클라이언트 코드 index.html

function deleteStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/delete',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

 

📌 서버부터 만들기

영화인 카드를 삭제하기 위해 필요한 정보

 

< 서버 로직 >

1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣기

2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 제거

3. 성공하면 success 메시지를 반환

 

📌 클라이언트 만들기

영화인 카드를 삭제하기 위해 필요한 정보

 

< 클라이언트 로직>

1. 서버에

 1) POST 방식으로,

 2) /api/delete 라는 url에,

 3) name_give라는 이름으로 name을 전달 (참고) POST 방식이므로 data: {'name_give': name}

2. '삭제 완료! 안녕!' alert창 띄우기 3. 변경된 정보를 반영하기 위해 새로고침

 

📌pymongo 검색 꿀팁

'pymongo 정렬' 검색
정렬이 sort이구나. 싶으면
'pymongo sort w3school' 검색

 

---

 ✏️ 내 프로젝트를 서버에 올리기

🔎 웹서비스 런칭

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

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

우리는 AWS 라는 클라우드 서비스에서 편하게 서버를 관리하기 위해 항상 켜 놓을 수 잇는 EC2 사용권을 구입해 서버로 사용할 것이다.

 

🔎 IP주소와 포트

📌 IP주소

컴퓨터가 통신할 수 있도록 컴퓨터마다 가지는 고유한 주소. 정확히는 네트워크가 가능한 모든 기기가 통신할 수 있도록 가지고 있는 특수한 번호. 서버는 하나의 주소를 가진다.

 

📌 포트(port)

하나의 IP에 여러 포트가 있음. 하나의 포트에 하나의 프로그램을 실행시킬 수 있다.

 

📌 DNS

Domain Name System

 

 

🔎 AWS 서버 구매

📌 AWS EC2 접속하기

Window의 경우 git bash 프로그램 실행해

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피

 

📌간단한 리눅스 명령어

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

 

🔎 서버세팅하기

filezilla를 이용해서, 간단한 python 파일을 업로드

📌파이썬 파일 실행

# home 디렉토리로 이동
cd ~

# 실행. 콘솔창에 hellow world!가 뜨는 것을 확인 할 수 있습니다.
python3 test.py

sudo chmod 755 initial_ec2.sh

./initial_ec2.sh

python test.py

# EC2 컴퓨터의 시간대를 한국으로 맞추는 명령어
sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

# python3 명령어를 python으로 사용할 수 있게 하는 명령어
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 설치
sudo apt-get update
sudo apt-get install -y python3-pip

# pip3 대신 pip 라고 입력하기 위한 명령어
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

 

📌mongeDB 설치코드

wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

sudo apt-get update

sudo apt-get install -y mongodb-org

 

📌mongeDB 실행하기

# 실행. 아무 반응이 없으면, 잘 실행된 것!
# 리눅스는 보통 잘 되면 아무것도 안나와요!^^;
sudo service mongod start

 

 

🔎 Robo3T이용해 mongoDB 접속

AWS의 MongoDB에 아이디와 비밀번호를 추가했으니,

우리의 pymongo에도 아이디와 비밀번호를 입력! 그래야 pymongo가 올바르게 DB에 접근할 수 있다.

client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)

 

🔎 완성본 실행해보기

git bash에 다음과 같은 명령어 입력

# home 디렉토리로 이동
cd ~

# 해당 폴더로 이동해서 아래 코드를 실행합니다.
python app.py

# 설치하기
pip install pymongo

python app.py

📌브라우저에서 접속하기

http://내AWS아이피:5000/

 

 

🔎 포트없애기

http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결됨.

 

🔎 nohup 설정하기

터미널이 종료되어도 프로세스가 종료되지 않도록 설정.

원격접속을 끊어도 서버는 계속 동작하도록 설정

# 아래의 명령어로 실행하면 된다
nohup python app.py &

# 서버종료하기
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

#다시 켜기
nohup python app.py &

 

🔎 og태그

프로젝트를 공유햇을때 이쁘게 나오도록 꾸며주기

HTML의 <head>~</head> 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용

 

1. "내 사이트의 제목" 입력하기

2. "보고 있는 페이지의 내용 요약" 입력하기

3. 적당한 이미지를 만들거나/골라서 static폴더에 ogimage.png로 저장하기! (사이즈 800x400인 이미지를 구글에서 검색!)

 

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

 

📌페이스북 og태그 초기화 하기

공유 디버거 - Facebook for Developers

공유 디버거 - Facebook for Developers

📌카카오톡 og태그 초기화 하기

카카오계정 (kakao.com)

카카오계정 로그인