Netlify 배포, API 만들기, 변수 구성, 포트 수정 및 배포

Netlify Serverless Functions

본 프로젝트는 SPA 방식으로 작성했으며, imdbAPI 인증키를 노출 우려가 있습니다.

netlify의 서버리스 함수를 사용해 해당 단점을 최소화하려고 합니다.

 

netlify-dev 참조

 

기존에 프로젝트는 바로 브라우저에 배포되는데

서버리스 함수를 사용하면 functions와 함께 netlify dev에 배포후, 브라우저에 배포합니다.

 

Netlify CLI 구성

프로젝트 폴더 안에 netlify.toml파일을 생성한 후, 위와 같이 작성해줍니다.

 

영화 정보 반환 API 만들기

const axios = require('axios')

exports.handler = async function(event) {
  const payload = JSON.parse(event.body)
  const { title, type, year, page, id } = payload
  const OMDB_API_KEY = '7035c60c'
  const url = id 
    ? `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&i=${id}`
    : `https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=1`
  
  try {
   const {data} = await axios.get(url)
   if(data.Error) {
    return {
      statusCode: 400,
      body: data.Error
    }
   }
   return {
    statusCode: 200,
    body: JSON.stringify(data)
   }
  } catch(error) {
    return {
      statusCode: error.response.status,
      body: error.message
    }
  }
}

functions 폴더 안에 movie.js를 만듭니다.

store폴더 안의 movie.js의 _fetchMovie()안에 내용을 가져와서 위와 같이 작성합니다.

 

비동기로 작성해야해서 async를 꼭 붙여햐 합니다.

node.js에서 동작한 JavaScript는 import대신 require로 axio패키지를 가져와야 합니다.

문자열로 반환해야 함으로 stringify등을 통해 string형인 것을 확인 후 return합니다.

error객체 안에 내용은 axios문서 나오는대로 작성했습니다.

axios 문서 참조

 

async function _fetchMovie(payload) {
  return await axios.post('/.netlify/functions/movie', payload)
}

stores폴더 안에 movie.js의 _fetchMovie를 수정합니다.

 

기존에 axios.get()을 사용했고, 여기서는 .post()를 사용했습니다.

get은 payload를 쿼리스트링 방식으로 풀어줍니다. 즉, 링크에 ?key=value방식으로 작성해줍니다.

post는 payload를 객체로 body속성에 담아서 전송합니다.

 

위에 searchMovies의 catch부분에 error객체를 반환해야 합니다.

 

로컬 및 서버의 환경 변수 구성

프로젝트를 작성하면서 functions폴더 안에 movie.js api에 imdbAPI key가 있습니다.

github같은 공개장소에 push하면 역시나 노출 우려가 있습니다.

npm i -D dotenv-webpack

위 코드를 통해 dotenv-webpack를 설치합니다.

 

webpack.config.js 파일에 Dotenv를 사용할 것을 명시해줍니다.

 

OMDB_API_KEY=7035c60c

루트경로에 .env 파일을 만들어서 위에 api key를 관리해줍니다.

빈칸, 따움표등 있으면 안 됩니다.

 

const OMDB_API_KEY = process.env.OMDB_API_KEY

functions폴더 안에 movie.js 파일에 .env의 내용을 불러오고, 함수 안에 있는 키를 지웁니다.

 

github에 push할 때, gitignore를 통해 해당 변수를 관리합니다.

 

Netlify에서 환경변수에 apikey를 설정하면 됩니다.

 

 

포트 수정 및 배포

netlify에서 열고 확인할 일이 많아서 열어주는 명령어를 변경해줍니다.

 

netlify.toml세 명령어도 변경해주고,

netlify 포트를 8080으로 수정하고, 기존 서버는 8079로 변경해줍니다.

 

webpack.config.js 파일에 devServer에서 포트를 8079로 수정합니다.