🔧 [WV-46] fix : Mixed Content Error 해결

[Jinviz]

개요

저희 배포된 앱에서 백엔드 로직을 불러올 수 없었던 오류를 수정하였습니다.

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 제목 및 커밋 메시지 컨벤션 확인
• 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

PR details

1. Mixed Content 문제란?

Mixed Content는 보안이 강화된 HTTPS 페이지가 보안이 약한 HTTP 리소스를 로드하려고 할 때 발생합니다. Vercel은 HTTPS로 앱을 제공하는데, HTTP 백엔드로 직접 요청을 보내면 브라우저가 이를 보안 위협으로 인식하여 해당 요청을 차단하게 됩니다. 이와 같은 문제가 백엔드 로직을 불러올 수 없었던 이유였습니다.

2. 해결 방법

./next.config.mjs

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: "/:path*", // 모든 /api/* 요청을 프록시
        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`, // 실제 API 서버로 요청 전달
      },
    ];
  },
}

프록시를 통한 우회 방법

Next.js 설정 파일에서 해당 기능을 추가하였습니다. 간단히 말해서 URL 프록시 설정을 함으로써 클라이언트가 직접적으로 백엔드 URL로 접근하지 않고 Next 서버의 프록시를 통해 백엔드 경로로 request가 처리됩니다.

조금 더 자세히 설명드리자면...

rewrites 설정은 클라이언트에서 직접 HTTP 백엔드로 요청을 보내는 대신
Next.js 미들웨어가 중간에서 프록시 역할을 하여 백엔드로 요청을 전달하게 됩니다
이렇게 하면 클라이언트-서버 간 통신은 HTTPS로 유지되면서, 서버-백엔드 간 통신은 HTTP로 이루어질 수 있습니다
이렇게 Next.js가 미들웨어로써 URL 프록시할 수 있는 것은 서버리스 함수가 동작하기 때문이라고 하네요.. (복잡쓰)

결론

이제 /api/* 로 보내는 요청은 모두 {{BASE_URL}}/api/* 로 rewrite 되기 때문에, fetch에 API 경로를 적어줄 때도 BASE_URL을 적지 않아도 됩니다. 그렇기 때문에 지금까지 api.ts 구현되었던 fetch URL을 수정하였습니다.

지금부터 fetch 하실 때는 BASE_URL을 적지 않고, 바로 API 엔드포인트만 적어주시면 됩니다! (/api/~~)
환경변수도 각자 로컬에서 수정해주시길 바랍니다.

NEXT_PUBLIC_KAKAO_API_KEY = cc7c596f752d18343b2f0575e776aa78
NEXT_PUBLIC_API_KEY = 54.180.228.165

예시

이전

const res = await fetch(
      `${BASE_URL}/game/monthschedule?yearMonth=${params}`
    );

이후

const res = await fetch(
      '/api/game/monthschedule?yearMonth=${params}'
    );

참고 자료

https://velog.io/@deli-ght/nextrewrite%EC%99%80-redirect
https://nextjs-ko.org/docs/app/api-reference/next-config-js/rewrites

When modifying code...

# Request Level
  - [ ] : "🔥 이대로 Merge 하면 안돼요~!"
  - [ ] : "🥹 고치면 분명 나아질 게 분명합니다.."
  - [ ] : "🤷 수정하면 좋지 않을까요?"

# Description

[hee2323]

고생하셨습니다👍🏻

[hayoung78]

확인했습니다!