[Vue.js] Netlify + Serverless Function

1. netlify 설정 파일 작성

- 프로젝트 root에 netlify.toml 파일 작성

 

[build]
  command = "npm run dev"
  publish = "dist"
  functions = ".functions"

[functions]
  node_bundler = "esbuild"

 

 

2. function 생성.

 

- functions 디렉토리 생성

- test.ts 파일 작성.

 

 

import fetch from 'node-fetch';

exports.handler = async (event, context) => {
    // get 방식일 경우
    const isResponse = event.queryStringParameters.is_response;

    // post 방식일 경우
    // const eventBody = JSON.parse(event.body);
    let statusCode = 200;
    if (!isResponse) {
        
        return {
            statusCode: 400,
            body: JSON.stringify({
                "message": "bad request",
            }),
        };
    
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(res => res.json());

    return {
      statusCode: statusCode,
      // 문자데이터 반환 방법
    //   body: 'Hello world',
      
      
      //객체 데이터 반환 방법
      body: JSON.stringify(response),
    };
  }

 

 

 

netlify 에 올려서 확인하는 방법 말고,

로컬에서 확인하는 법!

 

netlify-lambda 패키지 인스톨

npm i netlify-lambda

 

package.json 에 빌드 스크립트 추가

"netlify": "netlify-lambda serve functions --port 9001"

serverless function 작동.