rewrites() - nextConfig 에서 URI 우회 & API parameter 숨기기

이슈 내용: API 접속할 때의 보안키 숨기기 & URI 표시 우회가 필요함

해결 방법: Next.js - nextConfig 부분에서 rewrites() 활용하여 API 우회 & process.env 설정하여 키 숨김

---

API KEY가 노출되던 파라미터 부분

index.tsx 에 설정되어 있던 부분 (태그가 존재하는 return 부분 제외) 로직은 아래와 같다.

 

const API_KEY = "c3a6fcbe2573a7042c" // 개인정보 사유로 일부 키 삭제
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)
        })()
    }, [])

인기있는 영화 리스트를 받아오는 API에 async - await 을 활용하고, json 또한 await 으로 받은 후 setMovies 처리.... 인데

API_KEY 부분이 노출되는 것이 보안상 좋지 않기 때문에, 이 부분을 가리는 방법에 대해 코딩을 하였다.

 

Next.js 에서 서버 관련 세팅을 지원하는 next.config.js 에서 이를 설정할 수 있다.

const nextConfig = {
	reactStrictMode: true,
   	swcMinify: true
}
...

기본적으로 위와 같은 설정이 되어 있을 것인데, (TypeScript 기준)

NextConfig 상에서는 redirects(), rewrites() 등과 같은, 부가적인 설정 메서드를 기본적으로 지원한다.

https://nextjs.org/docs/api-reference/next.config.js/rewrites

next.config.js: Rewrites | Next.js

 

Rewrites() 활용 및 코드 리팩토링

이번 이슈에 대해서는 rewrites()를 활용한다. 왜냐하면..

• redirects()는 유저에게 변경되는 URL 정보가 출력된다.
  (ex. source가 '/contact'고 destination이 '/form'이라면, 유저가 /contact 에 접속했을 때 주소가 /form 으로 넘어가게 됨)
• 현재 URL이 변경되는 것은 유저에게 노출되어서는 안되고, API_KEY 또한 보여서는 안 된다.

그래서 우선, next.config.js 부분에서 rewrites() 코드를 작성하였다.

const API_KEY = process.env.API_KEY

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() { // 리다이렉트와 같지만, 유저들에게 URL 변경이 보이지 않음
    // => /api/movies 만 보이고, API 에서의 파라미터(API_KEY) 가 보이지 않음!!!
    return [
      {
       source: '/api/movies',
       destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
      }
    ]
  }
}

module.exports = nextConfig

API_KEY는 리포지토리에 바로 .env파일을 생성하고, API_KEY라는 prop에 주입해준 것으로

process.env.API_KEY로 불러오는 것이 가능했다. (.gitignore 에 해당 파일 스코프 지정은 필수!)

process.env.API_KEY 설정

 

rewrites() 에서의 source는 '입력받는 API'를 말하는 것으로,

해당 API를 입력 받았을 때 destination 에 접속하게 되지만, 유저에게 실제 API가 변동된 것임을 알려주진 않는다.

result preview만 지원되고, 파라미터인 API_KEY 정보는 출력되고 있지 않음!

 

위와 같이 rewrites() 에서 지정된 source는, 네트워크 상에서도 실제 URL 처럼 표시가 되기 때문에

URL도 원하는 방식으로 지정할 수 있고, 유저에게는 공개할 정보를 가려서 표시할 수 있다.

 

 

+ 추가

위와 같이 유동 파라미터를 정의하는 것도 가능하다.

(source가 /:id일 경우, [id].tsx 인 파일과 연동 -> destination 에서도 같은 내용의 파라미터를 받기 위한 정의)