[스파르타_웹개발종합] 5주차_프로젝트 업데이트, 배포하기

et Ji·2022년 10월 17일

Flask 도메인연결 서버만들기 스파르타 코딩클럽 웹개발종합

TIL

목록 보기

5/40

학습 일자 : 22.10.13 ~ 10.16

[내배단_웹종] 5주차_프로젝트 마무리, 배포하기

5.2 강 _ [버킷리스트] - 프로젝트 세팅

1. 문제 분석 - 완성작부터 보기!

📎 완성작 버킷리스트

구현기능 살펴보기
- 입력창에 텍스트를 입력하고, 기록하기 누르면 데이터가 쌓인다.
- 화면에서 버킷리스트를 완료버튼을 눌러 완료하면, 완료된 해당 리스트를 찾아서 알려줘야한다. 즉, 구분할 수 있는 지표인 번호를 서버쪽에서 같이 만들어야 한다.

2. 프로젝트 설정 - flask 폴더 구조 만들기

static, templates 폴더 + app.py 만들기!

3. 패키지 설치하기

3개 : flask, pymongo, dnspython

5.3 강 _ [버킷리스트] 뼈대 준비하기

1. 프로젝트 준비 - `index.html`, `app.py` 준비하기

버킷리스트-app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@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)

버킷리스트-index.html : 작성 파일 참고

버킷리스트-index.html : 작성파일 참고

5.4 강 _ [버킷리스트] - POST연습(기록하기)

1. 버킷리스트 기록 API - API 만들고 사용하기 (Create→ POST)

👉 1. 요청 정보 : URL= /bucket, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : bucket
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)

단! 서버에서 한 가지 일을 더 해야합니다.
→ 번호를 만들어 함께 넣어주는 것. 그래야 업데이트가 가능하겠죠!

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

[서버 코드 - app.py]

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

[클라이언트 코드 - index.html]

function save_bucket(){
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {sample_give:'데이터전송'},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>

http://localhost:5000/ 브라우저에서 버튼 눌러 확인

2) 서버부터 만들기

bucket 정보를 받아서, 저장
한 가지 더 → 버킷 번호 와 완료여부 를 함께 넣어주기

app.py 코드

@app.route("/bucket", methods=["POST"])
def bucket_post():

    # 1. 클라이언트에서 받아온 데이터를 일단 저장해야한다.
    bucket_receive = request.form['bucket_give']

    # 3-1. 아래 3번에서 num + 1을 해주기 위해 데이터베이스 값을 가져온다.
    bucket_list = list(db.bucket.find({},{'_id':False}))

    # 3-2. 파이썬에서 개수를 세는 len()을 사용한다.
    count = len(bucket_list) + 1

    # 2. 데이터는 세가지를 저장한다. 
		#    num(완료시 구분할 수 있는 번호), done(완료여부), 입력메시지(bucket)
    doc = {
        # 'num': 0, 처음엔 모르니까 일단 0으로 지정
    # 3. bucket이라는 db에 만약 2개의 데이터가 쌓여있을 경우, 새로 저장되는 번호는 +1을 한 값이어야 한다.
        'num': count, ## 3-2. 에서 카운트값 설정
        'bucket': bucket_receive,
        'done': 0 ## 아직 안했으면 0, 했으면 1로 바꿔주기
    }
    db.bucket.insert_one(doc)

    return jsonify({'msg': '등록 완료!'})

참고 코드

count = list(db.bucket.find({},{'_id':False}))
num = len(count) + 1

vs

count = db.bucket.find({},{'_id':False}).count()
num = count + 1

3) 클라이언트 만들기

bucket 정보만 보내주면 된다.

index.html 코드

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()
        }
    });
}

4) 완성 확인

5.5 강 _ [버킷리스트] - GET연습 (보여주기)

2. 버킷리스트 조회 API - API 만들고 사용하기 (Read→ GET)

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

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

[서버 코드 - app.py]

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(완료) 연결 완료!'})

[클라이언트 코드 - index.html]

$(document).ready(function () {
    show_bucket();
});
function show_bucket(){
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

http://localhost:5000/ 브라우저에서 버튼 눌러 확인

2) 서버부터 만들기

받을 것 없이 buckets에 주문정보를 담아서 내려주기만 하면 된다.

[서버 코드 - app.py]

@app.route("/bucket", methods=["GET"])
def bucket_get():
    # 1. 데이터베이스에 저장된 데이터 다 가져오기
    bucket_list = list(db.bucket.find({}, {'_id': False}))

    # 2. 가져온 데이터 리턴해주기 (클라이언트로)
    return jsonify({'buckets': bucket_list})

3) 클라이언트 만들기

응답을 잘 받아서 for 문으로! 붙여주면 끝

[클라이언트 코드 - index.html]

function show_bucket(){
      $.ajax({
          type: "GET",
          url: "/bucket",
          data: {},
          success: function (response) {
              // 1. 서버에서 리턴한 데이터 buckets 콘솔로 출력해보기
              // console.log(response['buckets'])

              // 2. 받아온 데이터 변수에 할당해서 화면에 뿌려주기
              let rows = response['buckets']
              for (let i = 0; i < rows.length; i++){
                  let bucket = rows[i]['bucket']
                  let num = rows[i]['num']
                  let done = rows[i]['done']

              // 3. html에 추가해줄 때, 완료/미완료(버튼O) 부분이 다르기 때문에 주의할 것!

                  let temp_html =``
                  if (done == 0) { // 아직 미완료면,
                      // done_bucket() 함수에 매개변수로 num을 전달한다.
                      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)
              }
          }
      });
  }

4) 완성 확인하기

브라우저에서 입력했던 리스트가 화면에 잘 이어 붙어지는지 확인

5.6 강 _ [버킷리스트] - POST연습 (완료하기)

3. 버킷리스트 완료 API - API 만들고 사용하기 (Update→ POST)

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

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

[서버 코드 - app.py]

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(완료) 연결 완료!'})

[클라이언트 코드 - index.html]

function done_bucket(num){
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {sameple_give:'데이터전송'},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

<button onclick="done_bucket(5)" type="button" class="btn btn-outline-primary">완료!</button>

http://localhost:5000/ 브라우저에서 버튼 눌러 확인

2) 서버부터 만들기

버킷 번호를 받아서, 업데이트하기.
num_receive 는 문자열로 들어오니까, 숫자로 바꿔주기!!

[서버 코드 - app.py]

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    # 1. num을 받아와서 해당 리스트를 완료해주어야한다.
    num_receive = request.form['num_give']

    # 2. num_receive로 받아온 데이터를 데이터베이스에 업데이트 해줘야한다.
    # (데이터베이스 바꾸기 코드)
    # ** 번호를 바꾸어야할 때! 클라이언트에서 서버로 받아온 값은 (request.form['num_give'])
    #    다 문자로 받아지게 된다.
    # 따라서 아래에서 데이터베이스 업데이트를 할 경우, 숫자로 변환해주는 함수 int()를 사용해야 한다.
    # db.bucket.update_one({'num': num_receive}, {'$set': {'done': 1}})
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})

    return jsonify({'msg': '버킷 완료!'})

3) 클라이언트 만들기

버킷 넘버를 보여주면 된다. 버킷 넘버는? HTML이 만들어질 때 적히게 된다.

[클라이언트 코드 - index.html]

function done_bucket(num){
      $.ajax({
          type: "POST",
          url: "/bucket/done",
          data: {num_give: num},
          success: function (response) {
              alert(response["msg"])
              window.location.reload()
          }
      });
  }

4) 완성 확인하기

브라우저에서 완료버튼을 누르면 리스트에 선이 그어지는 것을 확인.

5. 7~ 14강 _ 서버 세팅과 도메인 연결

1. AWS E2C 서버 구매

마지막에 key pair 다운

2. SSH 원격접속 후 서버 세팅

git bash 입력 코드
- 1) 원격접속
  - ssh -i 받은키페어를끌어다놓기 ubuntu@**AWS에적힌내아이피**
    - 아이피 : AWS 서버 인스턴스 ID - 퍼블릭IPv4 주소
  - Key fingerprint 관련 메시지가 나올 경우 Yes 입력
  - git bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊기
- 2) 서버에 폴더 만들기
  - mkdir 폴더이름
    - 예시) mkdir sparta
  - 지금 위치에 있는 폴더들 보기
    - ls
  - 내부 폴더 이동
    - cd 폴더명
  - 폴더 밖으로 이동
    - cd ..
- 3) EC2 서버 한번에 세팅
  - 한줄씩 붙여넣고 엔터 누르기
```
# 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
## 로컬 호스트 5000을 떼는 명령어
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
```

3. 파일질라 접속 - 서버 세팅 후 파일 업로드

파이참에서 테스트 파일로 업로드를 먼저 해본다.
- test.py - print(’hello’)
파일질라 서버 세팅
- 왼쪽 - 업로드 폴더 경로 열기
- 상단 파일 아래 - 사이트 관리자 열기
  - new site 클릭 - 이름 설정
  - 프로토콜 - SFTP 로 변경
  - 호스트 - 내 아이피(AWS IPv4 주소)
  - 포트 - 22 (기본으로 정해져있다!)
  - 로그온 유형 - 키파일
  - 사용자 - ubuntu 입력
  - 키 파일 - key pair pem 파일 선택
  - 연결 버튼 클릭 - (알 수 없는 호스트 키 팝업창) 확인
서버에 파일 업로드
- 우측에 서버 보임 - 2번에서 생성했던 폴더로 들어가기
- 좌측의 업로드할 파일 > 우측으로 드래그 이동
  - 테스트 시, 테스트 파일만 이동
  - 프로젝트 업로드시 : static, templates, py 파일 업로드!
- 업로드 완료!
패키지 설치 및 파일 실행 해보기
- git bash에서 실행
  - 테스트시
    - cd sparta
    - ls
    - python test.py (테스트 파일명)
  - 본 업로드시 ※ 파일질라 우측 서버 영역에서 - 기존 테스트 파일 혹은 수정 업로드시 기존 파일 삭제
    - ls - static, templates, py 파일 확인
    - python app.py - 파일 실행
      - 패키지 설치 필요한 경우 - (예시 : flask) no module named ‘flask’ 메시지
        
        pip install 패키지이름
        
        예시 : pip install flask
      - 패키지 설치 필요없는 경우
        
        파이참에서 파이썬 파일 실행했을 때와 동일한 코드가 보인다.

4. AWS E2C 서버 포트 열기

인스턴스 - 보안 - 보안그룹 아래 링크 클릭
인바운드 규칙 편집(Edit inbound rules) 들어가기
규칙 추가
- 포트 범위 5000 - 사용자 지정 > Anywhere-IPv4
- 포트 범위 80 - 사용자 지정 > Anywhere-IPv4
규칙 저장
다시 브라우저에서 아이피 주소로 접속해보기

5. nohup 설정

원격 접속을 종료하더라도, 서버가 돌아갈 수 있도록 만들기
- git bash 다시 열어서 접속 (↑ 누르면 이전 코드 나옴 )
  - ssh -i 받은키페어를끌어다놓기 ubuntu@**AWS에적힌내아이피**
  - ls
  - cd 폴더명
  - python app.py
    - app.py 실행 종료 > crtl + c
- nohup python [app.py](http://app.py) & 입력 후 엔터
이제 git bach를 끄더라도 브라우저에서 접속이 잘된다.
(필요시) 서버 강제 종료 하기
- ps -ef | grep 'python [app.py](http://app.py/)' | awk '{print $2}' | xargs kill

👉 작업파일 배포시(필수 폴더/파일) > 파일질라 업로드 > git bash에서 nohup으로 켜기

👉 수정한 파일 재업로드시 > gitbash에서 서버 강제 종료 > 파일질라에서 서버의 기존 파일삭제 > 수정 파일 업로드 > 다시 nohup으로 켜기

6. 도메인 연결

서버 열어놓은 상태에서 작업
- ip로 브라우저 접속 먼저 확인
- git bash에서 폴더 경로 확인
- nohup으로 켜기
가비아 사이트 접속 - 도메인 구매 완료 후
- DNS 관리 - 구매한 도메인 선택 - DNS 설정
  - 호스트 이름 - @
  - IP 주소 - IPv4주소 (앞 뒤의 문자는 없도록.)
  - 확인 - 저장
도메인으로 접속하여 확인하기

🔎 포트 번호 없애기 - 기본 개념

👉 80포트: HTTP 접속을 위한 기본포트
5000포트: flask 기본포트

http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동 연결
이 점을 이용해 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용
포트포워딩은 리눅스에서 기본으로 제공

💡 배운 내용

데이터베이스와 연동하여, 완료된 리스트의 값을 재 업데이트 해주는 처리
서버 배포와 도메인 연결하기
meta태그 설정하기

🔗 출처

스파르타 코딩클럽 - 웹개발 종합반 수업 자료

et Ji

codesign

이전 포스트

[스파르타_웹개발종합] 4주차_Flask, 서버와 클라이언트 구축 프로젝트

다음 포스트

[스파르타_웹개발종합] 5주차_프로젝트 업데이트, 배포하기

TIL

학습 일자 : 22.10.13 ~ 10.16

[내배단_웹종] 5주차_프로젝트 마무리, 배포하기

5.2 강 _ [버킷리스트] - 프로젝트 세팅

1. 문제 분석 - 완성작부터 보기!

2. 프로젝트 설정 - flask 폴더 구조 만들기

3. 패키지 설치하기

5.3 강 _ [버킷리스트] 뼈대 준비하기

1. 프로젝트 준비 - `index.html`, `app.py` 준비하기

5.4 강 _ [버킷리스트] - POST연습(기록하기)

1. 버킷리스트 기록 API - API 만들고 사용하기 (Create→ POST)

5.5 강 _ [버킷리스트] - GET연습 (보여주기)

2. 버킷리스트 조회 API - API 만들고 사용하기 (Read→ GET)

5.6 강 _ [버킷리스트] - POST연습 (완료하기)

3. 버킷리스트 완료 API - API 만들고 사용하기 (Update→ POST)

5. 7~ 14강 _ 서버 세팅과 도메인 연결

1. AWS E2C 서버 구매

2. SSH 원격접속 후 서버 세팅

3. 파일질라 접속 - 서버 세팅 후 파일 업로드

4. AWS E2C 서버 포트 열기

5. nohup 설정

6. 도메인 연결

🔎 포트 번호 없애기 - 기본 개념

💡 배운 내용

🔗 출처

[스파르타_웹개발종합] 4주차_Flask, 서버와 클라이언트 구축 프로젝트

[스파르타 _ 리액트 과정] 1일차

0개의 댓글

[스파르타_웹개발종합] 5주차_프로젝트 업데이트, 배포하기

TIL

학습 일자 : 22.10.13 ~ 10.16

[내배단_웹종] 5주차_프로젝트 마무리, 배포하기

5.2 강 _ [버킷리스트] - 프로젝트 세팅

1. 문제 분석 - 완성작부터 보기!

2. 프로젝트 설정 - flask 폴더 구조 만들기

3. 패키지 설치하기

5.3 강 _ [버킷리스트] 뼈대 준비하기

1. 프로젝트 준비 - index.html, app.py 준비하기

5.4 강 _ [버킷리스트] - POST연습(기록하기)

1. 버킷리스트 기록 API - API 만들고 사용하기 (Create→ POST)

5.5 강 _ [버킷리스트] - GET연습 (보여주기)

2. 버킷리스트 조회 API - API 만들고 사용하기 (Read→ GET)

5.6 강 _ [버킷리스트] - POST연습 (완료하기)

3. 버킷리스트 완료 API - API 만들고 사용하기 (Update→ POST)

5. 7~ 14강 _ 서버 세팅과 도메인 연결

1. AWS E2C 서버 구매

2. SSH 원격접속 후 서버 세팅

3. 파일질라 접속 - 서버 세팅 후 파일 업로드

4. AWS E2C 서버 포트 열기

5. nohup 설정

6. 도메인 연결

🔎 포트 번호 없애기 - 기본 개념

💡 배운 내용

🔗 출처

[스파르타_웹개발종합] 4주차_Flask, 서버와 클라이언트 구축 프로젝트

[스파르타 _ 리액트 과정] 1일차

0개의 댓글

1. 프로젝트 준비 - `index.html`, `app.py` 준비하기