웹개발 종합반 5주차 공부일지

웹개발 종합반

스파르타 웹개발 종합반 5주차 회고 & 숙제(하단에 위치)

※ Flask 프레임워크를 이용하여 API를 만들 수 있고, '버킷리스트' 사이트를 연습하여 만들어보고

EC2에 나의 프로젝트를 올리는 방법을 배웠다.

1. Filezilla 설치하기

설치경로: https://filezilla-project.org/download.php

2. 가비아 가입 및 도메인 구매하기

경로: https://www.gabia.com

웹을 넘어 클라우드로. 가비아

그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브

www.gabia.com

도메인은 자신이 원하는대로 입력한다.

※ 결과

3. 프로젝트 세팅

프로젝트 flask 설정 폴더 구조

패키지 설치요소: flask, pymongo, dnspython

버킷리스트_ app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.igsai3b.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta


@app.route('/')
def home():
   return render_template('index.html')

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    bucket_list = list(db.users.find({}, {'_id': False}))
    count = len(bucket_list) + 1

    doc = {
        'num': count,
        'bucket': bucket_receive,
        'done': 0
    }

    db.bucket.insert_one(doc)

    return jsonify({'msg': '등록 완료!'})

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

@app.route("/bucket", methods=["GET"])
def bucket_get():
    bucket_list = list(db.bucket.find({}, {'_id': False}))

    return jsonify({'buckets': bucket_list})

if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

버킷리스트 _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>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <title>인생 버킷리스트</title>

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }
        .mypic {
            width: 100%;
            height: 200px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .mypic > h1 {
            font-size: 30px;
        }
        .mybox {
            width: 95%;
            max-width: 700px;
            padding: 20px;
            box-shadow: 0px 0px 10px 0px lightblue;
            margin: 20px auto;
        }
        .mybucket {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .mybucket > input {
            width: 70%;
        }
        .mybox > li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-bottom: 10px;
            min-height: 48px;
        }
        .mybox > li > h2 {
            max-width: 75%;
            font-size: 20px;
            font-weight: 500;
            margin-right: auto;
            margin-bottom: 0px;
        }
        .mybox > li > h2.done {
            text-decoration:line-through
        }
    </style>
    <script>
        $(document).ready(function () {
            show_bucket();
        });
        function show_bucket(){
            $.ajax({
                type: "GET",
                url: "/bucket",
                data: {},
                success: function (response) {
                    let rows = response['buckets']
                    for (let i = 0; i < rows.length; i++) {
                        let bucket = rows[i]['bucket']
                        let num = rows[i]['num']
                        let done = rows[i]['done']

                        let temp_html = ``
                        if (done == 0) {
                            temp_html = `        <li>
                                                    <h2>✅ ${bucket}</h2>
                                                    <button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                                </li>`
                        } else {
                            temp_html = `        <li>
                                                    <h2 class="done">✅ ${bucket}</h2>
                                                </li>`
                        }
                        $('#bucket-list').append(temp_html)
                    }

                    console.log(response['buckets'])
                }
            });
        }
        function save_bucket(){
            let bucket = $('#bucket').val()

            $.ajax({
                type: "POST",
                url: "/bucket",
                data: {bucket_give:bucket},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
        function done_bucket(num){
            $.ajax({
                type: "POST",
                url: "/bucket/done",
                data: {num_give:num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }
    </script>
</head>
<body>
    <div class="mypic">
        <h1>나의 버킷리스트</h1>
    </div>
    <div class="mybox">
        <div class="mybucket">
            <input id="bucket" class="form-control" type="text" placeholder="이루고 싶은 것을 입력하세요">
            <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
        </div>
    </div>
    <div class="mybox" id="bucket-list">
    </div>
</body>
</html>

4. 내 프로젝트를 서버에 올리기

언제나 요청에 응답하려면??

1) 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야한다.

2) 모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.

5. AWS 서버 구매하기

1_Ubuntu Server 18.04 구매

※ 서버종료 하는 법 (1년 후 자동결제 방지!

2_ECS에 접속하기

SSH(Secure Shell Protocol)

다른 컴퓨터에 접속할 때 쓰는 프로그램입니다. 다른 것들 보다 보안이 상대적으로 뛰어나다.

접속할 컴퓨터가 22번 포트가 열려있어야 접속 가능하다.

※ TIP!: 리눅스에서 많이 쓰는 명령어들

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

3_서버 세팅하기

Filezilla를 이용하여, 세팅 해보기

Filezilla 실행

※ 서버 환경 세팅

#python3 > python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 설치
sudo apt-get update
sudo apt-get install -y python3-pip

# pip3 대신 pip 라고 입력하기 위한 명령어
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
#포트포워딩 (80포트 > 5000포트)
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

※ Flask 서버 실행

1_ 패키지 설치

pip install flask
pip install pymongo dnspython

2_AWS에서 5000포트를 열어주기

※ 포트 번호 없애기 - 기본 개념

1_http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 된다.

포트 번호를 입력하지 않아도 자동으로 접속되기 위해,

2_80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용한다.

※ nohup 설정하기

1_SSH 접속을 끊어도 서버가 계속 돌게 하기

# 아래의 명령어로 실행하면 된다
nohup python app.py &

2_서버 종료하기 - 강제종료 하는 방법

ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

※ 도메인 설정

가비아 접속 후 DNS 설정

IP 주소로 접근해보기

EX) 내사이트: http://marinred-bk.shop/

PSY(싸이) 팬명록🎼

응원 한마디 부탁드립니다!

marinred-bk.shop

op태그 넣기 (위와 같은 사진, 내용, 주소)

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="이미지URL" />

op 이미지 초기화 방법

페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/
카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

이유: 페이스북/카카오톡 등에서 처음 것을 저장해놓기 때문에 초기화를 따로 해줘야 한다.

<숙제>

http://marinred-bk.shop/

PSY(싸이) 팬명록🎼

응원 한마디 부탁드립니다!

marinred-bk.shop

※ 느낀점

1) 서버를 설정하고 만드는 과정에서 결과가 나오고 나서 뿌듯했다.

2) 어려운 것 같으면서도 해결방법을 찾고, 좋은 결과가 나와 성취감이 있었다!!!!

좋아요공감

게시글 관리

'웹개발 종합반' 카테고리의 다른 글

스파르타 웹개발 종합반 4주차 회고 & 숙제(하단에 위치) (0)스파르타 웹개발 종합반 3주차 회고 & 숙제(하단에 위치) (0)스파르타 웹개발 종합반 2주차 회고 & 숙제(하단에 위치) (0)스파르타 웹개발 종합반 1주차 회고 & 숙제 (하단에 위치) (0)

2022.08.19

2022.08.16

2022.08.13

'웹개발 종합반' Related Articles

0 Comments

저작자표시 비영리 변경금지 (새창열림)

'코딩' 카테고리의 다른 글

아키텍처 (0)	2022.11.06
웹개발 종합반 5주차 (0)	2022.11.05
비개발자를 위한, 웹개발 종합반 4주차 (0)	2022.11.05
스파르타코딩클럽 웹개발 종합반(3주차) (0)	2022.11.03
일단 진도 나가기 (1)	2022.11.02

초록의 과일과 사회

웹개발 종합반 5주차 공부일지

스파르타 웹개발 종합반 5주차 회고 & 숙제(하단에 위치)

'웹개발 종합반' 카테고리의 다른 글

'코딩' 카테고리의 다른 글

티스토리툴바

웹개발 종합반 5주차 공부일지

스파르타 웹개발 종합반 5주차 회고 & 숙제(하단에 위치)

'웹개발 종합반' 카테고리의 다른 글

'코딩' 카테고리의 다른 글

관련글

티스토리툴바