AWS

[2-2] AWS에 간단한 어플리케이션을 올려봅시다

elikim 2023. 2. 27. 00:25

인스턴스를 생성하는 방법은 인터넷에서 매우 쉽게 찾으실 수 있습니다. 이것을 다룬 블로그들이 정말 너무나 많을거에요..
그렇다면 굳이 저는 이 글을 남길 필요가 없을겁니다. 저는 조금 더 친절하고 쉬운 설명으로 잘 전달드려보고자 합니다.
항상 드리는 말씀이지만, 이해가 안되시면 그건 제가 잘 설명을 못한것이니 언제든 편히 댓글 남겨주세요! 더 쉽게 설명드려보도록 하겠습니다.

그럼 인스턴스가 생성이 되었으니 접속해볼까요

주로 2가지 방법을 가장 많이 사용합니다.
1. 콘솔에서 곧바로 접속
2. 터미널을 통한 ssh 접속

1의 경우 pem키가 없지만 웹 접속은 가능할 때 곧바로 인스턴스에 접속하여 필요한 작업을 할 수 있기 때문에 유용합니다.
2의 경우 다양한 터미널 프로그램(iterm, xshell, ...)을 활용할 수 있어서 편리합니다. 

1번의 접속 방법은 콘솔에서 인스턴스를 가볍게 클릭하신 후 우측 위에 있는 "커텍트" 버튼을 클릭해주시면 됩니다.

 

그럼 아래와 같은 화면이 출력되고, 곧바로 "커넥트"를 클릭하시면 웹 터미널 화면이 나옵니다.

개인 정보 보호를 위해 조금은 정보를 지우고 있습니다. 보시는데 불편하지 않으시길 바랍니다😅

접속하시면 아래와 같이 화면이 나옵니다.

그리고 2의 방법은 아래와 같이 ssh 명령어로 pem키를 사용하여 인스턴스에 접근합니다. 하얗게 가려놓은 부분은 해당 인스턴스의 공인IP 주소입니다.

접속을 했으니 간단하게 앱 업데이트를 해주고 앞으로 사용할 일 많은 aws cli를 버전2로 업그레이드 하겠습니다.
아래의 명령어를 복붙하여 입력하시면 편리합니다.

sudo yum update -y

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

이후 aws cli의 버전 업을 정상적으로 반영하기 위해 인스턴스를 재부팅합니다.

sudo reboot

재부팅 이후 다시 인스턴스에 접근해주세요. 
그리고 기본적인 웹 서버를 띄울 수 있는 아파치를 설치하고 실행해볼게요

sudo yum install httpd -y
sudo systemctl start httpd
systemctl status httpd

아래와 같이 나오면 매우 정상입니다.

그리고 해당 인스턴스의 ip주소를 웹 검색창에 입력하시면 아마 이런 페이지가 나올겁니다.

여기까지 오셨다면 인스턴스가 공인IP를 이용해서 외부에 서비스를 띄울 준비가 잘 된 것입니다.

외부에 보여질 간단한 문구 하나 만들어서 넣어볼까요.

sudo vi /var/www/html/insex.html
Hello, 네전따 여러분-!

저장하시고, 웹페이지를 새로고침해주시면

위와 같이 뜨는 것을 확인하실 수 있습니다.
저는 처음 AWS에 이 아파치 서버를 올려보고 뭔가 해냈다는 성취감을 얻었었습니다. 허허.. 

이번엔 여기서 조금 더 뭔갈 해볼게요.
처음에 말씀드린대로 아주 간단한 계산기 어플리케이션을 하나 올릴건데요, 단순한 사칙연산만 가능하도록 파이썬을 통해 코딩되었습니다. 우선 코드부터 보여드릴게요.

1번 app.py

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route("/result", methods=["POST"])
def result():
    num1 = request.form["num1"]
    num2 = request.form["num2"]
    operation = request.form["operation"]

    if operation == "add":
        result = int(num1) + int(num2)
        op_str = "+"
    elif operation == "subtract":
        result = int(num1) - int(num2)
        op_str = "-"
    elif operation == "multiply":
        result = int(num1) * int(num2)
        op_str = "*"
    elif operation == "divide":
        result = int(num1) / int(num2)
        op_str = "/"
    else:
        return "Invalid operation"

    return render_template("result.html", num1=num1, num2=num2, operation=op_str, result=result)

if __name__ == "__main__":
    app.run(debug=True)

2번 index.html

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
    <form action="/result" method="POST">
        <label for="num1">Number 1:</label>
        <input type="number" id="num1" name="num1"><br>

        <label for="num2">Number 2:</label>
        <input type="number" id="num2" name="num2"><br>

        <label for="operation">Operation:</label>
        <select id="operation" name="operation">
            <option value="add">+</option>
            <option value="subtract">-</option>
            <option value="multiply">*</option>
            <option value="divide">/</option>
        </select><br>

        <input type="submit" value="Calculate">
    </form>
</body>
</html>

3번 result.html

<!DOCTYPE html>
<html>
<head>
    <title>Calculator Result</title>
</head>
<body>
    <h1>Calculator Result</h1>
    <p>Number 1: {{ num1 }}</p>
    <p>Number 2: {{ num2 }}</p>
    <p>Operation: {{ operation }}</p>
    <p>Result: {{ result }}</p>
</body>
</html>

 

코드를 먼저 보여드린 이유는 우선 매우 간단해서 코딩에 대한 지식이 없으시더라도 단어 자체로 어떤 작업을 하려는지 유추가 가능하기도 하고, AWS 콘솔에서 작업하는 것에 좀 더 집중하기 위함입니다.

저 코드를 사용하기 위해서는 python3와 flask를 설치해야하며, 5000번 포트가 개방되어있어야 합니다. 하지만 기억하시는 것처럼, 우린 22와 80만을 개방했기 때문에 5000번 포트를 개방하는 과정을 진행해보도록 하겠습니다.

EC2 콘솔에서 인스턴스를 나타내는 곳의 아래쪽 탭에서 Security(보안)를 클릭해주시면 현재 속해있는 Security Group(보안 그룹)을 볼 수 있습니다. 클릭해주시면 화면이 전환됩니다.

보안 그룹 화면의 우측 하단에서 "Edit inbound rules"를 클릭해주세요

스샷에 편집해둔 넘버링에 따라 설정을 해주세요. 5000번 포트 또한 모든 접근에 대해 공개되어야하므로 0.0.0.0/0으로 개방합니다.

그럼 다시 터미널로 돌아갈까요.

아까 말씀드린 것처럼, python3와 flask를 설치하겠습니다. 물론 python3는 2와 함께 Amazon linux2에 기본 탑재되어 있기 때문에 flask만 설치하면 됩니다.

sudo pip3 install flask

(선택)만약 위에서 설치가 진행되지 않는다면 아래 명령어를 실행해주세요.

sudo yum install python3 python3-pip

설치가 다 되셨다면 앞에서 보여드렸던 코드를 vi 에디터를 통해 저장해주세요.
저는 ec2-user 홈에다 저장했습니다. 

구조는 아래와 같습니다.

app.py
templates/
    index.html
    result.html

app.py가 저장된 곳에 templates 폴더를 만들어주신 후 index.html과 result.html을 저장합니다.
그리고 실행시켜봅시다!

flask run --host=0.0.0.0

그리고 웹에서 인스턴스 주소 마지막에 5000 포트번호를 주고 접속해봅니다.

작고 귀여운 사칙연산 계산기가 나왔습니다.

대충 숫자를 입력하고 Calculate를 누르면

결과값이 result 페이지를 통해 나옵니다.

오늘 보여드리고자 하는 것이 끝났습니다!
이 간단한 어플리케이션의 구조는 index.html로 사용자가 접근하여 원하는 정보를 입력하면, flask가 app.py에 정의된 대로 작업(계산)을 수행한 후 result.html을 통해 보여주는 was로 구성된, 아주 작고 귀여운 테스트용 앱입니다😄

 

유익하셨을까요??
일부 개발언어가 들어가 있지만 초심자도 쉽게 따라할 수 있는 핸즈온 과정을 준비해봤습니다.ㅎㅎ
좀 더 deep dive한 내용을 원하시는 분들도 계실거라 생각됩니다! 초반 부분이니 조금만 참고 기다려주시면 감사하겠습니다. 꼭 도움될만한 여러 이야기들을 가져오겠습니다!

다음엔 VPC의 기본적인 설정과 AWS 내부 네트워킹에 대한 이야기를 해보도록 하겠습니다.
읽어주셔서 감사합니다! 다들 오늘도 좋은 하루 되시고 건강하십시오!

잘 이해가 되지 않으시거나 더 궁금하신 내용이 있다면 언제든 댓글 남겨주십시오!!

 
 
저작자표시 변경금지

'AWS' 카테고리의 다른 글

AWS Solutions Architect Professional, SAP-C02 후기  (2) 2023.04.03
VPC의 기초 지식!  (0) 2023.03.27
[2-1] AWS에 간단한 어플리케이션을 올려봅시다  (0) 2023.02.26
[네전따] 칼럼 기고를 시작하며, [1] AWS를 시작할 때 필요한 기초 키워드  (2) 2023.02.19
쿠버네티스 만들어보자  (0) 2021.05.23

'AWS'의 다른글

  • 현재글[2-2] AWS에 간단한 어플리케이션을 올려봅시다

관련글

댓글

티스토리툴바