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

TL;DR

• nuxtのプロキシモジュールを使う : @nuxtjs/proxy
• proxy の設定は netlify-lambda 参照

// 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"
  }
}

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