whenever purple

- AWS 서버연결

- Gitbash 사용

- 가비아 도메인연결

1.
AWS 서버 구매하기

서울에 있는 '컴퓨터 1개 사는 것'과 같다.

▼ 더보기 클릭 ▼ 

더보기

1) AWS웹사이트 접속

https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2

 

 

 

2) AWS 인스턴트 시작

① 지역: 서울

②'인스턴스' 선택 → '인스턴스 시작' 선택

 

 

 

3) AMI 선택

'Ubuntu Server 20.04 LTS'로 선택

(프리 티어 사용: 1년에 1대 무료사용 가능하다는 의미)

 

 

4) 인스턴스 유형 선택

프티티어사용 가능 체크 → '검토 및 시작' 선택

 

 

5) 인스턴스 시작 검토

'시작하기' 선택

 

 

6) 새 키 페어 생성

 

 

①새 키 페어 생성

② '키 페어 이름'은 마음대로 지정가능

③ '키 페어 다운로드' 선택 → 바탕화면에 저장

④ '인스턴트 시작' 선택

 

 

 

7) 인스턴스 업데이트

'대기중' 에서 '실행중'으로 변경됨

(1~2분소요)

 

 

---

 

 

추가) 인스턴스 중지와 종료할때

인스턴스 중지: AWS의 컴퓨터를 끈다. 

인스턴스 종료: AWS의 컴퓨터를 반납한다. 

#새로 만들때는 '인스턴스 종료'로 컴퓨터를 반납후, 새로 만든다. 

2.
Git Bash _ AWS 서버 확인하기

GitBash는 명령어로만 작동하기때문에 천천히 따라하기

▼ 더보기 클릭 ▼

더보기

1) Git Bash를 켠다.

 

MAC의 경우 초기작업이 필요하다.

sudo chmod 400 '위에서 저장한 키페어를 끌어 넣는다.' → 엔터 → 맥비밀번호 입력 

 

2) 윈도우/맥에서 작성 (구매한 AWS서버에 원격접속)

ssh -i '위에서 저장한 키페어를 끌어 넣는다.' ubuntu@'퍼블릭IPv4주소(IP주소)'   → 엔터 → yes → 엔터

퍼블릭IPv4 주소를 표시된 부분을 눌러서 복사 → 마우스왼쪽 '붙여넣기' 

*Git Bash에서 복사가 안됨.

*Gitbash를 다시 킬 경우, 화살표↑ 를 눌러서 작동가능.

+ Git Bash명령어:

폴더만들기  |   내위치확인하기  |  폴더 들어가기  |  폴더에서 나오기

▼ 더보기 클릭 ▼

3.
Filezila _ AWS서버 세팅하기

▼ 더보기 클릭 ▼

더보기

1) Filezila 접속

 위의 표시된 부분을 눌러 사이트관리자를 열어준다.

 

 

2) 사이트 관리자 설정

 

① New site 선택 → 'myec2' 로 저장  #폴더 이름은 마음대로

② 호스트는 IP주소 복사해서 붙여넣기

③ 포트(P) : 22

④ 로그온 유형 (L) : 키파일

사용자(U) : ubuntu

키파일(K) :  저장한 키페어 파일(PEM파일) 불러오기

( AWS 서버구매하기 키페어 저장 참고)

⑤ '연결' 선택 → 알수없는 호스트키 창에서 '확인' 선택

 

4.
AWS 보안 설정하기

▼ 더보기 클릭 ▼

더보기

1) 인스턴트 ID 선택

'인스턴트 ID' 선택

 

2) 보안선택

 '보안' 선택 → '보안그룹' 선택

 

 

3) 인바운드 규칙 설정

 '인바운드 규칙 편집' 선택 ('edit inbound rules')

 

 

4) 인바운드 규칙 설정 및 저장

 

① 기존의 포트범위 22는 있음 

② 규칙추가 → 포트범위: 5000  → 소스: Anywhere-IPv4 

③ 규칙추가 → 포트범위: 80  → 소스: Anywhere-IPv4 

④ 규칙 저장

+ Filezila에 파일을 올리고 실행시켜보기

▼ 더보기 클릭 ▼

더보기

1) 파일 옮기기

파일 옮길때는 static / templates / app.py 만 이동시킨다. 

(파일질라의 왼쪽은 내컴퓨터,  오른쪽은 구매한 컴퓨터)

 

 

 

2) Git Bash_구매한 컴퓨터 확인하기

 

위의 화면에서 시작

① 화살표 ↑ → 엔터

 (이전 작성한 키페어 생성)

② ls → 엔터   

(현재위치 확인, '보라색 파일이름' 이 현재 위치)

③ cd sparta → 엔터

(화면 ~/sparta$ 이 생성됬다면 해당파일에 들어감)

④ ls (현재위치 확인) → 엔터   

(위의 옮긴 파일을 확인 가능)

⑤ python app.py → 엔터

    # No moudule named 'flask'가 나왔다면, pip install flask 

 

 

 

3) IP주소로 인터넷 배포 완료

 

IP주소:5000 또는 IP주소 로 접속 가능

( 13.000.000.000:5000  /  13.000.000.000 )

 

 

 

 4) gitBash_(원격)을 종료 + 종료해도 웹사이트 

①  원격종료 없이 서버돌아가기 : nohup python app.py &

②  강제종료하기 :  ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill

 

5.
가비아 _ 도메인 연결하기

1) 가비아 회원가입 후 도메인 구매하기

▼ 더보기 클릭 ▼

더보기

1) 가비아 회원가입 (특이사항이 없어 패쓰-!)

https://www.gabia.com/

 

2) 가비아 도메인 만들기

 

① 웹사이트 좌측 상단 'gabia' 선택 

② 자신이 원하는 도메인 작성 → 검색

 

 

 

3) 가비아 도메인 구매하기

 

.shop 의 도메인 선택 → 신청하기

(.shop은 1년동안만 500원으로 이용가능)

 

 

3) 가비아 도메인 결제하기

 

① '1년' 으로 수정 

(보통 3년으로 선택되어있음)

② 안전 잠금 신청 선택 X

( 이 외 특이사항 없음)

③ 무통장 입금으로 결제진행

(1천원 이하는 카트결제 불가)

2) IP주소와 가비아 도메인 연결하기

▼ 더보기 클릭 ▼

더보기

1) 가비아 접속

https://dns.gabia.com/

 

 

 

2) 내 도메인 선택

도메인 '체크박스' 선택 → 'DNS 설정' 선택

 

 

 

3) 도메인 설정

 

① 호스트:  @ 

② 값/위치: IP주소

(숫자만 입력. 00.000.000.000)

③ 확인 → 저장

 

 

 

4) 도메인 확인

 자신의 도메인으로 접속해보기

 

서버연결 (파이썬)

import pymongo
import certifi

client = pymongo.MongoClient(
    "mongodb+srv://test:sparta@cluster0.hd7sx.mongodb.net/Cluster0?retryWrites=true&w=majority",
    tlsCAFile=certifi.where())
db = client.dbsparta

flask로 mongoDB연결 + HTML 연결 (파이썬)

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

@app.route("/homework", methods=["POST"])
def homework_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST 연결 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    return jsonify({'msg': 'GET 연결 완료!'})

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

크롤링(파이썬) 

import requests                       #pip install requests
from bs4 import BeautifulSoup         #pip install bs4

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_give']

    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    data = requests.get(url_receive, headers=headers)

    soup = BeautifulSoup(data.text, 'html.parser')

    title = soup.select_one('meta[property="og:title"]')['content']
    image = soup.select_one('meta[property="og:image"]')['content']
    desc = soup.select_one('meta[property="og:description"]')['content']

    doc = {
        'title': title,
        'image': image,
        'desc': desc,
        'star': star_receive,
        'comment': comment_receive
    }
    db.movies.insert_one(doc)

    return jsonify({'msg':'저장 완료'})

html (POST) 웹내용 DB에 저장하기

function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()

    $.ajax({
        type: 'POST',
        url: '/homework',
        data: {name_give: name, comment_give: comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

html (GET) DB내용 웹에 보여주기

function show_comment() {

    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['fans']

            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let comment = rows[i]['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)
            }
        }
    })
}

mongoDB 연결 중 오류 (certificate verify fail)

맥 사용하시는 분들 중에서 mongoDB 연결 중 'certificate verify fail' 했다는 오류가 많았다. 

나는 윈도우인데...?

해결

1. certifi를 설치한다. 

Alt+F12를 누르면 아래에 터미널이 나온다. 

'pip install certifi' 작성하여 설치한다. 

*설치시 문제가 있다면, 파일 - 설정 - 프로젝트 - python 인터프리티에서 설치가능

2. 코드 수정 및 추가한다.

import pymongo
import certifi

client = pymongo.MongoClient("mongodb+srv://test:sparta@cluster0.hd7sx.mongodb.net/Cluster0?retryWrites=true&w=majority",tlsCAFile=certifi.where())
db = client.dbsparta


doc = {
    'name':'bob',
    'age':27,
}

db.users.insert_one(doc)

추가. 파이썬 업그레이드하기

1) 'certifi' 설치 시, 노랑글씨로 업그레이드방법이 나와있다면,

window + R 누르고. 

'C:  ...  --upgrade pip' 콤마 안에 있는 글을 복사 붙이면 업그레이드 끝.

mongoDB 파이썬으로 작동하기

mongoDB에 저장하기

doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

mongoDB에서 한개 찾기

user = db.users.find_one({'name':'bobby'})

mongoDB에서 여러개 찾기 ( _id 값은 제외하고 출력)

all_users = list(db.users.find({},{'_id':False}))

mongoDB의 내용 바꾸기

db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

mongoDB의 내용 지우기

db.users.delete_one({'name':'bobby'})

- '업데이트'를 눌렀을때, 외부의 자료를 정리해서 보여주기
- 한번 더 '업데이트'를 눌렀을 때, 이전자료는 삭제되고 다시 보여주기

    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"]
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]["MSRSTE_NM"]
                        let gu_mise = rows[i]['IDEX_MVL']

                        let temp_html = ``

                        if (gu_mise > 60) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li> ${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

- CSS 사용하기 (구글웹폰트, 이미지 넣기)
- 부트스트랩사용하기
- 포스팅박스 만들기

<!doctype html>
<html lang="en">

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

    <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>
   <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Poor Story', cursive;
        }
        .mytitle {

            max-width: 100%;
            height: 600px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.vogue.co.kr/vogue/2021/12/style_61c299401f4b3.jpeg");
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .card {
            max-width: 95%;
            width: 500px;
            height:100px;

            margin: 10px auto 0px auto;
        ;
        }
        .mypost {
            max-width: 95%;
            width: 500px;
            height: 300px;

            background-color: transparent;
            color: black;
            border-radius: 5px;

            border: 1px solid grey;

            margin: 20px auto;
            padding: 20px;
        }
        .mypost > button {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>아이유 팬명록</h1>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="닉네임">
          <label for="floatingInput">닉네임</label>
        </div>

        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>

        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>

</body>

</html>