프론트엔드와 협업 시 API 서버를 어떻게 제공해야 할까요?

Question

현재는 백엔드 서버를 GCP에 배포해서 프론트엔드가 로컬에서 작업하면 해당 서버를 바라보도록 했습니다.다만 cors나 쿠키에서 문제가 발생해서 Next.js의 (프론트 팀원이 Next.js를 선택했습니다.) rewrites 기능을 사용해서 프록시를 두어 해결하고 있네요.궁금한 점은 현업에서도 개발 당시 이런식으로 백엔드 서버를 따로 배포해 개발을 하는지, 아니면 백엔드 개발자가 jar 파일이나 docker image를 제공해 로컬에서 개발을 하는지, 아니면 더미 데이터를 사용한 뒤 나중에 한번에 연동하여 배포하는지.. 궁금합니다.지금 방식도 작동을 안하는건 아닌데 OAuth2 과정에서의 찝찝함이나 (redirect-url를 프록시 url로 설정해주어야 한다던지) 개발 서버가 이게 맞는지? (제가 생각하는 개발 서버는 전체 서비스가 돌아가는 느낌이여서요) 등의 의문점이 남아있습니다.물론 팀마다 다른 형식을 채택하겠지만 방법에 대해 얘기해주시면 개발이 좋은 방향으로 흘러갈 것 같아 질문드립니다!

MadMango · Accepted Answer

현업은 클라우드지만 사이드 프젝에서 백엔드를 할 때 프론트가 nginx만 바라보도록 리버스 프록시를 구축하는게 제일 편했어요. 서버가 분산된 경우에도 CORS 설정을 nginx에서 일괄 처리할 수 있기도 하고요.

몰랑토끼 · Answer

cors는 백에서 일단 먼저 핵결해주고 그렇지 않더라도 next 에서 처리할수있는데 프론트도 못하고 있네요

chytonpide · Answer

우리는 staging 환경을 구성하고 local FE 개발환경이 staging 환경의 서버를 바라보도록 하고 있습니다.localhost:3000~3003 에서 접근할 수 있게 cors 설정도 했구요.staging 환경에서는 인증을 담당하는 gateway 를 거치지 않고 아래처럼,인증없이도 API를 사용할수 있도록 해서, 두가지 방식 전부 시험해보도록 했습니다.FE local → staging gateway server → staging api serverFE local → staging api server그리고 어떤 기능에 대해서 FE와 BE를 동시에 개발할 때는엔드포인트의 스펙을 정한 다음 각자개발하고 나중에 통합했습니다.GET /orgs { "listItems":[ { "orgId":"orgId", "name":"hong gildong" }, ] } GET /orgs/{orgsId} { "orgId":"orgId", "name":"hong gildong" }

[object Object] · Answer

보통 개발서버로 하긴 하는데 수정이 잦은경우 이미지로 하면 편하긴 하더라구요.

카카오콘 · Answer

백프론트 분리되어있으면 nginx 두고 리버스프록시 거는게 제일 깔끔합니다.

2948284 · Answer

로컬 - 개발 - QA - RC - Prod보통 개발서버 바라보고 작업했읍니다

프론트엔드와 협업 시 API 서버를 어떻게 제공해야 할까요?

6개의 답변

기술 목록