Gatsby에서 netlify lambda function 사용하기

1. 개요

gatsby로 netlify lambda function을 사용하는 방법을 알아보자.

2. lambda란?

serverless function들의 묶음으로, endpoint를 설정해 줄 수 있다.

front End 쪽에서는 api key 등, 공개되면 안되는 정보들이 외부로 노출이 될 경우가 많은데, lambda에 중요한 정보를 배치해 두고 front End 쪽에서 lambda를 실행하면, 중요한 정보는 보호하며, 원하는 동작을 실행시킬 수 있다. 또한 cors issue도 해결해 주기 때문에 좋다.

3. 설정

3.1. pakage install

해당 패키지를 설치 하자

yarn add http-proxy-middleware netlify-lambda npm-run-all

3.2. package.json 수정

"scripts": {
  "develop": "env-cmd -f .env gatsby develop",
  "start": "run-p start:**",
  "start:app": "yarn develop",
  "start:lambda": "netlify-lambda serve src/functions",
  "build": "gatsby build && netlify-lambda build src/functions",
  "build:app": "gatsby build",
  "build:lambda": "netlify-lambda build src/functions",
  "clean": "gatsby clean"
},

netlify lambda를 실행하기 위해서는 2가지 명령어가 존재한다.

• netlify-lmabda serve [path]
• netlify-lmabda build [path]

serve는 development 환경에서 사용하고 build는 production 환경에서 사용하는 명령어 이다.

주의 할점은 netlify-lambda build 전에 반드시 gatsby build가 실행이 되어야 한다는 점이다. 개발 환경에서 start 명령어에 run-p start:** 처럼 build에 실행할 경우, netlify-lambda build가 gatsby build보다 먼저 실행될 가능성이 있으므로 반드시 위에 build script처럼 따로따로 적어주도록 한다.

3.3. netlify.toml 작성

root 폴더에 netlify.toml 파일을 작성해 준다.

[build]
  command = "npm run build"
  functions = "lambda"
  publish = "public"

netlify에 deploy될 당시의 config를 설정해 주는 곳이다.

• command: default build command.
• function: lambda function들이 어디에 저장될지 결정
• publish: 기본적인 html file들이 저장되는 곳을 지정

3.4. function 작성

export.handler = (event, context, callback) => {
  console.log("queryStringParameters", event.queryStringParameters)
  callback(null, {
    statusCode: 200,
    body: JSON.stringify({
      msg: "Hello, World! ",
    }),
  })
}

package.json에서 netlify-lamda에 지정한 path에 파일을 작성한다.

netlify lambda는 반드시 handler가 return 되어야 한다. event와 context가 전반드시 전달되어 오고 callback은 option이다.

• event: 기본적인 request 정보
• context: event 외에 jwt나 authorization token등의 정보

작성한 handler를 요청할 수 있는 주소는 /.netlify/functions/{function_name}이다.

3.4.1. event로 전달되는 값

{
  "path": "Path parameter",
  "httpMethod": "Incoming request's method name"
  "headers": {Incoming request headers}
  "queryStringParameters": {query string parameters }
  "body": "A JSON string of the request payload."
  "isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encode"
}

3.4.3. callback 값

{
  "isBase64Encoded": true|false,
  "statusCode": httpStatusCode,
  "headers": { "headerName": "headerValue", ... },
  "body": "..."
}

4. 개발환경 설정

3. 까지는 deploy용의 설정이고, 개발환경에서는 사용할 수 없다.

개발환경에서 사용하기 위해서는 gatsby-config.js파일에 설정을 해야 한다.

const { createProxyMiddleware } = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      "/.netlify/functions/",
      createProxyMiddleware({
        target: "http://localhost:9000",
        secure: false,
        pathRewrite: {
          "/.netlify/functions/": "",
        },
      })
    )
  },
}

위의 config를 설정한 후 package.json에서 설정했던 start 명령어를 실행하면 개발환경에서도 lambda를 사용할 수 있다.