[NextJS] Mini_project_2

API key를 숨겨보자

API가 유료인경우도 있고 제한이 걸려있는 경우도 있는데 누군가가 마음대로 쓰는 것을 방지하게 위해서 숨겨보자
이게 오픈되어있는 것을 확인하는 방법은

노란색으로 칠해진것을 보면 알 수 있다
Network --> popular (우리가 부른 API) --> 뒤에 key

해결하기 위해서
redirect, rewrite를 사용한다

redirect

사용할 파일은
next.config.js

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

위와 같이 쓸 수 있다. 이말은
xxxx /contact로 접근하면 xxxx /form 으로 보낸다는 얘기이다
여기서 좀 더 업그레이드 된 버전은
아래와 같이 쓸 수 있다는 것이다

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/old-contact/:path',
        destination: '/new-contact/:path',
        permanent: false,
      },
    ];
  },
};

위에처럼 쓰면
xxxx/old-contact/1234 로 접근하면
xxxx/new-contact/1234 로 보내주는 것이다

여기서 한 단계 더 나아가서 catch까지 해준다면

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/old-contact/:path*',
        destination: '/new-contact/:path*',
        permanent: false,
      },
    ];
  },
};

로 쓸수 있다
xxxx/old-contact/1234/comments/1234 로 접근하면
xxxx/new-contact/1234/comments/1234 로 보내준다

이 방법은 유저도 path가 바뀐것을 알 수 있다

rewrite

그러면 rewrite는??
바뀐 URL을 모르게한다

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

API_KEY는 이전 index.js에 썻던것을 그대로 가져온다
거기선 이제 이줘오 되는거지
그리고
index.js에 있는 fetch를 아래와 같이 바꿔주면 끝이다

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

이제는 뒤에가 API_KEY가 아닌 api/movies(fetch)로 바뀐것을 볼수있다
물론 동작도 잘된다
이렇게 rewrite를 통한 masking으로 API_KEY를 숨길수 있게 됐다

여기서 한단계 더 나아가서 key를 숨기면

const API_KEY =process.env.API_KEY;

module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/old-blog/:path*',
        destination: '/new-blog/:path*',
        permanent: false,
      },
    ];
  },

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

하고
.env file을 만들어서

설정해주면된다
그리고 gitignore에 .env를 추가해주면 끝!