2018.09.04 2019.05.31

NetlifyでLambda Functionsを試す

プロフィールサイトやブログなど何かとお世話になっているNetlifyのLambda Functionsを利用していきます

Netlify

フロントエンド

[ 目次 ]

はじめに
"netlify-lambda"のインストール
Lambdaの構成を整理

netlify.toml
lambdaを作成（hello.js）
ビルドコマンドの修正（package.json）

ローカル確認
Netlifyにデプロイ&確認
補足
最後に

参考記事

はじめに

こんばんは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はNetlifyのLambda Functionsを試していきたいと思います。
"Lamdba Functions"の存在は知っていたものの「AWSのLambdaみたいなものだろう」という認識しかありませんでした・・・
この"Lambda Functions"を利用することでNetlifyでもAPIが定義できますね！！

簡単に利用できるようなので入門編を書いていきたいと思います。
私のプロフィールサイトに組み込んでいきながら進めていきます。

公式のドキュメントは以下になります。

https://www.netlify.com/docs/functions/

"netlify-lambda"のインストール

netlify-lambda はローカルで確認するためのサーバーを提供しています。
また、NetlifyにLambdaをデプロイする時のビルドにも利用するコマンドです。

■ npmを利用する場合

$ npm install netlify-lambda

■ yarnを利用する場合

$ yarn add netlify-lambda

Netlify用にプロジェクト内にインストールしましたが、ローカルではglobalとして定義してもいいかもしれません。私そうしてしまいました。

Lambdaの構成を整理

Lambdaに必要となるファイルを用意していきます。
まずは、Netlifyのデプロイ設定に必要なnetlify.tomlをプロジェクトルートに作成します。

netlify.toml

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

functionsのディレクトリ設定は functionsとしました。
この場合、/.netlify/functions/{function_name} というURLで公開されます。
ビルドコマンドとpublishディレクトリは、プロフィールサイトで利用するVue.jsの設定になります。

lambdaを作成（hello.js）

今回は、src/lambdaディレクトリにLambdaのソースを配置します。
（src配下はVue.jsのディレクトリ構成になっているので、Lambda用にディレクトリを別途設けました）

exports.handler = function(event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: "Hello, World"
  });
}

ビルドコマンドの修正（package.json）

Lambdaのビルドも必要になるので、package.jsonのビルドコマンドを修正します。
以下のように修正してください。

{
  ....
  "scripts": {
    "serve": "vue-cli-service serve",
    "lambda": "netlify-lambda serve src/lambda",
    "build": "netlify-lambda build src/lambda && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  ....
}

buildコマンドに netlify-lambda build src/lambda を追加しています。
また、ローカルで確認できるようにlambdaコマンドも追加しました。