Netlify 배포

netlify-cli

npm i -D netlify-cli@version

cli가 설치가 안되서 애 먹었다...
이유는 나의 node.js 버전과 npm 버전이 호환이 안되기때문이다.

높은버전으로 업데이트를 하거나, netlify-cli를 낮은버전으로 설치해줘야한다!

netlify.toml

# Netlify Dev 
# https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block

[build]
  command = 'npm run build'
  functions = 'functions' # Netlify 서버리스 함수가 작성된 디렉도리를 지정합니다.
  publish = 'dist' # 프로젝트 빌드 결과의 디렉토리를 지정합니다.

# 개발 모드

[dev]
  framework = '#custom' # 감지할 프로젝트 유형을 지정합니다. 앱 서버 및 'targetPort' 옵션을 실행하는 명령 옵션은
  command = 'npm run dev:webpack' # 연결할 프로젝트의 개발 서버를 실행하는 명령(스크립트)을 지정합니다.
  targetPort = 8079 # 연결할 프로젝트 개발 서버의 포트를 지정합니다.
  port = 8080 # 출력할 Netlify 서버의 포트를 지정합니다.
  publish = 'dist' # 프로젝트의 정적 콘텐츠 디렉토리를 지정합니다.
  autoLaunch = false # Netlify 서버가 준비되면 자동으로 브라우저를 오픈할 것인지 지정합니다.

netlify를 이용한 Server less 함수를 사용

"dev": "netlify dev",

개발 버전으로 netlify를 사용할수 있도록 설정한다.

functions/movie.js

보안을 위해 OMDB_API_KEY를 따로 .env에 보관하고 사용한다.
.gitignore에 .env 추가하여 git에 업데이트 되지 않도록 주의한다.

.env 파일도 만들어서 api키 추가 띄어쓰기는 하지 않도록 한다.

밑에 코드보면 return으로 body에 객체데이터를 받도록 JSON.~~ 코드를 사용하고있다. 필수적이다!!

const axios = require("axios");
const { OMDB_API_KEY } = process.env;

exports.handler = async function (event) {
  // 네트워크 이동할때는 객체데이터로 변환해야한다
  const payload = JSON.parse(event.body);
  const { title, type, year, page, id } = payload;
  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=${page}`;

  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,
    };
  }
};

그리고 netlify에 환경변수를 설정하여 OMDB_API_KEY를 저장한다.
그래야 git에 업데이트 안해도 netlify가 저장해주기 때문에 영화검색이 가능하다.