[배포] API 키 숨기기

1. vercel 설치

npm i -D vercel

 

2. package.json 파일에서 scripts 부분에 vercel 서버를 열 수 있는 명령어 추가

"vercel": "vercel dev"

 

3. vercel 서비스가 동작할 때 기존에 dev 명령어를 통해 동작하는 미리 만들어둔 프로젝트도 같이 동작하게 만들어주기
(vercel에 dev명령어를 알려줘야 한다)

 

- vercel.json 파일 생성한 후 아래 코드 입력

{
  "devCommand": "npm run dev",
  "buildCommand": "npm run build"
}

 

4. vercel에서 제공하는 serveless function 써보기
( 별도로 서버를 직접 구축하지 않고도 그 기능을 함수 단위로 작성해서 바로 사용할 수 있는 것이 '서버리스 함수' )

 

- api 폴더 생성하기

 

[사용 예시]

- test.js 생성

export default function handler(request, response){
  response.status(200).json({ //네트워크 상태 코드. 200은 정상이라는 의미.
    name: 'solmi',
    age: 99,
    isValid: true
  })
}

만약 http://localhost:1234/api/test 로 접근하기 위해선 npm run vercel로 서버 열어야 함.

 

[사용 예시]

src/main.js

;(async()=>{
  const res = await fetch('/api/test')
  const json = await res.json()
  console.log('/api/test', json)
})()

 

[영화 검색 사이트 api 숨기기 예시]

api/movie.js 생성

import fetch from 'node-fetch'

export default async function handler(request, response){
  const {title, page, id} = JSON.parse(request.body)
  const url = id
    ? `https://omdbapi.com?apikey=개인키&i=${id}&plot=full` 
    : `https://omdbapi.com?apikey=개인키&s=${title}&page=${page}`
  const res = await fetch(url) //node.js에서는 이 코드 인식 못함. 그래서 node fetch 패키지 설치필요.
  const json = await res.json
  response.status(200).json()
}

 

npm i node-fetch@2