NetlifyのFunctions機能を使ってみる

2019.4.19

NetlifyにはFuntionsという機能があります。これを使えばNetlifyでデプロイしたサイトでAmazon Lambdaを使えるようになります。

チュートリアルをやってみる

チュートリアルをやってみました。

Netlify Functions Examples

deploying a copy to Netlify.のリンクを踏むと自分のNetlifyに飛んで、プロジェクトをコピーするかどうか聞かれます。私はGithubアカウントと連携しているのでGithubにリポジトリをコピーしました。

2019 04 20 0 03 22

出来上がったリポジトリはこちら。

これをNetlifyでデプロイすると先程のチュートリアルページと全く同じものがデプロイされます。こちらのurlにデプロイしてみました。

https://netlify-functions-example-kwst.netlify.com/

ローカルで起動してみるとWebpackでコケた

下記エラーが出ました。

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/satoshi/practice/netlify-functions-example/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at Object.<anonymous> (/Users/satoshi/practice/netlify-functions-example/node_modules/webpack-dev-server/bin/webpack-dev-server.js:86:25)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Function.Module.runMain (module.js:682:10)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:613:3

Webpackのエラーなので、Webpack周りのモジュールを最新にしてみると直りました。

修正してPR送ってみたら、マージされました🎉

https://github.com/netlify/functions/pull/22

アクセス

http://localhost:8080にアクセスしてみると先程のチュートリアルのページが表示されます。

lamdaのスクリプトを追加するには？

package.jsonを見てみるとnetlify-lambdaというモジュールでlambdaのスクリプトを動かしているみたいです。

"start:server": "netlify-lambda serve src/lambda -c webpack.server.js",

GitHub - netlify/netlify-lambda: Helps building and serving lambda functions locally and in CI environments

netlify.tomlのfunctionsで指定したディレクトリのjsファイルをスクリプトとして動かすことができるようです。

[build]
  command = "yarn build"
  publish = "dist/client"
  functions = "dist/server"

試しにhello2.jsを追加してみます。

src/lambda/hello2.js

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

これでpushしてみるとデプロイが走り下記urlからhello2.jsが動いていることがわかります。アクセスしたときのログもNetlify上で見れるので便利です。

https://netlify-functions-example-kwst.netlify.com/.netlify/functions/hello2

© 2019-2024 kwst.site.