시작하는 글
졸업프로젝트에서 웹 사이트의 배포를 담당하게 되었다.
백엔드에서 작성한 코드를 git Action에 자동화하여 AWS로 반영하는 것 까지는 성공하였으나, Vercel과 연결하기 위해서는 Https로 연결되는 Url이 필요한 상황이다. 가비아에서 구매한 도메인을 Server-Vercel과 연결하기 위해서 AWS의 ACM과 Route53을 사용했다.
아래 Codename Cathy 님의 티스토리 게시글을 적극 참조하였다.
AWS ACM & Route53로 가비아 도메인 네임-Route53-Vercel 프론트엔드-EC2 백엔드 연결하기
AWS ACM & Route53로 가비아 도메인 네임-Route53-Vercel 프론트엔드-EC2 백엔드 연결하기
시나리오가비아로 구매한 도메인을 버셀로 배포된 프론트와 EC2에 배포된 백과 연결하려고 한다. 이때 프론트는 www.도메인.com의 서브 도메인일 때, 백은 api.도메인.com의 서브 도메인일 때 전달되
cn-c.tistory.com
Step 0 : 사전 준비 작업
Vercel 배포
AWS EC2 배포 (http:// ~)
가비아 도메인 구매
위의 세 가지가 준비된 상태에서 시작한다.
Step 1 : 호스팅 영역 생성
Route53에서 호스팅 영역을 생성해야한다.
나의 경우에는 기존에 여러 번의 시도를 거치며 생성된 호스팅 영역이 이미 있었기 때문에, 레코드만 정리하고 기존의 호스팅 영역을 그대로 사용했다.
호스팅 영역을 처음 생성한다면 가비아에서 구매한 도메인 이름을 입력하고,
유형은 퍼블릭 호스팅 영역으로 설정하여 호스팅 영역을 생성한다.
가비아에서 입력해야할 도메인 이름 확인하기
1. 가비아 홈페이지에서 My가비아 → 서비스 관리
2. 도메인 목록에서 vercel과 연결하기를 원하는 Url 확인
Route53의 호스팅 영역 카테고리에서 다음과 같이 호스팅 영역이 생성된 것을 확인할 수 있다.
Step 2 : https 인증서 발행
Vercel에서는 통신을 위해 HTTPS로 BaseURL을 뚫어놔야 배포가 가능하다.
이 말은, 기존에 EC2로 배포한 서버의 public IP는 http로 시작하는 url이기 때문에
https 통신을 위해서는 인증서 발행이 필요하다.
우리 사이트가 신뢰있는 사이트인지, 통신에 안전한지 여부를 판단하기 위해서 AWS를 통해 인증서를 발행해야한다.
AWS Certificate Manager 에서 인증서를 요청한다.
EC2를 배포한 Region과 동일한지 확인한다.
퍼블릭 인증서를 요청한다.
도메인 이름을 입력한다.
이 인증서에 다른 이름 추가하여 `*.` 을 추가한 도메인 이름도 입력해준다.
Step 3 : Route53 레코드 생성
퍼블릭 인증서를 요청 완료하면 다음과 같이 인증서가 검증 대기중 상태로 바뀐 것을 확인할 수 있다.
인증서를 클릭하면 앞서 신청한 두 개의 도메인(도메인, *.도메인)에 대한 검증 대기 중 상태가 보인다.
`레코드 생성` 을 누르면 아래와 같이 검증 대기 중 상태인 도메인 두 개가 보인다.
DNS 레코드가 성공적으로 생성되었다.
이 상태에서 5~10분 정도 기다리면 상태가 `검증 대기 중`에서 `성공`으로 바뀐다.
나의 경우 10분 이상 기다렸는데도 검증 대기 중이 바뀌지 않아
페이지 새로고침을 한번 해주었더니 바로 성공으로 바뀌었다.
5분이 지나면 한번씩 페이지 새로고침을 해보는 것을 추천한다.
앞서 생성한 인증서에 관련한 세부 정보를 확인할 수 있다.
Route53 호스팅 영역에서 레코드를 다시 확인해보면, CNAME 유형의 레코드가 하나 생성되었다.
레코드 개수는 초기 두 개의 레코드(NS, SOA)에서 하나가 늘어나 총 3개가 되었다.
Step 4 : 대상 그룹 생성
AWS EC2로 돌아온다.
ALB를 통해 트래픽을 분배하기 위하여 대상 그룹을 생성한다.
로드 밸런싱 카테고리에서 `대상 그룹`을 찾아 생성해준다.
대상 유형은 인스턴스로 선택한다.
나는 이름을 생성할 때, 헷갈리지 않도록 보통 생성하는 대상을 이름에 포함한다.
예를 들어 보안그룹을 생성할 때, 우리 서비스의 이름이 ABC라면 "ABCSecurityGroup"과 같은 식이다.
이렇게 생성하면 튜토리얼을 따라하며 실수할 확률이 줄어든다.
트래픽을 라우팅할 로드 밸런서 유형은 인스턴스였기 때문에, HTTP 프로토콜과 80번 포트를 선택해준다.
IPv4 주소 유형을 선택하고, 나머지의 경우는 기본 설정으로 두고 대상 그룹을 생성하였다.
버셀에 연결하기 위해 EC2에 올려둔 인스턴스를 선택해준다.
나의 경우는 무료 계정을 사용하여 인스턴스가 하나밖에 없었기 때문에 자동 선택되었다.
선택한 인스턴스를 위한 포트는 80번으로 설정해주고(HTTP), `아래에 보류 중인 것으로 포함` 을 누른다.
대상 보기에서 보류되었다.
현재 AWS 화면 우상단 지역과 영역이 일치하는지 확인한다.
Step 5 : ALB 생성
대상그룹을 생성했으면, ALB를 생성해주기 위해 EC2의 로드 밸런싱 카테고리에서 `로드 밸런서`를 선택해준다.
트래픽을 관리하기 위해 로드 밸런서를 생성하자.
Application Load Balancer 유형을 선택하여 진행한다.
로드밸런서 이름을 설정하고,
체계에서는 인터넷 경계, IP 주소 유형에서는 IPv4를 선택한다.
네트워크 매핑에서는 VPC 기본 으로 설정하고, 가용영역은 2a, 2b를 선택했다.
`새 보안 그룹을 생성` 을 눌러 ALB의 보안 그룹을 새로 생성해준다.
HTTPS와 HTTP 유형으로 각각 Anywhere IP주소에서 들어오는 인바운드 요청을 허용한다.
보안 그룹을 생성하고 나서는 다시 뒤로 돌아와, 앞서 생성한 보안 그룹을 선택해준다.
default 보안 그룹은 삭제한다.
리스너 및 라우팅 설정을 진행한다.
HTTPS:443 리스너를 만든다.
여기서는 앞서 만들었던 대상 그룹을 선택해준다.
이어서 보안 리스너를 설정한다.
모든 보안 정책에 대해 권장된 정책을 선택해준다.
우리는 HTTPS 통신을 위한 보안 인증서를 앞서 ACM에서 받았기 때문에,
`ACM에서` 를 선택하고 아래에서 생성한 보안 인증서를 선택해준다.
이렇게 로드 밸런서인 ALB를 생성해준다.
Step 6 : ALB 리스너 추가
현재는 ALB에 HTTPS 리스너만 있으므로, HTTP 리스너를 추가해준다.
HTTP:80 리스너가 HTTPS:443으로 리다이렉트 되도록 만든다.
리스너를 생성하고 나면, 규칙이 두 개로 늘어난 것을 확인할 수 있다.
HTTP:80 리스너는 기본 작업에서 확인할 수 있듯이, HTTPS 호스트:443의 URL 경로로 리디렉션 한다.
Step 7 : Route53 레코드 생성
Route53에서 앞서 세 개의 레코드를 확인하였다.
`레코드 생성` 을 눌러준다.
아래와 같이 두가지 레코드를 생성한다.
`api` - A유형
`www` - CNAME 유형 레코드
이때 `값` 에는 vercel에서 배포한 도메인 네임을 입력해준다.
.vercel.app 형식이다.
Route53에서 호스팅 영역 세부정보를 다시 확인한다.
앞서 생성한 A유형 레코드와 CNAME유형 레코드가 제대로 추가되었다.
Step 8 : 가비아 네임서버 설정
가비아로 돌아와, My가비아에서 본인이 연결하려는 도메인을 선택하면 아래처럼 네임서버 설정이 가능하다.
네임서버 이름 옆의 `설정`을 통해 1~4차에 다음과 같이 입력한다.
Route53에서 NS 유형 레코드의 값/트래픽 라우팅 대상을 그대로 입력해주면 된다.
Step 9 : Vercel Base URL 설정
모든 설정을 마치면 Vercel의 BaseURL을 https://api.(도메인이름)/ 으로 설정해준다.
예를 들어 로그인 페이지가 /login/ 으로 연결된다면
https://api.(도메인이름)/login/ 과 같이 연결되도록 BaseURL을 설정한다.
이렇게 되면 www.(도메인이름) 으로 인터넷에서 접근했을 때 정상적으로 페이지가 동작하게 된다.
Step 10 : Setting 수정
admin 페이지로 연결하는 URL에서 로그인을 시도하면 CSRF Failed 문제가 생기는 경우가 있다.
CSRF 토큰을 생성하지 않아 발생하는 문제이다.
설정에 아래 코드를 추가해준다.
CSRF_TRUSTED_ORIGINS = ['https://(도메인 네임)','https://www.(도메인 네임)','https://api.(도메인 네임)']
CSRF_COOKIE_SECURE = True
SESSION_COOKIE_SECURE = True
CSRF 설정 이후 Django 관리 사이트가 성공적으로 연결되는 것을 확인할 수 있다.
'졸업프로젝트(2024)' 카테고리의 다른 글
| [졸업프로젝트] 어떤 번역 API를 쓰는 게 좋을까? (11) | 2024.10.18 |
|---|