[AWS] RDS Python 코드로 이용하기 - AWS RDS(Mysql)을 이용하여 사진 업로드

Infra/AWS

[AWS] RDS Python 코드로 이용하기 - AWS RDS(Mysql)을 이용하여 사진 업로드

민돌v 2021. 12. 20. 14:23

전전전? 아무튼 전 게시물에서 cloudfront로 프론트를, EB로 백엔드 application.py를 배포에 프론트와 백엔드를 연동해서 배포를 완료했다.

이번에는 이걸 이용해서 DB를 RDS로 연동해 주려고 한다.

1. EB 백엔드 예시 코드 - application.py

import boto3
from flask import Flask, render_template, request, jsonify
from flask_cors import CORS
import os
from flaskext.mysql import MySQL  #pip install install flask-mysql

application = Flask(__name__)

# cors
cors = CORS(application, resources={r"/*": {"origins": "*"}})

# mysql
# EB 환경변수에서 관리
mysql = MySQL()
application.config['MYSQL_DATABASE_USER'] = os.environ["MYSQL_DATABASE_USER"]
application.config['MYSQL_DATABASE_PASSWORD'] = os.environ["MYSQL_DATABASE_PASSWORD"]
application.config['MYSQL_DATABASE_DB'] = os.environ["MYSQL_DATABASE_DB"]
application.config['MYSQL_DATABASE_HOST'] = os.environ["MYSQL_DATABASE_HOST"]
mysql.init_app(application)


@application.route('/')
def main():
    return "핵심 쏙쏙 AWS"

@application.route('/fileupload', methods=['POST'])
def file_upload():
    file = request.files['file']
    s3 = boto3.client('s3',
                      aws_access_key_id=os.environ["AWS_ACCESS_KEY_ID"],
                      aws_secret_access_key=os.environ["AWS_SECRET_ACCESS_KEY"]
                      )
    s3.put_object(
        ACL="public-read",
        Bucket=os.environ["BUCKET_NAME"],
        Body=file,
        Key=file.filename,
        ContentType=file.content_type
    )

    conn = mysql.connect()
    cursor = conn.cursor()
    cursor.execute("insert into file(file_name) value('" + file.filename + "')")
    conn.commit()
    conn.close()

    return jsonify({'result': 'success'})

@application.route('/files', methods=['GET'])
def files():
    conn = mysql.connect()
    cursor = conn.cursor()
    cursor.execute("SELECT file_name from file")
    data = cursor.fetchall()
    conn.close()

    return jsonify({'result': 'success', 'files':data})


if __name__ == '__main__':
    application.debug = True
    application.run()

2. Cloudfront 프론트 예시 코드 - index.html

<!Doctype html>
<html lang="ko">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>

    <!-- 구글폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">


    <title>스파르타코딩클럽 | 나홀로 메모장111</title>

    <!-- style -->
    <style type="text/css">
        * {
            font-family: 'Stylish', sans-serif;
        }

        .wrap {
            width: 900px;
            margin: auto;
        }

        .comment {
            color: blue;
            font-weight: bold;
        }

        #post-box {
            width: 500px;
            margin: 20px auto;
            padding: 50px;
            border: black solid;
            border-radius: 5px;
        }
    </style>
    <script>
        $(document).ready(function(){
            getFiles();
        })

        function save() {
            var form_data = new FormData($('#upload-file')[0]);
            $.ajax({
                type: 'POST',
                url: '{EB URL}/fileupload',
                data: form_data,
                processData: false,
                contentType: false,
                success: function (data) {
                    alert("파일이 업로드 되었습니다!!");
                    location.reload();
                },
            });
        }

        function getFiles() {
            $.ajax({
                type: 'GET',
                url: '{EB URL}/files',
                success: function (data) {
                    for(let i = 0 ; i < data['files'].length ; i++){
                        makeCard(data['files'][i]);
                    }
                },
            });
        }

        function makeCard(data){
            let card = ` <div class="card">
                                <div>
                                    <img class="card-img-top"
                                         src="http://djocwjyh5wkd4.cloudfront.net/${data}"
                                         alt="Card image cap">
                                    <p class="card-text comment">${data}</p>
                                </div>
                            </div>`;
            $("#cards-box").append(card);
        }
    </script>

</head>

<body>
<div class="wrap">
    <div class="jumbotron">
        <h1 class="display-4">나홀로 이미지 메모장! 완료!!</h1>
        <p class="lead">중요한 이미지를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
        <hr class="my-4">
    </div>
    <div id="post-box" class="form-post">
        <div>
            <div class="form-group">
                <form id="upload-file">
                    <label for="post-url">이미지 파일</label>
                    <input type="file" name="file"/>
                </form>
            </div>
            <button type="button" class="btn btn-primary" onclick="save()">저장</button>
        </div>
    </div>
    <div id="cards-box" class="card-columns">
    </div>
</div>
</body>

</html>

3. EB 환경 변수 설정

Mysql 접속 시크릿 키들을 EB 환경변수에 추가해서 보안 관리
EB 환경 변수 편집 위치 or 방법은
[EB 환경] - 왼쪽 메뉴 [구성] - [소프트웨어 편집] - [환경변수 편집]

# mysql
# EB 환경변수에서 관리
mysql = MySQL()
application.config['MYSQL_DATABASE_USER'] = os.environ["MYSQL_DATABASE_USER"]
application.config['MYSQL_DATABASE_PASSWORD'] = os.environ["MYSQL_DATABASE_PASSWORD"]
application.config['MYSQL_DATABASE_DB'] = os.environ["MYSQL_DATABASE_DB"]
application.config['MYSQL_DATABASE_HOST'] = os.environ["MYSQL_DATABASE_HOST"]
mysql.init_app(application)

database_Db : 사용할 스키마
host : RDS 앤드포인트

그 다음 깃 액션으로 푸시하면,,,, 짠!

s3에 새롭게 업로드한 index.html - 조금 기다리면 cloudfront 반영

저작자표시

'Infra > AWS' 카테고리의 다른 글

[AWS] EC2 가비아 도메인 연결하기 (0)	2023.02.12
[AWS] EC2 에 Spring boot 올리는 과정 및 삽질 (with java 17 + spring boot3.0) (0)	2023.02.10
[AWS] Spring boot 랑 RDS Mysql 연동하기 (GitAction, EB) (0)	2021.12.15
[AWS] 도커와 깃 액션을 이용해서 백엔드 배포하기 - EC2, EB, Docker, GitAction (0)	2021.12.15
[AWS] 프론트 부분 AWS 배포 - (S3, CloudFront 연동) (0)	2021.12.08

현재글[AWS] RDS Python 코드로 이용하기 - AWS RDS(Mysql)을 이용하여 사진 업로드

힘차게, 열심히 공대생

[AWS] RDS Python 코드로 이용하기 - AWS RDS(Mysql)을 이용하여 사진 업로드

1. EB 백엔드 예시 코드 - application.py

2. Cloudfront 프론트 예시 코드 - index.html

3. EB 환경 변수 설정

'Infra > AWS' 카테고리의 다른 글

'Infra/AWS'의 다른글

티스토리툴바

[AWS] RDS Python 코드로 이용하기 - AWS RDS(Mysql)을 이용하여 사진 업로드

1. EB 백엔드 예시 코드 - application.py

2. Cloudfront 프론트 예시 코드 - index.html

3. EB 환경 변수 설정

'Infra > AWS' 카테고리의 다른 글

'Infra/AWS'의 다른글

관련글

티스토리툴바