Skip to content

[Infra]: Vercel /b1 rewrite→api.basilium.ai.kr 서브도메인 구성 + DNS(api CNAME→ALB)·ACM(443) 연결, Nginx 업로드(413)·이미지 프록시 설정, SPA 리로드 404·https↔http 무한루프·Vercel→ALB 미도달 이슈 해결 #230

@pjhcsols

Description

@pjhcsols

시스템 구조 (AI 서버 루트 비공개 FE-BE 까지)

  • 사용자 → Vercel(프런트: basilium.ai.kr) → (rewrite) → api.basilium.ai.kr → ALB(443, 인증서=api.basilium.ai.kr) → EC2 Nginx(80) → Spring(8080)

시퀀스

Browser ──HTTPS(SNI=basilium.ai.kr)──> Vercel
         GET /b1/health
                  │
                  │ (rewrite: /b1/:path* → https://api.basilium.ai.kr/b1/:path*)
                  ▼
         Vercel ──DNS(api)=CNAME→ALB DNS──> Resolver
                  │
         Vercel ──HTTPS(SNI=api.basilium.ai.kr)──> ALB:443(ACM cert)
                                  │  (Host=api.basilium.ai.kr, Path=/b1/*)
                                  ▼
                             TargetGroup → EC2:80 (Nginx)
                                  │ proxy_pass http://127.0.0.1:8080/b1/...
                                  ▼
                                Spring:8080  (핸들러 /b1/health)
                                  │
                                  └──200 OK── back same path ──> Browser

이슈1. 이미지 업로드 413 — nginx에 이미지 크기 설정

Nginx (EC2: 3.34.134.32)
업로드가 여기서 413 나는 경우가 가장 흔함(기본 client_max_body_size=1m).

/etc/nginx/conf.d/api.conf (핵심만)

server {
  listen 80;
  server_name api.basilium.ai.kr;

  # ---- 업로드 공통 설정 (크기/버퍼/타임아웃) ----
  client_max_body_size    200m;     # 필요 크기로 조정 (제한 없애려면 0)
  client_body_buffer_size 512k;     # 헤더/메타가 큰 멀티파트 대비
  client_body_timeout     300s;

  # 업로드 스트리밍(큰 파일일수록 권장)
  proxy_request_buffering off;      # on이면 디스크 버퍼링, off면 스트리밍
  proxy_max_temp_file_size 0;       # 임시파일 방지
  proxy_read_timeout      300s;
  proxy_send_timeout      300s;

  # 실제 업로드 API 경로
  location /b1/uploads/ {
    proxy_pass         http://127.0.0.1:8080/b1/uploads/;
    proxy_http_version 1.1;

    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   $http_x_forwarded_proto; # ALB가 https로 셋
  }

  # 이미지 정적/다운로드 등 (참고)
  location /b1/images/ {
    proxy_pass         http://127.0.0.1:8080/b1/images/;
    proxy_http_version 1.1;
    proxy_set_header   Host                $host;
    proxy_set_header   X-Forwarded-Proto   $http_x_forwarded_proto;
  }
}

적용

sudo nginx -t && sudo systemctl reload nginx

client_max_body_size 기본은 1m. 반드시 늘려줘야 함. (무제한은 0)


이슈2. 버셀에서 초기 빌드 자동 설정으로 인한 reload 시 404 오류

  • 404 프록시 설정 → 리엑트가 동적 app → 버셀에서는 초기 빌드 설정 기준
  • reload 시 root 로 반환해서 라우트 설정한 곳으로 이동하게 해결

이슈3. api 통신 에러 무한 루프

  • https → http 로 변환
  • nginx 하고 버셀에서 동일한 도메인 basilium.ai.kr을 설정하여서 동일하게 무한 루프
  • nginx 설정에서 서브 도메인 api.basilium.ai.kr 발급하여 도메인 경로 이후 리다이렉트 되는 서브 도메인을 명시하여 nginx 측으로 넘어가게함

이슈4. nginx 이미지 프록시 문제

  • ALB(443) → Nginx(80) → Spring(8080)
  • 이미지 경로를 받아서 띄우면 자동으로 https로 붙여서 들어가서 브라우저단에서 표시
  • 따라서 해당 https를 띄워주는 url에서 alb를 통해 https:api.basilium.ai.kr 이쪽으로 요청하고 nginx에서 해당 https 요청을 받아 b1이 붙은 이미지 경로를 파악 후 해당 값 만로 변환 하여 basilium.co.kr로 요청을 보내고 nginx 에서 현재 설정 api 경로든 이미지 경로든 동일하게 https에서 http:basilium.co.kr 로 매핑해서 전달 후 api 응답이면 json 이미지경로면 정적 리소스 반환

이슈5. 버셀에서 alb 또는 route53 쪽으로 요청이 안넘어가는 오류

구조

  • 사용자 → Vercel(프런트: basilium.ai.kr) → (rewrite) → api.basilium.ai.kr → ALB(443, 인증서=api.basilium.ai.kr) → EC2 Nginx(80) → Spring(8080)

포인트

  • Vercel의 destination은 반드시 “내 도메인”(= Route53/CNAME이 ALB로 가는 도메인)이어야 함.
  • ALB 원시 DNS(…elb.amazonaws.com)로 HTTPS 직접 호출 X (SNI/인증서 불일치).

도메인 (서브도메인 생성 가능 도메인이 존재하면)

  1. A @ 버셀주소
  2. txt _vercel "vc-domain~"

3번(aws 로드밸런서 DNS)
→ api.basilium.ai.kr을 어디로 보낼지를 가리키는 목적지예요.
가비아 DNS에 api CNAME <ALB_DNS> 로 넣어 도메인 → ALB 연결.

4번(ACM 인증서: api.basilium.ai.kr)
→ HTTPS에서 이 호스트명의 신원증명을 하는 증서예요.
서울 리전 ACM에서 발급받아 ALB 443 리스너에 연결해야,
https://api.basilium.ai.kr/ 접속 시 TLS가 정상 성립합니다.

공개 인증서(Public certificate) for api.basilium.ai.kr

  • 어디서: AWS Certificate Manager(ACM) — ALB와 같은 리전(서울 ap-northeast-2)에서 발급
    CloudFront는 us-east-1만 예외지만, 지금은 ALB이므로 ALB 리전과 동일해야 합니다.

전체 플로우 (요약)
ACM(서울)에서 인증서 요청 → 대상 도메인 api.basilium.ai.kr (원하면 *.basilium.ai.kr도 추가 가능)

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions