클라우드 api 호출 - 100-hours-a-week/16-Hot6-wiki GitHub Wiki

[브라우저]
    |
    v
[프런트엔드 (React 등) - 퍼블릭 GCP 서버]
    |
    v
[백엔드 (Spring Boot) - 같은 GCP 서버, 포트만 다름]
    |
    v
[DB 서버 - 프라이빗 GCP, 내부망 접근만 가능]

• 프론트와 백이 같은 서버에 있다면, 브라우저에서 API 호출은 localhost가 아닌 **상대 경로(/api)**로 설정하는 게 좋을것같습니다. (/api 이부분은 수정 가능합니다.)

// React 등 프론트 코드에서
fetch('/api/posts')
axios.get('/api/posts')

• CORS 설정 필요 없음 (같은 오리진)
• Nginx에서 /api를 백엔드 포트 (8080 등)으로 프록시하면 됩니다.

location /api/ {
    proxy_pass http://localhost:8080;
    ...
}

이 경우 도메인은 하나: 예: https://dev.onthe-top.com React도, API도 이 주소로 요청됨.

[S3 + CloudFront (React)]
    |
    v
브라우저에서 API 요청
    |
    v
[백엔드 (Spring Boot on GCP 퍼블릭 인스턴스)]
    |
    v
[DB (GCP 프라이빗 서브넷, 내부망으로 연결)]

프론트는 CloudFront URL에서 제공됨 API는 GCP 퍼블릭 IP or 도메인을 통해 별도 호출해야 합니다.

// .env.production
VITE_API_URL=https://api.onthe-top.com/api

axios.get(`${import.meta.env.VITE_API_URL}/posts`)

→ 이때 Nginx 설정은:

location /api/ {
    proxy_pass http://localhost:8080;
    ...
}

프론트는 https://dev.onthe-top.com, API는 https://api.onthe-top.com 으로 분리될 수 있음 (하위 도메인 or 경로 분리 둘 다 가능합니다.)