RDS 와 달리 ElastiCache는 외부에서 접속이 되지 않도록 되어있습니다.
그래서 배포를 해서 같은 VPC내의 인스턴스에서 확인해야합니다.

🔥  내 컴퓨터에서는 접속할 수 없습니다.
꼭 AWS 에 배포해서 정상작동을 테스트 해보아야 합니다.

1. 코드 세팅

  • 백엔드 - application.py
import boto3
from flask import Flask, render_template, request, jsonify
from flask_cors import CORS
import os
from flaskext.mysql import MySQL
import redis

application = Flask(__name__)

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

# mysql
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)

# redis
db = redis.Redis(os.environ["REDIS_HOST"], decode_responses=True)


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


    cursor.execute("SELECT count(*) from file")
    data = cursor.fetchone()
    conn.close()
    db.set("fileCount", data[0])

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

@application.route('/file/count', methods=['GET'])
def file_count():
    return jsonify({'result': 'success', 'count':db.get("fileCount")})

if __name__ == '__main__':
    application.debug = True
    application.run()
  • 라이브러리 추가 : redis
  • EB 배포 세팅 : pip freeze > requirements.txt
  • EB 환경 속성 추가

REDIS_HOST : REDIS의 엔드포인트

 

  • 프론트 - 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(){
            getCount();
            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="{CloudFront도메인}/${data}"
                                         alt="Card image cap">
                                    <p class="card-text comment">${data}</p>
                                </div>
                            </div>`;
            $("#cards-box").append(card);
        }

        function getCount() {
            $.ajax({
                type: 'GET',
                url: '{EB URL}/file/count',
                success: function (data) {
                    $("#count").html(data.count);
                },
            });
        }
    </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>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">총 파일갯수:<span id="count"></span></a>
    </nav>
    <div id="cards-box" class="card-columns">
    </div>
</div>
</body>

</html>

 

  • 세팅 다 했으면 push - 자동 배포

 

저작자표시 비영리 변경금지

'프로그래밍 > AWS' 카테고리의 다른 글

Amazon OpenSearch Service (feat. Elasticearch)  (0) 2022.04.28
Elasticsearch란? (with. Amazon OpenSearch Service)  (0) 2022.04.27
ElastiCache란? (생성)  (0) 2022.04.27
RDS + Python 연동하는법  (0) 2022.04.27
RDS 사용법 (AWS) - 파이참 연동  (0) 2022.04.27

+ Recent posts

티스토리툴바