[6주차] AWS에 웹 서비스 배포하기
AWS에 가상머신 구성하기
AWS에서는 1년간 무료로 사용할 수 있는 프리티어 서비스가 있는데, 이를 활용하면 비용부담 없이 테스트를 해볼 수 있습니다.
AWS에 회원가입 및 로그인을 하여 웹 서비스를 구동시킬 가상머신(VM)을 위한 AWS 서비스인 EC2 페이지로 이동합니다.
인스턴스 시작 버튼을 눌러 이미지(AMI), 인스턴스 유형 등을 선택하여 시작하기 버튼을 누릅니다.
이 때, 인스턴스 접속 시 필요한 SSH 키 페어 생성 및 다운로드 안내가 나오는데 이후에 파일을 다시 받을 수 없으므로 잘 보관합니다.
가상머신에서 웹 서비스 배포하기
인스턴스에 SSH 접속하기
EC2 페이지에 방금 전 생성한 인스턴스를 눌러 연결 방법을 확인합니다.
SSH 키를 받은 위치로 이동하여 chmod 400 {KeyName} 명령어로 권한을 변경하고, 위 안내에 나온대로 ssh -i “{KeyName}” .... amazoneaws.com 명령어로 인스턴스에 접속합니다.
Django를 위한 환경 설정
1. OS 업데이트 및 패키지 설치
sudo apt-get update
sudo apt-get install python3-venv2. git에서 소스코드 클론 하기
Sourcetree를 사용했을때와 마찬가지로 복사할 git 페이지에서 클론할 URL을 복사하여 git clone {Git Address} 명령어를 입력합니다.
3. 소스코드 실행을 위한 환경 설정하기
# 가상환경 만들고 실행하기
cd jinstagram
python3 -m venv venv
source ./venv/bin/activate
# 필요 패키지 설치 후 DB 설정하기
pip install -r requirements.txt
python manage.py makemigrations
python manage.py migrate
웹 서비스 구동하기
모두가 접속할 수 있도록 0.0.0.0 주소로 서버를 실행시킵니다.
python manage.py runserver 0.0.0.0:80008000번 포트로 접속할 수 있도록 인스턴스 보안 그룹으로 들어가 인바운드 규칙을 편집합니다.
인스턴스의 외부 IP주소로 접속이 되는지 테스트 해보고, 무료 DNS 서비스인 DuckDNS를 사용하여 DNS 접속을 테스트 해봅니다.
로컬에서 테스트하고 AWS에서 수정된 웹 배포하기
AWS에서 잘 구동되는 것을 확인했다면, 몇 가지 사항을 수정하여 테스트하고 이를 AWS의 웹 서버에 적용해봅니다.
Contact US 동작 만들기
1. models.py에서 ContactUS 테이블 만들기
from django.db import models
class ContactUs(models.Model):
name = models.TextField()
email = models.TextField()
phone = models.TextField()
message = models.TextField()
2. index.html에서 jquery로 버튼 동작 구성하기
<head> 안에 jquery를 사용하기 위한 소스 주소를 넣어주고, 페이지의 가장 아래에 다음 jquery 구문을 적습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script>
$('#submitButton').click(function(){
const name = $('#name').val()
const email = $('#email').val()
const phone = $('#phone').val()
const message = $('#message').val()
$.ajax({
url: '/contactus/', //자동으로 IP주소를 넣어서 인식함
method: 'POST',
data:{
name:name,
email:email,
phone:phone,
message:message
},
success: function (){
alert('메시지 남기기 성공')
},
error: function (){
alert('메시지 남기기 실패')
}
})
});
</script>
3. views.py에서 테이블에 데이터 생성하는 로직 구성하기
from rest_framework.response import Response
from webpage.models import ContactUs
class CreateContactUs(APIView):
def post(self, request):
name = request.data.get('name')
email = request.data.get('email')
phone = request.data.get('phone')
message = request.data.get('message')
ContactUs.objects.create(name=name, email=email, phone=phone, message=message)
return Response(status=200)
4. urls.py에서 경로 추가하기
urlpatterns 리스트 안에 path('contactus/', CreateContactUs.as_view())를 추가 합니다.
GA 연동하기
구글애널리틱스(GA)를 사용하기 위해서는 우선 가입 후 로그인을 합니다.
관리에서 어시스턴트 설정 > 태그 설치 혹은 데이터스트림을 선택합니다.
스트림 추가 버튼을 누르면 다음과 같은 화면이 나오는데, 연동할 웹 사이트의 주소와 식별할 이름을 넣습니다.
스트림이 생성되면 태그하기에 대한 안내 부분에서 전체 사이트 태그 부분을 펼치면 아래와 같이 코드가 보여집니다. 이 코드를 복사하여 웹 사이트 코드(index.html)의 <head> 파트에 붙여넣으면 됩니다.
