10.13. 미니캠프_웹개발종합반(5-1~5주차 끝)

5w31892p·2022년 10월 13일
내일배움캠프 4기
0

미니캠프

목록 보기
7/17

무비스타

DB만들기 (데이터 쌓기) : 완강 후 혼자 만들어보기

1. GET - 보여주기

  1. 클라이언트, 서버 각각 어디에 뭐가 있는지 확인

  2. 서버 만들기
    1) 클라이언트로부터 받을 데이터 없음
    2) 리뷰는 여러개 맞기 : find 이용하여 찾기

    same_ages = list(db.users.find({'age':21},{'_id':False}))

    3) 변수명 변경
    4) 메시지 내려줄 필요 없으므로 내가 지정한key : value(바꾼 변수명) 넣기

    @app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({},{'_id':False}))
    return jsonify({'all_reviews': reviews})

    5) pymongo 정렬 기능 사용

    • find 끝나는 지점에서 .sort(정렬 할 것의 이름)
    • 오름차순 : .sort("이름", 1)
    • 내림차순 (역순) : .sort("이름", -1)

  3. 클라이언트 만들기
    1) movie_stars 값 가져오기

    success: function (response) {
	let mystars = response['movie_stars']
}

    2) 콘솔에 mystars 확인
    3) 반복문 (콘솔 키 값)

    success: function (response) {
    let mystars = response['movie_stars']
    for (let i = 0; i < mystars.length; i++) {
        let img_url = mystars[i]['img_url']
        let like = mystars[i]['like']
        let name = mystars[i]['name']
        let recent = mystars[i]['recent']
        let url = mystars[i]['url']
}

    4) 콘솔 확인
    5) html 붙히기

    • 이름이 써져 있는 모든 곳에 name 넣기

  4. 동작 테스트
    1) 브라우저에 잘 뜨는지 확인
    2) robo 3T에서 1명 like 수 올리고 역순으로 화면에 나오는지 확인

2. POST - 좋아요+1

  1. 클라이언트, 서버 각각 어디에 뭐가 있는지 확인

  2. 서버 만들기
    1) name_give로 데이터 받을 수 있게

    name_receive = request.form['name_give']

    2) find_one 이용

    target_star = db.mystar.find_one({'name' : name_receive})

    3) find_one 통해 가져온 값에서 like 값만 가져오기

    current_like = target_star['like']

    4) 가져온 like 값에 +1을 더하고 그것을 update_one을 통해 업데이트

    new_like = current_like + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})

    5) 적절한 메시지로 변경

  3. 클라이언트 만들기
    1) Ajax에 실어서 보내기

    data: {name_give:name}

    2) 페이지 새로고침

    window.location.reload();

  4. 동작 테스트
    1) 브라우저에서 like 눌리고 적용되는지 확인
    2) 브라우저 적용됐으면 robo 3T 가서 like 잘 찍혔는지 확인

3. POST - 삭제하기

  1. 클라이언트, 서버 각각 어디에 뭐가 있는지 확인

  2. 서버 만들기
    1) name_give로 데이터 받을 수 있게
    2) delete_one 이용

    db.mystar.delete_one({'name': name_receive})

    3) msg 내용 변경

  3. 클라이언트 만들기
    1) Ajax에 실어서 보내기

    data: {name_give:name}

    2) 페이지 새로고침

    window.location.reload();

  4. 동작 테스트
    1) 브라우저에서 삭제되는지 확인 후 robo 3T도 확인

AWS

  1. 시작하기
    1) 인스턴스 시작
    2) Ubuntu 18.04 체크 (우분투: 리눅스 배포판)
    3) 키페어 이름 설정하고 받아서 보관
  2. 종료 / 중지 / 재부팅 (마우스 우클릭)
    1) 종료 : 반납
    2) 중지 : 꺼두는 것
    3) 재부팅
  3. 원격 접속 방법
    1) Git Bash 접속
    2) ssh -i 키페어끌어넣기 ubuntu@퍼블릭IPv4주소
    3) 웬만한건 다 yes 하면 됨

리눅스

  1. 리눅스에는 마우스가 없음
  2. 명령어로만 이루어짐
  3. 기본 명령어
    mkdir abc 
→ abc라는 폴더 만들기
ls 
→ 현재 내 위치에 있는 폴더 및 프로그램 등 보기
cd abc 
→ abc 폴더 들어가기
cd .. 
→ 폴더 나가기

서버 세팅

FileZilla

► 업로드 / 다운로드 해주는 프로그램
► 업로드나 다운로드할 방향으로 끌면 끝
  1. 왼쪽 상단 사이트 관리자 열기 클릭
  2. 새 사이트 → 이름 설정
  3. FTP는 SFPT 로 설정
  4. host는 퍼블릭IPv4주소
  5. 포트는 22
  6. 로그온 유형 → 키 파일
  7. 사용자 → ubuntu
  8. 키 파일 찾아서 열기 → 연결

파이썬 파일 실행

  • GitBash
    cd 폴더명/
python3 파일명.py

서버환경 통일

  1. FileZilla로 업로드
  2. 파일 안 명령어들이 잘 실행될 수 있도록 파일에 권한 주기 → GitBash
    sudo chmod 755 initial_ec2.sh
./initial_ec2.sh
  3. 세팅 완료 되면 python3이 아닌 python으로 쳐서 파일 실행시켜보기
  • 혼자 세팅 (맥락만 이해)

  1. ec2 컴퓨터 한국시간 세팅

    sudo ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

  2. 파이썬 (python3 → python)
    1) python3 명령어를 python으로 사용할 수 있게

    sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

  3. pip (pip3 → pip)
    1) pip3 설치
    2) pip3 명령어를 pip으로 사용할 수 있게 하는 명령어
    3) 한 줄 씩 복붙

    # 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

  4. mongoDB 설치
    1) 설치 코드

    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

    2) 실행

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

    3) mongoDB 접속 계정 생성 

    # '>' 표시가 나오면 MongoDB 접속한 것
mongo

# admin으로 계정 바꾸기
use admin;

# 계정 생성하기
# test, test → 아이디, 비밀번호
db.createUser({user: "test", pwd: "test", roles:["root"]});

# 나오기
exit

# MongoDB 재시작
sudo service mongod restart

    4) mongoDB 외부에 열기

    mongoDB는 디폴트로 내부에서만 접속 허용
그래서 외부에서 접근이 가능하도록 잠금을 풀어주는 것
    # sudo: 관리자 권한으로 다음을 실행
sudo vi /etc/mongod.conf

# sudo 관리자 권한으로 
# etc 폴더 아래 
# mongod.conf 파일을 
# Vim으로 켜
    • Vim : 리눅스 자체 에디터
      1) 입력모드 i 입력
      • a 커서 위치 다음칸부터 입력
      • A 커서 행의 맨 마지막부터 입력
      • i 커서의 위치에 입력
      • I 커서 행의 맨 앞에서 부터 입력
      • o 커서의 다음행에 입력
      • O 커서의 이전 행에 입력
      • s 커서 위치의 한글자를 지우고 입력
      • cc 커서위치의 한 행을 지우고 입력
      2) 종료하기
      • 저장 O → esc누른 후 :wq 입력
      • 저장 X → esc누른 후 :!q 입력

    5) Robo 3T 이용해 내PC에서 EC2 mongoDB 접속

    • 좌측 상단 PC 2대 모양 클릭
    • Create 클릭
    • 이름, 주소(퍼블릭IPv4주소) 넣고
    • 상단 Authentication 클릭
    • Perform authentication 체크
    • 생성한 아이디, 비번 입력 후 Save

    6) 포트포워딩 (80포트 → 5000포트)

    80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
    sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

Flask 서버 실행

1) test.py를 app.py로 이름 바꾼 후 내용을 flask 기본코드로 변경
2) FileZilla로 기존 업로드했던 파일 모두 삭제한 후에 app.py 업로드

  • pip 라이브러리는 파이썬 패키지를 쉽게 깔아주는 라이브러리

  1. pip로 flask 설치

    pip install flask

# pymongo도 동일하게 설치
pip install pymongo

  2. 설치 후 app.py 실행

    python app.py

  3. 퍼블릭IPv4주소:5000 접속해보기
    1) aws에서 자체적으로 막아놓은 포트 때문에 접속 안됨

AWS 포트 열기

  1. 포트 여는 방법
    1) 인스턴스 → 보안 → 보안그룹 → 인바운드 규칙 편집
    2) 규칙 추가로 포트 열기
    • 5000(flask 기본포트)
    • 80(http 접속을 위한 기본포트)
    • 27017(외부에서 mongoDB 접속하기 하기 위한 포트)
    3) 소스유형 : 위치무관 (현재 위치무관 없음)
    • IPv4 IPv6 각각 열기
    5) 규칙 저장

  1. 포트 다 연 후 퍼블릭IPv4주소:5000 접속하면 접속됨

  2. 돌아가고 있는 flask 끄는 방법
    Ctrl + C

원페이지쇼핑몰 업로드

  1. Robo 3T 이용해 내PC에서 EC2 mongoDB 접속
    1) 좌측 상단 PC 2대 모양 클릭
    2) Create 클릭
    3) 이름, 주소(퍼블릭IPv4주소) 넣고
    4) 상단 Authentication 클릭
    5) Perform authentication 체크
    6) 생성한 아이디, 비번 입력 후 Save

    • ID / PW 변경하고 싶을 때
      → 완전 처음 세팅하기 전에 변경하고 실행해야함

      1) initial_ec2.sh 파일 에디터에서 열기
      → EC2한방에 세팅하기
      2) mongoDB 쪽 user, pwd 변경
      3) FileZilla로 업로드 후 실행

  2. FileZilla로 app.py / static폴더 / templates폴더 업로드

  3. GitBash로 app.py 실행

    python app.py

  4. 퍼블릭IPv4주소:5000로 접속 확인

포트포워딩

  1. 포트번호 떼기
    • 80포트로 들어오는 요청을 5000포트로 포워딩 시켜주는 것(넘겨주는 것)
    sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

nohup 설정

  • 많이 연습하기

  1. GitBash 다시 켜서 시작할 땐 방향키 ↑ 누르고 enter 닫기 눌러 종료해도 서버가 계속 돌게 하기

    nohup python app.py &

  2. 서버 강제종료

    # 미리 pid 값(프로세스 번호)확인
# pid값 = 옆에 app.py 적혀 있는 것의 번호
ps -ef | grep 'app.py'

# 프로세스 강제종료
kill -9 pid값

  3. 서버 다시 켜기

    nohup python app.py &

★ GitBash 다시 켜서 시작할 땐 방향키 ↑ 누르고 enter ★




도메인 구입

  1. (구매 후) My가비아
  2. (도메인 우측) 관리
  3. (좌측 세번째) DNS 정보 → DNS 관리
  4. (도메인 우측) 관리 → 레코드 수정 → 레코드 추가
    1) 호스트 → @
    2) 값/위치 → 퍼블릭IPv4주소
  5. 구매한 도메인으로 접속 (이때 nohup으로 켜져있어야 함)

og태그

공유했을 때 예쁘게 나오게 하는 것
  1. og:title , og:description 내용 적기
  2. 구글에서 원하는 사이즈 이미지 찾아서 적용
    1) 가로 사이즈 * 세로 사이즈 치고 이미지 눌러서 보기
    2) '이미지를 다른 이름으로 저장' → static에 저장
    3) og:image에 이미지 이름을 적고, jpg파일인지 png파일인지 확인후 맞게 적기
  3. 서버가 돌아가고 있다면 끄기
    ps -ef | grep 'app.py'
kill -9 pid값1
kill -9 pid값2
  4. refresh 후 FileZilla 기존파일 삭제 후 바뀐 파일 업로드
  5. 서버 다시 켜서 확인
    nohup python app.py &

og태그 적용했는데 안보이는 경우

  1. 코드 오타 등

  2. 카카오나 페이스북 즉시 업데이트 X
    1) 성능T상의 문제로 og 태그를 바로 업데이트 하지 않기 때문
    2) 수동으로 초기화(캐쉬삭제)해야 함

    카카오톡 캐쉬삭제 방법
    페이스북 캐쉬삭제 방법

웹개발종합반FAQ

profile
5w31892p
이전 포스트

10.12. 미니캠프_웹개발종합반(4-1~4주차 끝)

다음 포스트

10.18. MiniCamp_WEB_1WEEK

0개의 댓글