클라우드 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 경로 분리 둘 다 가능합니다.)
구분 | 프론트 위치 | 백엔드 위치 | DB 위치 | API URL |
---|---|---|---|---|
경우 1 | GCP 같은 서버 | GCP 같은 서버 (localhost:8080) | GCP 프라이빗 |
/api/xxx (상대경로) |
경우 2 | S3 + CloudFront | GCP 퍼블릭 | GCP 프라이빗 | https://api.onthe-top.com/api/xxx |