배고픈 개발자 이야기

[2021/07/20] 클라우드 컴퓨팅 환경과 서비스 본문

인포섹 아카데미

[2021/07/20] 클라우드 컴퓨팅 환경과 서비스

이융희 2021. 7. 20. 14:03
728x90

- 클라우드 컴퓨팅이란?

인터넷기반 컴퓨팅의 일종으로 정보를 자신의 컴퓨터가 아닌 인터넷에 연결된 다른 컴퓨터로 처리하는 기술

 

- 장점

1. 자원 활용성 : '종량제'방식으로 최적화된 리소스 사용

2. 운영 효율성 : 따로 구성 및 설치 없이 언제 어디서든 인프라 구축 및 서비스 이용에 따른 생산성 향상

3. 비용 효율성 : 필요한만큼 사용 및 구축, 운영비 절약

 

- DJango

1. 파이썬의 대표적인 웹 개발 프레임워크 중 하나

2. 풀 스택 프레임워크, MVC 기반 패턴 개발 구조화

3. 템플릿 형태로 기능 제공 등 정해진 틀 존재 => 비교적 자유도 낮음

 

- Flask

1. 파이썬의 대표적인 웹 개발 프레임워크 중 하나

2. 마이크로 프레임워크, 가볍고 간단

3. 지정한 라이브러리와 패키지만 설치됨 => 효율성, 자유도가 높음

 

 

- 개발환경 설치 (Flask, AWS cloud)

1. Editplus

2. 파이참

3. nginx 웹서버

ps) 상세한 환경설정 및 듀토리얼은 첨부파일을 따라하시면 됩니다.

 

 

- Nginx

nginx (다중포트 생성이 가능) <-> app.py (waitress(모듈) 하나당 포트 한개)

 

 

- 웹서버 (웹서버를 통해 여러개의 프로그래밍을 동시에 실행 가능)

 

- app.py

from flask import Flask
from waitress import serve
from flask import render_template

#그래프의 전체적인 설정을 하는 객체
import matplotlib as mpl
#그래프를 그리는 객체
import matplotlib.pyplot as plt
plt.style.use("seaborn")
#폰트 이름 설정
plt.rc('font', family='Malgun Gothic')

import pandas as pd

from pyecharts.charts import Bar
from pyecharts import options as opts

# Flask(__name__) : 플라스크 프로그램을 실행하는 Flask 객체 생성
# __name__ : 실행중인 파일명 app.py에서 확장자 py를 제외한 app이 저장
app = Flask(__name__)

# 웹브라우저에서 http://localhost 입력했을때 실행
@app.route("/")
def hello():
    return render_template('form.html')

# 주소표시줄에 http://localhost/view_image 입력시 실행할 함수
@app.route("/view_image")
def view_image():
    # image.html을 실행시킴
    # title="안녕 플라스크" : title 변수에 안녕 플라스크 대입
    # image_name 변수에 flask.png 대입
    return render_template('image.html', title="안녕 플라스크", image_name='flask.png')

@app.route("/view_weather1")
def view_weather1():
    # weather.csv를 읽어서 df에 대입, point 컬럼을 인덱스로 설정
    df = pd.read_csv("weather.csv", index_col="point")
    city_df = df.loc[["서울", "인천", "대전", "대구", "광주", "부산", "울산"]]
    ax = city_df.plot(kind="bar", title="날씨", figsize=(12, 4), legend=True, fontsize=12)
    ax.set_xlabel("도시", fontsize=20)
    ax.set_ylabel("기온/습도", fontsize=30)
    ax.legend(["기온", "습도"], fontsize=20)
    # 그래프를 weather1.png로 저장
    plt.savefig("C:/ai/cloud/workspace/flask_project/hello_flask/static/weather1.png")
    # weather1.html 실행
    return render_template('weather1.html', image_name="weather1.png", title="광역시 날씨 시각화")

@app.route("/view_weather2")
def view_weather2():
    df = pd.read_csv("weather.csv", index_col="point")
    city_df = df.loc[["서울", "인천", "대전", "대구", "광주", "부산", "울산"]]
    #PPyeChart의 막대그래프 객체 생성
    bar = Bar()
    bar.add_xaxis(["서울", "인천", "대전", "대구", "광주", "부산", "울산"])
    bar.add_yaxis("온도", city_df["temperature"].tolist())
    bar.add_yaxis("습도", city_df["humidity"].tolist())

    bar.set_global_opts(title_opts=opts.TitleOpts(title="광역시 온도 습도"))
    # Pyecharts로 만든 그래프를 static 폴더에 bar1.html로 저장
    bar.render("C:/ai/cloud/workspace/flask_project/hello_flask/static/bar1.html")
    # weather2.html 실행
    return render_template('weather2.html', graph_file_name="bar1.html", title="광역시 날씨 시각화")


# host='0.0.0.0' : 모든 아이피에서
# port=8080 : 8080 포트로 요청이 입력되면
# 함수 hello 실행
serve(app, host='0.0.0.0', port=8080)

 

- form.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>입력 테스트</title>
</head>
<body>
    <form>
        <p>이름 : <input type="text" id="name"/></p>
        <p>이름 입력후 제출 버튼 클릭
            <input type="button" value="제출" onclick="alert('입력')"/>
        </p>
    </form>
</body>
</html>

 

- image.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>이미지 출력</title>
</head>
<body>
    <h2>{{title}}</h2>
    <img src = "/static/{{image_name}}">
</body>
</html>

 

- weather1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h2>{{title}}</h2>
    <img src = "/static/{{image_name}}">
</body>
</html>

 

- weather2.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{title}}</h1>
    <iframe src = "/static/{{graph_file_name}}" width="1000" height="600" frameborder="0"></iframe>
</body>
</html>

 

web 동작순서

1. http://localhost/ 접속

2. nginx:80 수신후 app:8080 함수호출

3. nginx:10 응답(response)

 

 

Comments