React/Next

[NEXT] rewrites를 이용한 API key 숨기기(redirects 포함)

래모 2023. 1. 16. 19:50

개발 시 API를 사용하기 위해 API key 정보를 같이 적어주어야 한다.

그런데 이 key값은 외부에 노출이 되기 싫을 수도 있다

 

그럴때 ! Next.js의 기능을 활용하여 API key를 숨겨보자!

 

next.config.js

API key를 숨기기위해 사용되는 파일이다.

처음 디렉터리에 생성되어 있을 것이다.

next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈이다
Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않는다.

 

이 파일을 수정할 경우 Next.js를 종료했다 다시 실행해야 한다

Redirects

들어오는 request 경로를 다른 destination 경로로 Redirect할 수 있다.

URL 변경

  • source : 들어오는 request 경로 패턴 (request 경로)
  • destination : 라우팅하려는 경로 (redirect할 경로) 외부 경로로도 가능
  • permanent: 브라우저나 검색엔진이 이 정보를 기억할 것인지 여부 결정
    • true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용하고, false인 경우 일시적이고 cache되지 않은 307 status code를 사용

 

//next.config.js

module.exports = {
  reactStrictMode:true, 
  async redirects() {
    return [
      {
        source: "/contact",
        destination: "/form",
        permanent: false,
      }
    ]
  },
}

true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용하고, false인 경우 일시적이고 cache되지 않은 307 status code를 사용

permanent: true인 경우 클라이언트와 search 엔진에 redirect를 영구적으로 cache하도록 지시하는 308 status code를 사용하고, 

이렇게 설정해줄 시 /contact를 입력했을 때 무조건 /form으로 바꾸어준다.

 

 

Rewrites

들어오는 request 경로를 다른 destination 경로에 매핑할 수 있음

Rewrites은 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 한다.

URL 변경 x

 

이 rewrites를 이용해서 API key를 숨겨줄 것이다!!

일단 기존에 useEffect를 사용해서 작성한 코드는 다음과 같다.

//index.js
...
const API_KEY = "블라블라";
...
export default function Home() {
  const [movies, setMovies] = useState();

  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  ...

이럴 때 개발자 도구에 network에 들어가 보면 key값이 다 노출된다

이걸 숨겨보자

1️⃣env파일을 통해 API key 숨기기

.env는 환경 변수 파일이다.

개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들을 적어준다.

 

//.env

API_KEY= 블라블라

 

이후 .gitignore파일에 .env를 추가해준다

 

2️⃣ next.config.js파일에 rewirtes사용해주기

//next.config.js

const API_KEY = process.env.API_KEY;

module.exports = {
  ...
  async rewrites() {
    return [
      {
        source:"/api/movies",
        destination:`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
      },
    ]
  }
}

 

이러면 http://localhost:3000/api/movies에 접속하였을 때 해당 json파일이 창에 보인다.

.env

3️⃣ 기존 코드 변경해주기

이제 기존 api를 요청했던 주소를 source값에 있던 주소로 바꾸어준다.

//index.js

...
export default function Home() {
  const [movies, setMovies] = useState();

  useEffect(() => {
    (async () => {
      const { results } = await (
        await fetch(
          `http://localhost:3000/api/movies`
        )
      ).json();
      setMovies(results);
    })();
  }, []);
  ...

주의! fetch할 때 /api/movies 또는 http://localhost:3000/api/movies 둘 다 가능하지만 http가 아닌 https로 fetch하게 되면 오류가 발생한다

 

 

아무튼 이러면! key값을 이용자에게 숨길 수 있다!!!!