Netlify Functionsを使う

ツイート
2021年03月24日
2021年03月27日

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

ディレクトリ構成

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

bash
yarn add netlify-lambda

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

bash
mkdir functions

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

bash
touch functions/hello.js

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

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

コード

hello.js

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

package.json

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

netlify.toml

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

※Netlify Functionsは{TARGET}/distにデプロイされます。
https://{DOMAIN}/.netlify/functions/helloにデプロイされます。

ローカル開発

ローカルで起動する。

bash
yarn run serve --port=9001

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

資料