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

경우 1: 프론트 + 백엔드 = GCP 하나의 퍼블릭 서버, DB = 프라이빗 서버

구조

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

API URL 설정

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

API URL 예시:

// 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도 이 주소로 요청됨.


경우 2: 프론트 = S3+CloudFront, 백엔드 = GCP 퍼블릭, DB = GCP 프라이빗

구조

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

API URL 설정

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

API URL 예시:

// .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 경로 분리 둘 다 가능합니다.)


정리

구분 프론트 위치 백엔드 위치 DB 위치 API URL
경우 1 GCP 같은 서버 GCP 같은 서버 (localhost:8080) GCP 프라이빗 /api/xxx (상대경로)
경우 2 S3 + CloudFront GCP 퍼블릭 GCP 프라이빗 https://api.onthe-top.com/api/xxx

⚠️ **GitHub.com Fallback** ⚠️