[웹서비스 배포] AWS EC2 + Filezila 이용하기

스파르타 코딩 웹개발 5주차 마지막 강의 내용을 듣고 작성한 내용이며, 참고 바랍니다.

 

---

 

사용한 것 : AWS EC2(Linux Ubuntu 22.04 LTS Server), Git Bash, Filezila, HTML , CSS , JS, Bootstrap, Ajax 

---

1. 웹서비스란?

• 웹 서비스 런칭이란 클라이언트 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시키는 것을 의미
• 언제나 요청에 응하려면 다음 2가지가 충족되어야 함
  1. 컴퓨터는 항상 켜져있고, 프로그램이 실행되어 있어야 하고
  2. 모두가 접근할 수 있는 공개 주소인 공개 IP 주소 ( Publick IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야함
• 가비아에서 IP 주소를 신청하여 주소를 하나 만듬

 

gs-tom.shop 이라는 주소를 하나 만들었다.

 

 

• 서버는 그냥 컴퓨터이며, 외부 접속이 가능하게 설정한 다음에 내 컴퓨터를 서버로 사용할 수도 있음

2. AWS EC2 이용하기

 

링크 : https://ap-northeast-2.console.aws.amazon.com/ec2/home?region=ap-northeast-2#Home: 

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

• 하지만 AWS 라는 클라우드 서비스를 통해서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용 가능
• AWS : 리눅스 OS가 깔린 컴퓨터를 빌려서 쓰는 방식으로 서비스 제공
• EC2 시작 기초
• 프리티어 시작 가능 이라고 적혀져 있는 것은 1년 동안 1대에 대해서 무료라는 의미하며
• 인스턴스 생성 시에 프리티어로 해놓고 시험을 해보자

인스턴스를 만들고 컴퓨터를 동작중인 상태

 

- 초기에 인스턴스를 만들어줘야 한다 (버튼 클릭)

- aws 서버를 사용할 것인지, ubuntu 를 쓸 것인지, window를 쓸 것인지 등등 선택해야 하는데

- 아래 그림을 참조

 

이제 키페어를 생성해줘야 하는데,

키페어 이름을 정할때는 프로젝트 이름이랑 _mykey 라고 붙여서 인식하기 편하게 하자

 

여기서도 이름만 설정해주고, 다른 것들은 선택하지 않도록 한다

다른 설정은 하지 말고 넘어가자

 

그렇게 만들다보면, 다음과 같이 유의사항을 볼 수 있고

 

네트워크  정보

vpc-07c3090cb16313ffc

서브넷  정보

기본 설정 없음(가용 영역의 기본 서브넷)

퍼블릭 IP 자동 할당  정보

활성화

**방화벽(보안 그룹)**  정보

보안 그룹은 인스턴스에 대한 트래픽을 제어하는 방화벽 규칙 세트입니다. 특정 트래픽이 인스턴스에 도달하도록 허용하는 규칙을 추가합니다.

보안 그룹 생성기존 보안 그룹 선택

다음 규칙을 사용하여 '**launch-wizard-1**'(이)라는 새 보안 그룹을 생성합니다.

- [x]  에서 SSH 트래픽 허용인스턴스 연결에 도움

위치 무관

0.0.0.0/0

- [ ]  인터넷에서 HTTPs 트래픽 허용예를 들어 웹 서버를 생성할 때 엔드포인트를 설정하려면
- [ ]  인터넷에서 HTTP 트래픽 허용예를 들어 웹 서버를 생성할 때 엔드포인트를 설정하려면

소스가 0.0.0.0/0인 규칙은 모든 IP 주소에서 인스턴스에 액세스하도록 허용합니다. 알려진 IP 주소의 액세스만 허용하도록 보안 그룹을 설정하는 것이 좋습니다.

 

**스토리지 구성** 정보

어드밴스드

1x

GiB

gp2

루트 볼륨

프리 티어를 사용할 수 있는 고객은 최대 30GB의 EBS 범용(SSD)또는 마그네틱 스토리지를 사용할 수 있습니다.

새 볼륨 추가

선택한 AMI에 인스턴스가 허용하는 것보다 많은 인스턴스 스토어 볼륨이 포함되어 있습니다. AMI에서 처음 0개의 인스턴스 스토어 볼륨에만 액세스할 수 있습니다.

**프리 티어:**
 첫 해에는 월별 프리 티어 AMI에 대한 t2.micro(또는 t2.micro를 사용할 수 없는 리전의 t3.micro) 인스턴스 사용량 750시간, EBS 스토리지 30GiB, IO 2백만 개, 스냅샷 1GB, 인터넷 대역폭 100GB가 포함됩니다.

 

기본적인 인스턴스 상태를 나타내는 내용은 다음과 같다

 

• 인스턴스 상태
  • 실행 중 - 컴퓨터 켜져 있는 상태
  • 인스턴스 중지 - 컴퓨터 꺼져 있는 상태
  • 인스턴스 종료 - 컴퓨터를 반납

 

---

퍼블릭 IPv4 주소는 나중에 자주 사용할 것

 

---

 

Window

• git bash 실행
•  
• key-pair 를 준비해놓자
• ubunto 실행하기 위한 다음 코드를 작성하자
  • 참고로 ssh : secure shell (ssh)로서 네트워크 상의 다른 컴퓨터에 로그인 하거나 원격 시스템에서 명령을 실행하고서 다른 시스템으로 파일을 복사할 수 있도록 해 주는 응용 프로그램 또는 프로토콜이다
  • 퍼블릭 IPv4 주소는 aws ec2 에서 실행중인 인스턴스의 ‘네트워킹’ 세션에서 확인 가능하다 3으로 시작함

Code:

ssh -i [key-pair 파일 갖다 붙여놓기] ubuntu@[퍼블릭 IPv4 주소]

 

실행시 질문이 하나 나오고 yes 를 눌러주자

 

 

---

리눅스 기본 명령어

- 추후 많은 명령어들은 구글 검색을 통해서 학습해야 할 필요가 있어 보인다

• mkdir 을 통해서 파일을 만들고
• cd 를 통해서 현재 디렉터리를 옮겨주자
• 그리고 ls를 통해서 어떤 파일들이 하위 폴더에 있는지 확인하자

 

 

---

 

Git Bash

- 다음 코드들을 기입하자

- 코드 설명은 다음과 같다

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

# pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

1번 코드 설명

• python3 라고 명령을 내리는 것을 python 만 누르면 가능하게 변경함

2번 코드 설명

• 1번과 유사

3번 코드 설명

• 로컬 호스트 5000을 뺴는 명령어
• 나중에 DNS 서버를 EC2 에서 5000번 포트와 80번 포트를 보안 세션에서 연결하게 되면서, 뒤에 굳이 5000을 적지 않아도 되게 되는 신기한 마술 같은 코드

 

 

python3 을 입력하지 않고 파이선을 실행할 수 있게되어 정말 편해진다

 

이런 창이 뜨는데 어떤 것도 입력하지 않고 enter 로 넘겨주자

설정이 완료

 

 

Filezila

• 파일을 옮기는 프로그램 ( 내 로컬에 있는 파일을 EC2 Ubuntu 컴퓨터 PC에 파일을 넣을 때 쓰는 유용한 프로그램)
• 왼쪽 창: 현재 내 로컬 컴퓨터
• 오른쪽 창: EC2 인스턴스
• 왼쪽 상단 ‘사이트 관리자’ 실행하여, ubuntu와 연결하는 초기 세팅이 필요하다
• 방법은 아래와 같다
• 새 사이트 클릭
• 프로토콜은 SFTP : SSH File Transfer Protocol
• 호스트는 퍼블릭 IP
• 포트는 22 번(정해져 있는 값)
• 로그인 유형
• 키 파일
• 사용자는 ubuntu
• 키 파일은 ppk파일 형식이 아닌 PEM files 로 찾기
• 파일질라에서 비밀번호를 기억하도록 마지막 세팅까지 확인 버튼 클릭하기

 

연결이 완료되면, 내 ubuntu 에 어떠한 파일들이 있는지 확인할 수가 있다

 

 

- 연결이 완료되면, 이제 내 로컬 컴퓨터에서 원격으로 제어할 수 있다

 

- test.py 에 print('hello EC2') 를 내 로컬에서 만들고, 파일을 옮겨 넣어보고, 실행해보자

 

연결 성공

- 그렇다면 이제 웹사이트 만들기 위한 기초가 끝났다.

 

- 프로젝트 기존에 진행했던 내용들을 이제 EC2 에 넣어두면, 내 컴퓨터를 항상 켜놓지 않아도 서버가 항상 돌아가고 있기 때문에 실행이 가능하다

 

하지만 여기서 드는 의문점은, 콘다 가상환경에서 실행했었어서 라이브러리가 아마 설치가 안되어 있을텐데 과연 실행이 될까?

 

그렇다, 라이브러리  설치가 되어 있지 않기 때문에, 모두 pip install 을 통해서 필요한 라이브러리들을 설치해보자

 

이제 한번 실행해보자

 

우여곡절을 거치고 모든 라이브러리를  설치했는데 실행이 되지 않을 것이다

 

EC2 퍼블릭 아이피 주소에다가 :5000 포트를 붙여서도 접속해보았는데 접속이 되지 않는 것을 확인 할 수 있다

 

왜냐하면, 5000번 포트로 접속할 수 있도록 열어줘야 하는 단계를 거치지 않았기 때문이다.

 

그렇다면 EC2 보안 그룹에서 edit inbound route 에서 새로운 규칙을 추가해줘야한다

 

• 소스는 anywhere ipv4 로
• 그리고 일단 80번 포트도 여어주자
• 둘다 모두 유형은 TCP 이다

아직 TCP, SSH, HTTP 통신 유형에 대해서는 정확한 개념이 없기에 나중에 추후 공부할 거리가 늘은 것 같은 기분이다

 

 

이렇게 설정을 해두면,

 

• 5000을 제거해도 사이트가 뜨는 것을 확인 할 수 있다
• 보통 모든 웹사이트는 80이 숨겨져 있는데, 네이버도 마찬가지이다
• 80으로 받아서 5000으로 만들어주면, 뒤에 :80 / :5000 없이 깔끔한 url 로 접속 가능
• 위에서 초기 세팅했던 port forwarding 에 해당하는 개념이다

 

이제 중요한 것은 git-bash 에서 파일을 실행해 놓지 않고 있어도, 컴퓨터가 꺼져 있어도 원격 서버는 돌아가야한다.

 

즉, git-bash 창을 끄고도 컴퓨터가 계속 켜져 있을 수 있게 해야한다

 

방법은 다음 코드를 git-bash 에 해당 디렉터리에 들어가서, app.py 가 있는 곳에서 실행하는 것이다

 

git-bash 창을 끄고도 컴퓨터가 계속 켜져 있을 수 있게 해야한다

 

그렇다면 nohup: ignoring input and appending output to 'nohup.out'

 

이라는 메시지가 뜨고, git-bash 를 끈 상태에서도 웹사이트가 정상 작동하는 것을 확인 가능하다

 

 

그렇다면 끄는 방법도 존재한다.

 

꼭 다음 코드를 작성하고, 아마존에서 과금될 수도 있으니 인스턴스를 실행 중지나 종료 시켜주자

 

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

 

 

---

거의 다 왔다.

 

이제는 32.2.31.321 이런식으로 접속하는게 아니라, www.naver.com   이런식으로 접속할 수 있도록 ip 와 네임 서버를 매칭하는 작업을 해야한다.

 

예전에 만들어 놓았던 '가비아' 홈페이지 접속하여 DNS 관리에 들어가도록 하고, 호스트는 @ 로 설정하고,

ip 는 EC2 에서 제공한 퍼블릭 IPv4 주소를 입력하고 확인 후 저장을 클릭하자

 

참고로, 가비아는 네임 서버를 운영하는 한국 공인 업체이며, 전화 번호부를 운영하는 업체라고 생각하면 편하다

 

 

 

---

마지막 단계이다.

 

내가 만든 웹사이트를 배포할때, og 태그 안에 어떤 내용이 들어갈지 내용을 적어두면, 링크 아래에 이미지와 설명이 남긴 내용을 볼 수 있다

 

코드 Snipet 은 다음과 같다

- title, description, image 등을 넣을 수 있다

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

 

꿅팁 : 

• 꿀팁 :
• 카카오 같은 경우 이미지를 바꿨는데도 불구하고, 이전 image가 뜨게 되는데
• 처음 것을 한동안 저장해놓는 속성 떄문이다
• kakao og 태그 초기화하기 : https://developers.kakao.com/tool/clear/og

카카오계정 로그인

 

 

 

이상, 웹페이지 배포하기 개념 설명 및 프로세스는 마쳤으며 작동 영상은 다음 장에 연재하려고 한다.