Vercel 배포를 커스텀 도메인과 연결해 보자 (+ api 서브 도메인)

2025.08.14 - [Infra] - 도메인 연결하고 HTTPS를 적용해 보자

도메인 연결하고 HTTPS를 적용해 보자

이 글에서 이어지는 내용입니다.

 

 

이전 글에서 Spring Boot의 정적 리소스가 없어서 도메인 접속 시에 500 에러가 발생했었다.

 

또한 현재 상황은

• 프론트엔드는 Vercel로 별도로 배포되어 있는 상황
• 백엔드는 순수 API 서버로만 동작 (+ swagger 포함)

예를 들어 루트 도메인이 springboot.com이라고 할 때

1. springboot.com & www.springboot.com  
    : 배포된 프론트엔드(vercel)로 프록시
2. api.springboot.com
    : API 전용 도메인. 프론트엔드에서 API 요청을 보내는 base url이 된다. 또한 뒤에 /swagger-ui/index.html을 붙여 접속하면 Swagger 문서도 확인 가능하도록 한다.

즉,
➡️ /api/** 로 들어오는 요청은 : EC2 -> docker-compose (Spring Boot)
➡️ 그 외 모든 요청은 : Vercel로 호스팅 된 프론트엔드로 분기
되도록 한다.

 

그럼 적용해 보자.

 

⚒️ Route53 DNS 설정 변경

여기선 편의상 루트 도메인을 aabcd.com이라고 하겠다.

기존에 aabcd.com의 A 레코드는 EC2의 public ip로 설정했었다. 또한 www.aabcd.com의 CNAME도 동일하게 설정되어 있었다. (자세한 내용은 상단에 이전 발행 글에 기술되어 있다.)

• 이렇게 하면 루트 요청 (https://aabcd.com)이 모두 EC2 백엔드로 들어가게 된다.
• 하지만 프로젝트 설계에 따라
  
  • api.aabcd.com : API 서버 주소로 사용하기로 했기 때문에
    • EC2 인스턴스의 public ip는 api.aabcd.com의 A 레코드로 설정해야 한다. 🌟
  • 그리고 aabcd.com은 Vercel로 호스팅 된 프론트엔드로 분기해야 하기 때문에
    • 기존 aabcd.com의 A 레코드 값은 Vercel에서 제공하는 A 레코드로 적용해야 한다. (2개의 값)
    • 또한 서브 도메인 www.aabcd.com의 CNAME은 Vercel 관리 페이지에 나온 CNAME 값으로 적용한다.
      
      • 이때 유의할 점은 값을 넣을 때 호스트 이름만 가리키도록 해야 한다! (https:// 와 같은 부분은 전부 제외하자.)
      • 그리고 프론트는 Vercel이 알아서 서빙하기 때문에 EC2의 Nginx에서 별도로 다룰 필요없이, DNS CNAME만 잡아주면 된다.
      협업 중이라면 위 두 값은 프론트 배포 담당자에게 물어보자. 그리고 Vercel에서도 우리의 도메인을 추가해달라고 요청해야 한다.

설정을 모두 하고 나면 Route53의 호스팅 영역에서 다음과 같이 5개가 등록되어 있다. 위에 3개는 루트 도메인이다.

 

 

🔐 인증서 및 Nginx 설정 변경

기존에 server_name에 프론트엔드로 프록시 할 도메인을 작성했었다. (현재 설계랑 맞지 않음)

 

1. 기존에 잘못 발급된 인증서 삭제

 

기존 인증서는 루트 도메인(aabcd.com)으로 발급받았었다. 이걸 먼저 지워보자.

# 현재 발급된 인증서 목록 확인
sudo certbot certificates

# 리스트에서 aabcd.com 관련 인증서 이름(cert-name) 확인
sudo certbot delete --cert-name aabcd.com

 

그리고 /etc/nginx/conf.d에 남아있는 잘못된 nginx 설정 파일들도 지워주자.

sudo rm /etc/nginx/conf.d/aabcd.com.conf
sudo rm /etc/nginx/conf.d/www.aabcd.com.conf

 

 

2. API 서브 도메인용으로 인증서를 재발급

 

Nginx 재설정 후 → server_name을 api 전용 도메인으로 사용할 주소로 변경한다.

server {
    listen 80;
    server_name aabcd.com www.aabcd.com;  // ❌ 기존 설정. 이 라인을 지우자 ❌
	server_name api.aabcd.com;	 // ✅ 위 줄 대신 이걸 적어야 한다 ✅
		
    location / {
        proxy_pass         http://127.0.0.1:8080;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
}

 

위 설정 파일을 저장하고, Nginx 문법 검사 후 재시작을 해준다.

그리고 다시 SSL 인증서를 발급받고 자동 설정을 적용해줘야 한다. (변경된 설정으로 새로 발급받는 것이다.)

certbot 자동 생성까지 포함된 Ngnix 설정이다.

 

 

그리고 SSL 테스트를 해보면 잘 된 것을 알 수 있다.

 

 

공부하는 학생입니다. 지적이나 피드백은 언제든지 환영합니다 🙇‍♀️