[Web] Flask 서버구현

서버를 구현하기 위해 사용할 프레임워크이다.

이 프레임워크를 사용하는 데는 몇 가지 규칙이 있다.

파일구조

Flask 프레임워크를 사용하기 위해서는 다음과 같은 폴더의 계층 구조를 필요로 한다.

prac 폴더 구조
- - -
prac
|— venv
|— app.py (서버)
|— templates
         |— index.html (클라이언트 파일)

파일이름

templates 폴더의 이름은 반드시 고정적으로 사용해야 한다.

일반적으로 앱을 실행시킬 때 가장 기본이 되는 파일의 이름은 app.py를 많이 사용한다.

프로젝트 세팅

우선 프로젝트를 생성할 폴더로 이동해서 VSCode로 열어준다. 그리고 app.py파일을 생성하고 가상환경을 설정해 준다.

가상환경 설정

python -m venv venv

해당 명령어의 실행이 완료되면 venv 폴더가 생성된 걸 확인할 수 있다. 그리고 프로젝트 하단의 Selected Interpreter를 열어서 venv로 설정해 준다.

설정이 끝났다면 터미널을 재시작해서 실행경로의 끝이 (venv)로 나오는 걸 확인한다.

Flask

터미널에서 pip install flask 명령어를 입력해서 패키지를 설치해 준다.

그리고 app.py에서 flask를 시작하는 코드를 작성한다.

from flask import Flask

app = Flask(__name__)

@app.route('/')

def home():

return 'This is Home!'

if __name__ == '__main__':

app.run('0.0.0.0',port=5000,debug=True)

이제 화면을 우클릭하고 Run Python File in Terminal을 실행시키면 보안 경고창이 뜨고 허용으로 해당 파일의 실행을 진행시킨다.

터미널 창에는 위와 같은 결과가 보이며 이제 브라우저를 열고 localhost:5000을 입력하면 페이지가 열린다.

페이지를 추가로 띄워보도록 한다.

@app.route('/mypage')

def mypage():

return 'This is mypage!'

추가한 페이지는 기본 주소에서 경로를 입력하면 접근할 수 있다.

여기서 반환되는 부분에서 코드를 작성해서 html을 만들 수 있다.

@app.route('/mypage')

def mypage():

return '<button>버튼입니다</button>'

하지만 여기도 html을 직접 입력하는 작업은 복잡하고 보기도 좋지 않기 때문에 별도의 html파일을 만들고 연동시키는 방식으로 한다.

templates

html파일을 연동시켜 주기 위해서는 반드시 templates 이름의 폴더 안에 파일을 생성해주어야 한다.

테스트용 index.html 코드를 작성한다.

<!DOCTYPE html>

<head>

<title>Document</title>

function hey(){

alert('안녕!')

}

</script>

</head>

<body>

</body>

</html>

그리고 이 코드를 flask에서 불러와서 페이지를 띄워보도록 한다.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def home():

return 'This is Home!'

@app.route('/mypage')

def mypage():

return render_template('index.html')

if __name__ == '__main__':

app.run('0.0.0.0',port=5000,debug=True)

flask 패키지를 임포트 하는 코드에 render_template를 추가한다.

그리고 반환되는 값을 render_template와 파일이름을 넣는다.

파일을 저장하고 브라우저를 확인해 본다.

index.html이 제대로 불러와진 것을 볼 수 있다.

저작자표시

'스파르타 > Web' 카테고리의 다른 글

[Web] 화성땅 구매 - ( week 4 ) (0)	2023.04.25
[Web] Get/Post - ( week 4 ) (0)	2023.04.24
[Web] 과제 (지니뮤직 크롤링) - ( week 3 ) (0)	2023.04.20
[Web] 스크래핑 데이터 저장 - ( week 3 ) (0)	2023.04.20
[Web] MongoDB Atlas ( week 3 ) (0)	2023.04.20

개발일지