[AWS] Sub Domain 연결하기

TLDR

이번 포스팅에서는 Sub Domain을 연결하는 방법에 대해 작성합니다. 이전 게시글 중 [React + Vite + Nginx + Docker + AWS] 를 활용하여 배포 해봅시다! 을 통해 AWS EC2에 react 빌드 파일을 nginx와 docker를 설정해놓은 상태에서, Route53/ Cloudflare을 활용하여 https 연결과 배포를 진행한 상태입니다.

도메인 연결 및 배포 설정과 관련된 Route53 및 Cloudflare를 활용했던 방법에 관한 정보는 추후에, 포스팅하여 연결될 수 있게 수정될 예정입니다. 아직 Cloudflare가 free 버전이고 어디까지 활용될 것 인지, 지식도 부족하다고 생각하여 https를 어떻게 배포할 것이고 장단점에 관련된 내용까지 담아 소개해 드리려고 합니다.

 

Sub Domain

도메인이랑 웹 상에서 사용하는 주소를 편리하게 작성한 것입니다. 정확하게 리소스를 주고받거나 접근하기 위해 IP를 활용하지만, 숫자와.으로 이루어진 IP는 일반 웹 사용자에게 불편하기 때문에 이를 텍스트로 연결시킨 게 도메인입니다.

위 사진은 제 블로그 포스트 URL입니다. 해당 URL에서 파란 저부분을 domain 영역이라고 하고, 그 도메인 내부에서도 sugarsyrup에 해당하는 서브 도메인을 사용하는 방법에 대해 포스팅하려고 합니다.

 

저희 서비스에서는 웹 프런트엔드와 백엔드를 서버를 각각 분리하기 위해 서브도메인 도입을 결심했습니다. www 로 시작하거나 서브도메인 없이 바로 접근을 한다면 프론트엔드 빌드 파일을 전달, 특정 서브 도메인을 설정해서 백엔드 서버를 할당하게끔 설계했습니다.

 

Nginx

우선 Nginx 웹서버에 대한 수정이 필요합니다. 기존의 설정은 80 port로 접근했을 때, Frontend 빌드 위치와 함께 index.html 파일을 전달하는 로직이 전부였지만, 이제 api.domain명으로 접근할 때 백엔드 서버로 가게끔 설정이 필요합니다.
( 여기서 백엔드 서버는 이미 EC2 인스턴스 내부에서 8000번 포트로 실행되고 있음을 가정하고 진행됩니다 )

server {
    listen       80;
    listen  [::]:80;
    server_name [domain명] www.[domain명];

    location / {
        root    /app/dist;	//build 폴더 위치
        index   index.html;	
        try_files $uri $uri/ /index.html;
    }
}

//backend subdoamin 연결 추가
server {
    listen      80;
    server_name [subdomain명].[domain명];

    location / {
        proxy_pass http://[EC2 인스턴스 고정 IP]:8000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
    }
}

 

아래 subdomain 용 서버 설정이 추가되었습니다.

• 원하는 sub doamin 명을 설정하여 server_name에 추가
• root로 접근 시 proxy_pass에 "인스턴스 고정 IP:Port 명"을 연결
• 서버의 header 설정

 

Route53 및 Cloudflare 설정

포스팅에 Cloudflare 설정 관련 사진은 따로 나오지 않을 예정입니다. Route53에서 설정하는 것과 유사하기 때문에 Route53에서 설정한 방법을 참조하면 될 것 같습니다.

Route53에서도 subdomain 관련 설정을 해줘야 합니다. 사용자가 특정 서브도메인으로 접근하거나, 웹서버에서 이미 서브도메인 관련 설정을 마치고 서비스할 준비가 되었지만, 그 사이 라우팅을 담당하는 Route53에서 이 존재를 모른다면 동작하지 않습니다.

설정 방법은 간단합니다. domain을 설정할 때, www로 접근할 때 CNAME으로 설정해서 호스팅 영역에 설정해 두셨다면 해당 방법과 똑같이 진행됩니다.

1. Route53 - 호스팅 영역 선택
2. 서브도메인을 설정하고자 하는 도메인명이 설정된 호스팅 영역 선택
3. 레코드 - 레코드 생성
4. 서브도메인명 설정, 레코드 유형 - CNAME, 값 - 설정한 domain

 

위 사진처럼 레코드를 설정했다면, 서브도메인 설정 마무리입니다. 해당 설정을 Route53에 함으로써, 서브도메인으로 접근하는 시도를 nginx 가 설정된 도메인으로 접근하게 되며, 원하는 데로 실행됩니다.