웹개발 종합반_개발일지_Day 8 [完]

Hyeyeong·2022년 8월 8일
APIFlaskawsbeautifulsoupfilezilafrontendmetatagmongodbpythonterminal가비아개발일지스파르타코딩클럽웹개발 종합반
0

웹개발 종합반

목록 보기
12/13
post-thumbnail

Ⅰ. 📚 오늘 배운 내용

  1. [prac] 버킷 리스트 페이지 만들기
    1) 리스트 작성하기
    2) 리스트 보여주기
    3) 리스트 완료하기(done : 0->1)
  2. 웹 배포
    1) 기본 셋팅
    2) AWS 서버 구매하기
    3) 서버 세팅하기
    4) 도메인 연결
    5) meta 태그 생성 (사이트 배포용)

🔥 [prac] 버킷 리스트 페이지 만들기

1) 리스트 작성하기

(1) API 만들고 사용하기 - 포스팅API (Create → POST)

  • 요청 정보 : URL= /bucket, 요청 방식 = POST
  • 클라(ajax) → 서버(flask) : bucket
  • 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)
    + 리스트당 넘버링 해주기, 진행 중/완료 표시하기

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

  • app.py 실행해서 index.html 와의 연결 확인

② 서버 만들기

  • app.py 파일에 DB 연결, 데이터 추가 코드 기입
  • len() 함수 이용하여 리스트당 넘버링 해주기
  • 진행 중/완료는 0과 1로 구분해주기

③ 클라이언트 만들기

  • index.html 파일에 input에 기입되는 값을 데이터로 만든 후 app.py 파일과 연결 및 새로고침 기능 추가
    ❗️ 추가된 데이터는 DB에서 확인할 수 있음

④ 확인하기
👉 output

2) 리스트 보여주기

(1) API 만들고 사용하기 - 보여주기API (Read → GET)

  • 요청 정보 : URL= /bucket, 요청 방식 = GET
  • 클라(ajax) → 서버(flask) : (없음)
  • 서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

  • app.py 실행해서 index.html 와의 연결 확인(app.py파일의 def bucket_get(): 부분과 index.html파일의 ajax get 부분)

② 서버 만들기

  • app.py 파일에 데이터 가져오는 코드 기입

③ 클라이언트 만들기

  • index.html 파일에 로딩 시 DB의 리스트를 조건문으로 가져오고, DB 값을 진행중/완료로 구분하여 태그 내 탬플릿으로 붙이기

④ 확인하기
👉 output

3) 리스트 완료하기(done : 0->1)

(1) API 만들고 사용하기 - 포스팅API (Create → POST)

  • 요청 정보 : URL= /bucket/done, 요청 방식 = POST
  • 클라(ajax) → 서버(flask) : num (버킷 넘버)
  • 서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

❗️ 작업 순서
① 클라이언트와 서버 연결 확인하기
② 서버부터 만들기
③ 클라이언트 만들기
④ 확인하기

① 클라이언트와 서버 연결 확인하기

  • app.py 실행해서 index.html 와의 연결 확인

② 서버 만들기

  • app.py 파일에 DB 연결, done 값 수정 코드 기입

    ❗️ int()함수 사용 이유
    클라이언트에서 받아온 num_receive값은 문자값으로 변환되기 때문에 정수로 바꿔주기 위해서 사용해야 함

# post 요청 api 코드 (리스트 완료하기)
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']

    # done 값 업데이트 / num_receive 숫자로 변환
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': 'completed!'})

③ 클라이언트 만들기

  • DB의 num 값을 받아서 데이터로 만든 후 app.py 파일의 done값 수정 api 코드와 연결 및 새로고침 기능 추가
    ❗️ 수정된 데이터는 DB에서 확인할 수 있음
<script>
function done_bucket(num){
            $.ajax({
                type: "POST",
                url: "/bucket/done",
                data: { num_give : num },
                success: function (response) {
                    alert(response["msg"])
                    
                    {## 새로고침 코드#}
                    window.location.reload()
                }
            });
        }
</script>

④ 최종 완성!
👉 output

✨ 웹 배포 ✨

1) 기본 셋팅

(1) filezila 다운로드

  • 클라우드에 파일을 업로드하는 프로그램

(2) 가비아 가입 및 도메인 구입

  • 사이트 서버의 IP 주소 숫자와 문자열을 매칭시켜서 문자로 사이트 서버에 접속할 수 있게 하는 네임서버 운영사이트

2) AWS 서버 구매하기

(1) 서버 구매하기

  • 리눅스 os 제공(리눅스는 오픈소스, 대부분의 서버 환경)

인스턴트 > 인스턴트 시작 > Ubuntu Server 20.04 LTS(HVM), SSD Volume Type 선택 > 인스턴트 시작 > 새 키 페어 생성 > 키 페어 이름 입력 > 키 페어 다운로드 및 저장 > 인스턴트 시작 > 모든 인스턴트 보기
📍 실행되는 데 시간이 걸림

(2) 리눅스 서버 접속

맥 terminal / 윈도우 Git Bash 실행
① 맥 / 윈도우

📍 윈도우는 ssh -i부터 입력하면 됨

  • sudo ch mod 400 '키페어 드래그' 엔터 누르기
  • 맥북 비밀번호 입력
  • ssh -i '키페어 드래그' ubuntu@ 인스턴트 퍼블릭 IPv4 주소 복붙 엔터 누르기
  • yes

② terminal(Git Bash) 명령어

  • mkdir 폴더명
    폴더 추가하기
  • ls
    폴더 보기
  • cd 폴더명
    폴더로 들어가기
  • cd ..
    폴더 나가기

3) 서버 세팅하기

(1) 메모장을 활용하여 한 줄씩 terminal(Git Bash)에 복붙

📍 python3 -> python
python3라고 치는 명령을 python으로 대체

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

📍 pip3 -> pip
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
local host 5000에서 5000 제외하기

  • sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT -- to-port 5000

(2) Filezila 실행

사이트관리자 > 새 사이트 > myec2이름 입력 > 프로토콜 : SFTP - SSH File Transfer Protocol 선택 / 호스트 : 퍼블릭 IPv4 주소 복붙 / 포트는 22 입력 / 로그온 유형 : 키 파일 / 사용자 : ubuntu / 키파일 업로드 > 확인 > python 파일 업로드

📍 업로드한 python 파일 실행

👉 terminal(Git Bash)에 입력

  • ls
  • cd 폴더명
  • ls
  • python 파이썬 파일명.py
    ➟ 파이썬에 작성한 내용 실행됨

(3) flask 서버 실행하기

  • Filezila에 작업한 app.py파일, templates폴더, static폴더 업로드

📍 업로드된 서버 파일 실행

👉 terminal(Git Bash)에 입력

  • ls
  • python app.py
    ➟ flask 안 깔렸다는 메시지가 뜸 / flask, pymongo, dnspython, certifi 패키지 설치해야함
  • pip install flask
  • pip install pymongo
  • pip install dnspython
  • pip install certifi
    ➟ 패키지 설치됨
  • python app.py
    ➟ 서버 파일 실행됨

(4) 보안 설정 규칙 추가

AWS 인스턴트 > 보안 > 보안그룹 > 인바운드 규칙 편집 > 규칙추가 > 포트범위 : 5000 / 소스유형 : Anywhere-IPv4 > 규칙추가 > 포트범위 : 80 / 소스유형 : Anywhere-IPv4 > 규칙저장


👉 80으로 들어온 서버를 5000으로 도착하게 함
terminal에 sudo iptables -t nat -A PREROUTING -i * eth0 -p tcp --dport 80 -j REDIRECT --* to-port 5000 명령어를 사용한 이유

(5) terminal(Git Bash) 종료해도 서버 유지되게 하기

👉 terminal(Git Bash)에 입력

  • ctrl + c(command 아님) 눌러서 서버 끄기
  • nohup python app.py &

(6) 서버 강제 종료하기

👉 terminal(Git Bash)에 입력

  • ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

4) 도메인 연결

(1) 가비아 접속

DNS 관리 > 도메인 선택 후 DNS 설정 > 호스트 : @ / IP 주소 : 퍼블릭 IPv4 주소 복붙 > 확인 > 저장

5) meta 태그 생성 (사이트 배포용)

👉 output

❗️한번 공유된 og태그는 데이터를 수집해놓기 때문에, og태그 내용을 바꾸려면 초기화 해야 함

Ⅱ. 📝 회고

드디어 웹배포를 끝냈다!
구현하려고 구글링을 해봤지만,결국 못 만든 코드 2개 있다.

  1. footer만들어서 하단에 카피라이트 문구 박스를 고정하기
  2. 메타 태그 공유 시 desc 내용이 다 보이게 하기

원래 DB 값 저장 시 조건문 목록 값이 빈칸이면 저장 안 되게 하기까지 3가지 였는데 이건 회고 쓰면서 계속 구글링으로 방법 찾다가 해결했다. 암튼 나머지 2개는 해결 못해서 아쉽긴 하지만, 그래도 어떻게 내가 웹사이트를 제작하고 배포까지 하게 되었다.

웹개발 종합반 모든 강의를 다 수강하였다. 길다면 길고 짧다면 짧은 3주여 동안 민간인에서 웹페이지 만들어 본 사람으로 레벨업🔥하게 되었다. 아직 코딩할 줄 안다느니 하기에도 민망한 코린이지만 일단 다른 건 몰라도 코딩 재밌다.! 계속 배우고 싶다!

Ⅲ. ☑️ TO DO

  • 5주차 homework

profile
Hyeyeong
코딩입문 코린이
이전 포스트

웹개발 종합반_homework_4주차

다음 포스트

웹개발 종합반_homework_5주차

0개의 댓글