배포하기

박서현·2023년 8월 7일
0
post-thumbnail
post-custom-banner

OG tag

팬명록에 이어서 작성


📁templates/index.html <head>에 추가

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />
📁templates/index.html
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>초미니홈피 - 팬명록</title>
    <meta property="og:title" content="아이유 팬명록" />
    <meta property="og:description" content="아티스트에게 응원 한마디!" />
    <meta property="og:image" content="data:image/jpeg;base64,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" />
    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
        rel="stylesheet" />
    <style>
        * {
            font-family: "Noto Serif KR", serif;
        }

        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.5),
                    rgba(0, 0, 0, 0.5)),
                url("data:image/jpeg;base64,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");
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost>button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards>.card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            set_temp();
            show_comment();
        });
        function set_temp() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
                $('#temp').empty()
                let temp = data['temp']
                $('#temp').text(temp)
            });
        }
        function save_comment() {
            let name = $('#name').val()
            let comment = $('#comment').val()

            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("comment_give", comment);

            fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }
        function show_comment() {
            fetch('/guestbook').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()
                rows.forEach((a) => {
                    let name = a['name']
                    let comment = a['comment']
                    let temp_html = `<div class="card">
                                        <div class="card-body">
                                            <blockquote class="blockquote mb-0">
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                            </blockquote>
                                        </div>
                                    </div>`
                    $('#comment-list').append(temp_html)
                })
            })
        }
    </script>
</head>

<body>
    <div class="mypic">
        <h1>아이유 팬명록</h1>
        <p>현재기온: <span id="temp">36</span></p>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url" />
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">
            댓글 남기기
        </button>
    </div>
    <div class="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>

</html>



서버에 올리기

AWS Elastic Beanstalk

엑세스키 메모장에 저장해두기

vscode 터미널에 한 줄 한 줄 입력

- 터미널 준비하기 - 
mkdir deploy
cp app.py deploy/application.py
cp -r templates deploy/templates
pip freeze > deploy/requirements.txt
cd deploy

- appication.py 세팅하기 - 
application = app = Flask(__name__)
app.run()

- 패키지 설치하기 - 
pip install awsebcli

- 보안 자격증명 - 
eb init

- 초기 설정 - 
eb create myweb

- 코드 수정 & 업데이트 - 
eb deploy myweb
post-custom-banner

0개의 댓글