개발자
API url주소를 개발서버,프로덕션일때 어떻게 구분해줘야하나요?
현재 Nextjs로 사이드프로젝트를 진행중인 프론트엔드 취준생입니다. 현재 저희는 개발서버에서 cors를 해결하기위해 next.config 에서 rewrites 함수 를 사용하여 proxy설정을 해주었는데요. 문제는 배포된곳에서 즉 프로덕션환경일때에도 proxy가 설정되어있어서 오히려 여기에서 CORS 에러가 발생하고있습니다. 즉 배포된곳에서는 API 요청을 https://own-server.vercel.app/ 요청을 보내져야하는데 localhost:3000으로 요청을 보내고있기 떄문이라고 생각하고있습니다. 이런경우 환경을 달리할때 api주소라던지 proxy설정이라던지 뭔가 나눠야할것같은데 갈피를 못잡겠어서 질문글 남겨봅니다 ㅠ
답변 1
환경변수 파일(env)을 최상단에 생성하셔서 개발, 프로덕션 환경을 구분하여 매핑되도록 할 수 있습니다. PUBLIC_URL(클라이언트), API_URL(서버) 를 배포 환경마다 다르게 사용하도록 해보세요
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 06일
환경변수를 이용하는 방법이 있습니다. next.js는 두 가지 타입의 환경변수를 지원합니다: 환경변수(.env 파일)와 next.config.js에서 사용할 수 있는 런타임 설정. 여기서는 각각의 환경(개발, 테스트, 프로덕션)에 따라 API URL을 변경하려면 .env 파일을 사용하는 방법을 추천합니다. 예를 들어 개발 환경에서는 .env.local 파일을 사용해서 다음과 같이 설정할 수 있습니다: ``` API_URL=http://localhost:3000 ``` 프로덕션 환경에서는 .env.production 파일을 사용해서 다음과 같이 설정합니다: ``` API_URL=https://own-server.vercel.app/ ``` 그리고 코드에서는 process.env.API_URL 키워드를 이용하여 API 주소를 가져오면 됩니다. 이렇게 하면 개발/프로덕션 환경에 따라 서버 주소가 자동으로 바뀝니다. 주의할 점은 Vercel 등 클라우드 플랫폼에 배포할 때, .env.production 파일의 내용도 함께 업로드 해야한다는 것입니다. 또한 보안상 중요한 정보가 포함되어 있다면, 해당 정보를 직접 소스코드나 Git에 공유하지 않도록 주의해야 합니다. 또한, Next.js 버전 9.4 이상에서는 기본적으로 .env 파일을 로드하기 때문에 별도의 패키지를 설치할 필요가 없습니다. 더 낮은 버전을 사용하고 있다면, dotenv-webpack이나 dotenv 패키지를 사용해야 할 수도 있습니다. 이렇게 환경 변수를 사용하면 개발과 프로덕션 환경에서 서버 URL 변경등의 설정을 쉽게 관리할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!