전언

Netlify Function의 시작 기사입니다.
도입할 때 일본어를 많이 찾아봤던 기사도 적고, Nuxt.제이스와의 조합은 어떨까? 넷라이프 펀션에 집중하지 못한 뉴스가 많아 직접 쓰는 메모도 겸했다.
전제는 살짝 쓸 수 있고 npm를 사용할 수 있는 사람을 대상으로 하는 보도다.

이 기사를 읽었어요.

· Netlify Function의 사용법에 대해 조금 이해가 간다.
· 로컬에서 Netlify Function을 시뮬레이션할 수 있습니다.
· Netlify Function을 통해 외부 API와 대화할 수 있습니다.
· Netlify의 환경 변수 설정 방법을 이해한다.

Netlify Function is 소개

Netlify에서 제공하는 add-on 중 하나입니다.
faaS(Function as a service)라고 불리는 서비스로, 기능(Function)을 수행할 수 있는 환경을 제공한다.
AWS Lambda 기반 운영 환경 Node기본값은 js8.10입니다.
10. x계를 사용하려면 AWS_LAMBDA_JS_RUNTIME의 환경 변수에 nodejs10.x를 지정하면 다시 쓸 수 있습니다.AWS_LAMBDA_JS_RUNTIME의 환경 변수가 지정할 수 있는 값은 AWS Lambda runtime에 기재되어 있습니다.

Netlify와 창고 협력

아무래도 Netlify와 창고를 연합하지 않으면 대화를 시작할 수 없으니 합작합시다.
합작만 한다면 Netlify 의 첫 페이지부터 절차를 따라 진행해도 특별히 어려운 점이 없기 때문에 사소한 합작 방법에 대해서는 좋아하지 않습니다.
Netlify와 합작한 창고를 이미 사용했다면 Netlify Function을 위한 창고를 새로 만들 필요가 없습니다.

환경 구조

Netlify 구성 파일 만들기

Netlify 설정 파일 netlify 입니다.루트 디렉터리에toml 파일을 만듭니다.
여기에 쓴 설정도 Netlify 관리 페이지에서 설정할 수 있지만, 다음에 기술한 로컬 아날로그 파일은 필수적입니다.
netlify.toml

[build]
  command = "npm run build"
  functions = "dist/api"

command = Netlify 프로그램을 풀 때 실행되는 명령functions = Netlify Function의 끝점 개체 파일을 저장하는 디렉토리

로컬 에뮬레이션 허용

netlify-lambda를 사용하여 Netlify Function을 로컬에서 시뮬레이션할 수 있습니다.
이게 없으면 매번 변경→제출→디버깅→확인 절차를 반복해 고통스러워요.
이후에도 가져올 수 있지만 넷리파이 설정 방법에 따라 번거로운 일이 많을 수 있으니 우선 넣는 것을 추천한다.
우선 루트 디렉토리에서

npm init

패키지를 실행합니다.json 만들기

npm i netlify-lambda

설치 후 패키지.json에서 실행용 스크립트를 추가합니다.
package.json

"scripts": {
  "dev": "netlify-lambda serve resources/api（ソースが格納されているフォルダ名）",
  "build": "netlify-lambda build resources/api（ソースが格納されているフォルダ名）"
}

netlify-lambda serve <folder-name>에서 로컬에서 확인할 수 있는 서버를 구축하는 동시에 대상의 디렉터리의 내용을 컴파일합니다.netlify.toml functions 에서 지정한 디렉터리를 토합니다.
기본적으로 사용되는 포트는 9000호--port입니다.
port에서 지정한 예

"dev": "netlify-lambda serve resources/api --port 9001"

이로써 최소한의 환경 구축이 완료됐다.

Hello World 답장 API 만들기

우선 Hello World 문자열에 답장을 주는 API 샘플을 만들어 보자.
방금 설정된 netlify-lambda 대상의 디렉터리(이번에는 Resources/api)에서 js 파일을 만듭니다.
이번엔 일단 Hello로 하자.제이스라는 이름으로 만들었어요.
이 파일 이름은 최종 출석체크이기 때문에 실제 제작할 때 이름을 주의하는 것이 좋다.
예: hello.js =/.netlify/functions/hello

hello.js의 내용

기본적으로 공식 문서 내용과 완전히 같다.
우선 예의상 다음과 같은 방법handler을 도출해야 한다.
hello.js

exports.handler = function(event, context, callback) {
    // ここに中身の処理を記述
}

어쨌든 Hello World에 답장만 하고 내용을 처리하는 것은 이것뿐이다.callback 함수의 두 번째 매개 변수에만 상태 코드와 바디의 정보를 전달한다.
첫 번째 파라미터는 오류일 때 사용하기 때문에 이번에는 비어 있습니다.
hello.js

callback(null, {
  statusCode: 200,
  body: 'Hello World'
});

여기서 끝나면...

npm run dev

로컬 서버를 시작합니다. localhost: 9000.netlify/functions/hello에 방문하면 Hello World가 표시될 것입니다.

이벤트 매개 변수에 들어가는

event

{
    "path": "リクエストのパス", 
    "httpMethod": "リクエストのメソッド（GETとかPOSTとか）"
    "headers": {ヘッダ情報}
    "queryStringParameters": {クエリパラメータの情報}
    "body": "リクエストの文字列"
    "isBase64Encoded": "リクエストがBase64でエンコードされているかどうか"
}

context 매개 변수의

Netlify Identity를 사용하면 사용자의 상하문 정보를 되돌려줍니다.(사용되지 않을 경우 빈 정렬)
저는 Netlify Identity를 사용해 본 적이 없어서 자세한 내용은 잘 모르겠습니다.

async로 간결하게 쓸 수 있어요.

async를 사용하면 더욱 간결하게 쓸 수 있다.
(운영 환경을 Nodejs6.10으로 지정하면 사용할 수 없음)
hello.js

exports.handler = async () => {
  return {
    statusCode: 200,
    body: 'Hello World',
  };
};

제출 확인 작동 여부

여기까지의 설정이 끝나면 정식 공연도 움직이는지 확인하기 위해 제출한다.
디버그가 끝난 후 관리 페이지의 Function에서 hello를 사용하십시오.만약 js의 프로젝트가 완성된다면 안전하게 식별할 수 있습니다.

hello.js 프로젝트를 누르면 로그를 볼 수 있는 화면으로 이동합니다.

펀션 로그에서 수행한 이력서나 JS 내console.log라면 그 내용이 표시됩니다.
엔도포인트 URL을 방문해 헬로 월드가 화면에 뜨면 정식 촬영 때도 정상적으로 작동할 수 있다.

Netlify Function에서 외부 API 처리

외부 API를 사용할 때 프론트 데스크에 API 열쇠를 가져오고 싶지 않지만, Netlify의 환경 변수와 조합하면 행복할 것 같다.

환경 변수 설정(Netlify 측면)

환경 변수의 설정은 Settings]Build&deploy>Environment에서 할 수 있습니다.

여기에 key와 value를 설정하면 process.env.KEY처럼 환경 변수를 얻을 수 있다.

환경 변수 설정(로컬)

안전하지 않으면 넷라이프.toml에 다음 내용을 추가하여 로컬에서도 환경 변수를 사용할 수 있습니다.
netlify.toml

[build.environment]
  KEY="hogefuga"

toml 파일은 수치를 쓸 수 없기 때문에 '값' 으로 묶는 것을 잊지 마십시오.
안전 정보를 처리하고 싶은 상황에서env 파일을 사용합니다.
먼저 설치dotenv-webpack

npm i dotenv-webpack

netlify-lambda에 사용된 웹 패키지의 설정을 덮어쓰기 위해 웹 패키지를 진행합니다.functions.js 파일을 만듭니다.
내용은 다음과 같다.
webpack.functions.js

const Dotenv = require('dotenv-webpack')

module.exports = {
  plugins: [new Dotenv()],
}

그 다음엔?env 파일을 만들고 키와 값 정보를 기록합니다
.env

KEY=value

dev 명령에 --config 옵션을 추가하여 웹 패키지가 추가 모듈을 읽도록 합니다.
package.json

"dev": "netlify-lambda serve resources/api --config ./webpack.functions.js",

이렇게 하면 현지에서도 환경 변수를 사용할 수 있을 것이다.
.env 파일을 ignore로 설정하는 것을 잊지 마세요.

axios 설치

npm i axios

를 참고하십시오.
그리고 JS 파일axios에서 사용할 수 있습니다.

const axios = require('axios');

베벨require을 통과하지 않아 사용할 수 없습니다.
환경 변수와axios의 조합 샘플은 다음과 같다.

const axios = require('axios');

exports.handler = async () => {
  const URL = `https://api.com?key=${process.env.API_KEY}`;
  return axios.get(URL)
    .then(({ data: data }) => ({
      statusCode: 200,
      body: JSON.stringify(data)
    }))
    .catch(e => ({
      statusCode: 400,
      body: e
    }));
};

node-fetch는 안 될 것 같아요.

import 대신 axios를 사용해 보았지만 로컬로 이동한 Netlify가 디버깅에 실패했습니다.node-fetch 사용하지 않으면 괜찮습니다. 컴파일할 때 무슨 문제가 있습니까?)
제가 여기저기 조사하다가 어떤 아이슈에 netlify-lambda라고 쓰여 있는 걸 봤기 때문에 그랬겠죠.

끝맺다

이상은 대략적인 설명입니다.
Netlify 를 사용하는 사람은 반드시 시도해 보십시오.