프로젝트를 서버에 올리기

SCPKYG·2023년 3월 30일
0

AWS Elastic Beanstalk으로 배포하기

  1. 로그인 - 루트사용자
    https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/welcome
  2. OTP입력
  3. 액세스 키 가져오기
  • AWS 콘솔에 들어가, 오른쪽 위 부분의 계정이름을 클릭합니다!(보안 자격 증명 클릭)
  • 보안 자격 증명에서 액세스 키를 열고, 새 액세스 키 만들기 클릭
  • 액세스 키 보기를 눌러 액세스 키 ID와 보안 액세스 키를 복사해서 메모장에 붙여주세요!
  1. 터미널 명령어로 준비완료하기
  • mkdir deploy - deploy라는 폴더를 하나 만듭니다!
  • cp [app.py](http://app.py) deploy/application.py - app.py라는 파일을 deploy 폴더에 application.py라는 이름으로 바꿔서 복제합니다!
  • cp -r templates deploy/templates - templates라는 폴더를 deploy 폴더 안에 통째로 복제합니다!
  • pip freeze > deploy/requirements.txt - 내가 pip 명령어로 설치한 라이브러리들의 목록을 deploy 폴더 안에 requirements.txt 파일에 기록합니다!
  • cd deploy - deploy 폴더 안으로 들어갑니다!(폴더 더블클릭과 똑같은 기능이네요!)
  1. 약간의 파일 설정 바꿔주기
  • Elastic Beanstalk 배포를 위해 필요한 것이 있어요!
    • application.py ← app.py에서 이름을 바꿔줘야해요!
    • templates폴더와 index.html
    • requirements.txt ← 우리가 설치한 패키지들의 이름이 담긴 txt파일이에요!
    • 폴더 안에 venv가 있으면 안돼요!

<application.py 배포 코드>

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

from pymongo import MongoClient

client = MongoClient('내 mongodb URL')
db = client.dbsparta

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

@app.route("/guestbook", methods=["POST"])
def guestbook_post():
    name_receive = request.form["name_give"]
    comment_receive = request.form["comment_give"]

    doc = {
        'name': name_receive,
        'comment': comment_receive
    }

    db.fan.insert_one(doc)
    return jsonify({'msg':'응원 완료!'})

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
    all_comments = list(db.fan.find({},{'_id':False}))
    return jsonify({'result':all_comments})

if __name__ == '__main__':
   app.run()

<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="https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg" />

    <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("https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg");
        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) => {
        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>십센치(10cm) 팬명록</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>
  1. awsebcli 패키지 설치하기
  • 터미널을 열어봅니다!
  • pip install awsebcli 입력하고 엔터!
  1. awsebcli로 AWS Elastic Beanstalk 배포하기
  • 다운로드가 완료되었다면, 터미널에 eb init을 입력하고 엔터!
Select a default region : 10 (seoul)

AWS Access Key ID [None]: 발급된 액세스 키 ID (복사 붙여넣기)
AWS Secret Access Key [None]: 발급된 비밀 액세스 키 (복사 붙여넣기)

Enter Application Name (default is "deploy") : enter
It appears you are using Python. Is this correct? : Y
Select a platform branch (default is 1) : enter

Do you want use Codecommit? : N
---
Cannot setup CodeCommit because there is no Source Control setup, continuing with initialization
Do you want to set up SSH for your instances? : Y

Select a keypair : [Create new Keypair]

Type a keypair name : enter
Enter passphrase : enter
Enter same passphrase again : enter

  1. Eb create

    생성까지 닷 시간이 소요됨(3~10분)

    화면이 터미널에서 뜬다면 완료

  2. 배포 환경 접속하기

  • AWS에 접속 → AWS 콘솔 연결하기 → Elastic Beanstalk

  • 생성한 환경 이름 확인 → OK 표시가 되어있는 지 확인

  1. Eb deploy
  • deploy 폴더에서 변경할 코드를 적고 저장해주세요!
  • 터미널을 열어줍니다!
  • 터미널에서 eb deploy 환경이름 을 입력하고 엔터!
  • 조금 기다리면 적용이 됩니다!

주의사항

  • b create를 할 때마다 서버를 구매한다는 사실! Elastic Beanstalk은 eb create 환경이름 명령어를 입력할 때 마다 서버를 구매해요!
    • 실수로 잘못 만들었다면, 서버를 여러 개를 빌린 것이 되는거에요!
    • 서버를 한 번에 두 개 이상 구매하고 놔두면, 요금이 발생하게 됩니다!
    • 혹시라도 설정이 달라 제대로 배포가 되지 않았다면, create 명령어를 여러 번 입력했다면 꼭! 환경을 종료해주세요!

Elastic Beanstalk 환경 종료하기

  • Elastic Beanstalk 환경을 종료하면, 배포 종료와 동시에 서버도 반납해요
  • AWS → AWS 콘솔 접속하기 → Elastic Beanstalk에 들어가주세요!
  • 종료하고 싶은 환경의 체크박스를 클릭하고, 오른쪽 위의 작업 → 환경 종료하기클릭!
  • 종료할 환경의 이름을 다시 한 번 입력하고 확인!

서버의 종류

  • 서버는 현재 물리서버와 클라우드 서버가 있다.
    물리서버는 말 그대로 현실에 서버실을 구축하여 사용하는 서버를 말하며 클라우드서버는 인터넷에서 끌어다 쓰는 서버
    클라우드서버의 본체는 어딘가에 있다.

  • 물리서버 : 현재 사용업체가 줄어들고 있다 그 이유는 구축 비용이 상상을 초월한다. 다만 아직도 대기업 혹은 보안이 중요한 업군에서는 물리서버를 운용중이다.
    예 : SK하이닉스 등의 반도체 같은 기술집약체의 경우 물리서버를 사용한다. 물론 폐쇄망으로 운용을 한다.

  • 클라우드 서버 : 서버를 빌려쓰는 개념이며 상대적으로 물리서버보다 저렴하며 구축이 용이하다 다만 보안성에서는 물리서버도다는 떨어지는 점이 있다.

  • 예로 폐쇄망의 경우 외부에서 접속을 불가하기에 내부에서만 정보유출이 가능하다.

AWS Elastic Beanstalk

  • AWS는 컴퓨터를 빌려주는 서비스부터 배포와 관련된 정~말 많은 서비스를 제공해요!
  • 그렇지만 배포는 초보자가 하기에 아주 쉽지는 않아요! 신경써야 하는 내용이 많고 복잡해서..
  • 그래서 초보자를 위해서 빠르게 뚝딱 배포할 수 있는 서비스도 제공한답니다!
    • 그것이 바로 AWS Elastic Beanstalk!

엘라스틱 빈스톡의 장점

  • AWS에서 제공하는 쉬운 배포서비스입니다!
  • 코드를 압축하여 업로드하고, AWS의 다양한 서비스를 알아서 연결해준답니다!
  • 배포링크를 통해 쉽게 공유가 가능하고, 코드 업데이트 기능까지 제공해줍니다!
profile
SCPKYG
뉴비입니다.
이전 포스트

og 태그

다음 포스트

리눅스

0개의 댓글