GPT 활용 웹개발 기초 5주차 - 웹 배포하기

게시글 생성하기

Form 수정

• music.html 파일의 Form 태그 수정

# Form 태그 수정
<form action="{{ url_for('music_create') }}" method="GET">
  <div class="mb-3">
  
# 데이터 수정
# input 태그 맨 뒤에 name="보낼이름" 이라고 정해주면 보낼이름 에 맞춰서 Flask 서버에서 받을 수 있음
<form action="{{ url_for('music_create') }}" method="GET">
  <div class="mb-3">
    <label for="username-input" class="form-label">유저</label>
    <input type="text" class="form-control" id="username-input" name="username">
    <div id="usernamegHelp" class="form-text">등록하시는 사용자 이름을 넣어주세요.</div>
  </div>
  <div class="mb-3">
    <label for="title-input" class="form-label">노래 제목</label>
    <input type="text" class="form-control" id="title-input" aria-describedby="songHelp" name="title">
    <div id="songHelp" class="form-text">좋아하는 노래 제목을 넣어주세요.</div>
  </div>
  <div class="mb-3">
    <label for="artist-input" class="form-label">가수</label>
    <input type="text" class="form-control" id="artist-input" name="artist">
  </div>
  <div class="mb-3">
    <label for="image-input" class="form-label">앨범 커버 URL</label>
    <input type="text" class="form-control" id="image-input" name="image_url">
  </div>
  <button type="submit" class="btn btn-danger">Submit</button>
</form>

# method는 여러 방법이 있는데, 주로 `POST` 나 `GET` 을 많이 사용합니다.
#`GET` 은 검색 등에 많이 사용하고, `POST` 는 로그인 등 중요한 정보를 서버에 전달할 때 많이 사용합니다.

• Form에서 보낸 데이터 Flask에서 받기

@app.route('/music/create')
def music_create():
    # form으로 데이터 입력 받기
    username_receive = request.args.get("username")
    title_receive = request.args.get("title")
    artist_receive = request.args.get("artist")
    image_receive = request.args.get("image_url")

    # 데이터를 DB에 저장하기
    song = Song(username=username_receive, title=title_receive, artist=artist_receive, image_url=image_receive)
    db.session.add(song)
    db.session.commit()
    
    
 # DB 사용 기본 코드
 import os
from flask_sqlalchemy import SQLAlchemy

basedir = os.path.abspath(os.path.dirname(__file__))
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] =\
        'sqlite:///' + os.path.join(basedir, 'database.db')

db = SQLAlchemy(app)

class Song(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(100), nullable=False)
    artist = db.Column(db.String(100), nullable=False)
    title = db.Column(db.String(100), nullable=False)
    image_url = db.Column(db.String(10000), nullable=False)

    def __repr__(self):
        return f'{self.title} {self.artist} 추천 by {self.username}'

with app.app_context():
    db.create_all()

• Redirect 사용 게시글 확인 페이지 이동

# 맨 위에 추가
from flask import Flask, render_template, request, url_for, redirect

@app.route('/music/create')
def music_create():
    # form으로 데이터 입력 받기
    username_receive = request.args.get("username")
    title_receive = request.args.get("title")
    artist_receive = request.args.get("artist")
    image_receive = request.args.get("image_url")

    song = Song(username=username_receive, title=title_receive, artist=artist_receive, image_url=image_receive)
    db.session.add(song)
    db.session.commit()

    return render_template('music.html')

 

DB의 모든 데이터 보여주기

# app.py 내에 추가
@app.route('/music/')
def render_music():
    # 전부 다 가져오기
    songs_list = Song.query.all()
    return render_template('music.html', data=songs_list)
    
# music.html 파일 수정
<div id="card-list" class="row row-cols-1 row-cols-md-4 g-4 mx-auto w-75 pb-5">
      {% for song in data %}
      <div class="col">
        <div class="card h-100">
          <img src="{{ song.image_url }}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">{{ song.title }}</h5>
            <p class="card-text">{{ song.artist}}</p>
            <p class="card-text">추천 by {{ song.username }}</p>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

 

• filter 기능 사용해 특정 조건의 데이터만 보여주기

@app.route('/music/<username>/')
def render_music_filter(username):
    # 필터하기
    filter_list = Song.query.filter_by(username=username).all()
    return render_template('music.html', data=filter_list)
    
@app.route('/music/create/')
def music_create():
		...(생략)
    return redirect(url_for('render_music_filter', username=username_receive))

 

Pythonanywhere로 배포

Pythonanywhere 사용 준비

1. pythonanywhere 사이트 접속 및 회원 가입 (가입 후 이메일 인증 진행)
2. 상단의 Web 메뉴 선택 후 Add a new wep app 버튼 클릭
3. 메뉴창이 나오면 Web framework 선택 후 사용한 python 버전 선택
4. 화면에 나온 Path 주소를 복사 후 Path 입력 창에 입력
5. 생성된 파란색 주소창을 클릭하면 웹 페이지 접속 가능

1~2)

3)

4)

5)

 

코드 준비 및 업로드

1. app.py 파일의 이름을 flask_app.py로 변경
2. 가상환경 세팅을 위해 pip freeze를 사용해 라이브러리 목록 저장
3. 가상환경 폴더를 제외한 Project에 사용한 모든 파일을 zip 파일로 압축
4. Pythonanywhere에 코드 업로드(Source Code 칸의 Go To directory 클릭)
5. Upload a file에서 프로젝트 압축 파일을 업로드 후 Open Bash console here 클릭

# pip freeze 사용법
pip freeze > requirements.txt

 

4)

5)

 

Pythonanywhere에 가상 환경 설정 & 배포

1. unzip project.zip(파일이름)을 통해 압축 해제 (replace flask_app.py 나오면 A 입력
2. python -m venv venv로 가상환경 만들기
3. source venv/bin/activate로 가상환경 활성화
4. requirement.txt 파일의 라이브러리 설치
5. Web 메뉴 이동 후 virtualenv 의 Enter Path to a virtualenv, if desired 를 클릭
6. 복사한 Source code 경로 뒤에 venv를 붙여서 넣기
7. Reload의 버튼 클릭 후 파란색 주소 창 눌러서 웹 페이지 접속 가능
8. 접속한 웹 페이지의 주소를 복사하여 배포 가능

# requirement.txt로 라이브러리 설치
pip install -r requirement.txt

# Source code 경로 예시( source code는 code: 위치에 있는 source code를 복사해서 사용)
/home/codewithwoong/mysite/venv/

 

Og 태그 설정

• HTML 파일의 head 태그에 og 태그 삽입

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

# 코드의 content="" 위치에 복사한 이미지 주소 입력 시 해당 이미지로 og 태그 설정 됨

 

• Og 태그 초기화

# 카카오톡 og 태그 초기화하기: https://developers.kakao.com/tool/clear/og

1.  페이지 접속 후 공유할 URL 입력
2. 캐시 초기화 버튼 클릭
3. 디버그 버튼으로 이미지 미리보기 가