Netlify Functions利用することで、サーバーレスアプリケーションを構築できる。JavaScriptとGoで構築が可能だが、この記事ではJavaScriptのみ説明する。
なおNetlify Functionsは、デフォルトではURLがわかれば、誰でもアクセスできてしまう。アクセスを制限したい場合にはNetlify Identityによる認証などを検討する。
作成したプログラムのテストのときに、プログラムを修正するたびにNetlify環境に適用していては、こまめなテストが難しくなる。そのためNetlify Functionsにはローカル環境でテストをするためのパッケージ(netlify-lambda)が用意されている。このパッケージをインストールすると、ローカル環境でNetlify Functionsが実行できる。
Netlifyのサイトとローカル環境との違いを説明する。
ポート番号が違うことによるCORS違反
Netlifyのサイトとローカル環境では、webページとファンクションのURLの関係に違いがある。下の表の例のwebページはvue-cliで作成している。ポートはデフォルトとする。
| webページのURL | ファンクションのURL | |
|---|---|---|
| Netlifyサイト | https://サイト名.netlify.app | https://サイト名.netlify.app/.netlify/functions/ファンクション名 |
| ローカル環境 | http://localhost:8080 | http://localhost:9000/.netlify/functions/ファンクション名 |
Netlify環境ではwepページのURLとファンクションのURLは同じポートである。
ローカルでのテスト環境では、webページとファンクションは別のプログラム(vue-cli-service serveとnetlify-lambda serve)で処理されるため、別のポートを利用する。そのため、webページのJavaScriptからファンクションにアクセスするとCORS違反になる。テスト環境ではレスポンスのヘッダに適切なAccess-Control-Allow-Origin属性を設定する必要がある。
レスポンスのヘッダのエラー処理
レスポンスのヘッダには、正しくはオブジェクトを設定する。空の場合には{}である。これを誤って空のリスト[]を設定すると、ローカル環境ではエラーにならないが、Netlify環境ではステータスコードが502を返すという、非常に原因がわかりにくいエラーになる。