Netlify Functionsを使う

Nuxt.js(SSG)で構成されたプロジェクトにNetlify Functionsを統合していきます。

ディレクトリ構成

netlify-lambdaをインストールします。

yarn add netlify-lambda

サーバレス関数を置くディレクトリを作ります。

mkdir functions

その配下に、hello.jsというファイルを作ります。

touch functions/hello.js

netlifyの構成ファイルを作ります。

touch netlify.toml 
.
├── functions/hello.js
├── netlify.toml
├── nuxt.config.js
├── package.json
└── yarn.lock

コード

hello.js

exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: "Hello, World"
  }
}

package.json

{
  "scripts": {
    "serve": "netlify-lambda serve functions/",
  }
}

netlify.toml

[build]
  Command = "netlify-lambda build functions/ && nuxt generate --modern=server"
  functions = "functions/dist"
  publish = "dist"

※Netlify Functionsは{TARGET}/distにデプロイされます。

https://{DOMAIN}/.netlify/functions/helloにデプロイされます。

ローカル開発

ローカルで起動する。

 yarn run serve --port=9001

http://localhost:9001/.netlify/functions/helloから実行できます。

資料