Posted at

nuxtプロジェクトでnetlify-lambdaを利用する


TL;DR

// nuxt.config.js

module.exports = {
modules: [
'@nuxtjs/proxy'
],
proxy: {
'/.netlify': {
target: 'http://localhost:9000',
pathRewrite: { '^/.netlify/functions': '' }
}
}
};


まえおき : netlify-lambda について

netlify は簡単にデプロイできて、ビルドもしてくれて、おまけに functions で AWS lambda をプロキシしてくれて、非常に助かっています。そんな netlify functions で開発をすすめるのにとても便利なパッケージが netlify-lambda です。

netlify-lambda は、



  • netlify-lambda serve でローカル開発


  • netlify-lambda build でlambda関数のビルド

をすることができる便利なパッケージです。使い方については パッケージのREADME をご覧いただくとして、 netlify-lambda serve を使う上で一点留意事項があります。


netlify-lambda のパス

netlify-lambda serve をすると、lambda関数を localhost:9000 でサーブするようになります。たとえば、 hello.js というファイルを作成すると、その関数へ http://localhost:9000/hello でアクセス出来るようになる寸法です。

しかし、 netlify 環境へデプロイした際には、 function へのアクセスパスは /.netlify/functions/ になります。


  • ローカル(netlify-lambda)でのパス : /hello

  • リモート(netlify)でのパス : /.netlify/functions/hello

この差異を解決する為に、プロキシ機能を使う事が推奨されています。README にある webpack debserver での例はこの様になっています。


module.exports = {
mode: "development",
devServer: {
proxy: {
"/.netlify": {
target: "http://localhost:9000",
pathRewrite: { "^/.netlify/functions": "" }
}
}
}
};

これで、 webpack debserver のアクセスをプロキシして、 http://localhost:8080/.netlify/functions/hello へのアクセスは、 http://localhost:9000/hello へとパスされる仕組みです。便利ですね。

長い前置きおわり。


Nuxtプロジェクトで netlify-lambda

さて、デプロイと同時にビルドしてくれる netlify は nuxt と親和性が高いと考えるのですが、nuxt の場合は functions のプロキシはどうしたらよいでしょうか。

答えは簡単で、nuxt からもプロキシモジュールが出ています。 @nuxtjs/proxy です。

まずはプロキシモジュールをインストールし、

npm i @nuxtjs/proxy --save-dev

nuxt.config.js を編集して modules への追加と proxy の追加を施します。

// nuxt.config.js

module.exports = {
modules: [
'@nuxtjs/proxy'
],
proxy: {
'/.netlify': {
target: 'http://localhost:9000',
pathRewrite: { '^/.netlify/functions': '' }
}
}
};

これでOKです。あとは nuxt の実行と一緒に netlify-lambda serve も起動してやれば、期待する働きをしてくれるでしょう。

{

"scripts": {
"dev": "nuxt & netlify-lambda serve functions"
}
}

前置きの方が長いですが、現場からは以上です。