react, redux, typescriptの勉強がてらPWAのpodcastアプリを開発してます。
バックエンド側の開発をせずにいたい思いがあって、自前のAPIを持ってません。
そこで問題になるのがCORS制限です。

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://example.com/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

こういうエラーのやつですね。

今回でいうとRSSの取得でブロックされる場合があります。
そうなると使い勝手が悪くなるので、取り急ぎの対処としてLambda functions on Netlifyを使いCORS制限を回避する記事です。

お試しであれば https://cors-anywhere.herokuapp.com/ も便利でした。

最終的なコードはこちらのリポジトリです。

やること

公式ドキュメントを参考にしつつ進めていきます。
goでもいけるみたいですが、JavaScriptです。

1. プロジェクト準備
2. コーディング
3. デプロイ設定
4. デプロイ

プロジェクト準備

ディレクトリ構成ですがこちらのリポジトリを参考にしました。
netlify-lambdaを利用することでfunctionsのローカル開発環境が整います。

ビルド後の出力先

/src/client -> /dist
/src/functions -> /functions

コーディング

ローカルサーバーを立てながらコーディングしていきます。

どのようなファイルを準備すればいいかというと、handlerメソッドをエクスポートするJavaScriptファイルです。
デプロイされると /.netlify/functions/{filename} で実行できるようになります。 超シンプル。

fetchして文字列を返すだけのファイルを準備しました。

// src/funcitons/fetch.js
import fetch from 'node-fetch'
function response(statusCode = 200, body = '') {
  return {
    statusCode,
    body
  }
}
  
exports.handler = async (event) => {
  const { url } = event.queryStringParameters
  if (!url) {
    return response(400, 'url is required')
  }
  try {
    const res = await fetch(url, {
      timeout: 5000
    })
    if (!res.ok) {
      return response(res.status, res.statusText)
    }
    
    return response(200, await res.text())
  } catch (err) {
    return response(500, String(err))
  }
}

試しにレスポンスのbodyでres.blob()などにしたところ First argument must be a string or Buffer とエラーになりました。

デプロイ設定

ファイルの準備が整ったので、デプロイ設定をします。
functionsをAWSにデプロイしてもらう設定方法は2つあり¹

1. プロジェクトの管理画面
2. netlify.toml

どちらからでも設定できます。
netlify.tomlの設定が優先されるのと、コードで残しておきたいためtomlで設定しました。

[build]
  ...
  functions = "functions"

デプロイ、確認

デプロイして実際に確認してみると、functions経由では見事にCROS制限を回避できました。
(ローカルで確認済みですが…)

Lambda functions on Netlifyの料金プラン

2019年1月11日現在、フリープランで利用できる範囲は
1か月あたり125,000リクエスト、100時間なので
1日あたり約4166リクエスト、約3時間使えることになります。
1リクエストの実行時間を2.5秒以内にしておけば、リクエスト数の上限まで利用できる計算になります。

スケールする必要があれば

• プランアップグレード
• AWS Lambdaに移行
• 自前APIに移行

などが考えられます。
内容はとてもシンプルなものなので移行は楽なのではないでしょうか。

AWS Lambdaも利用したことがなかったのですが、デプロイするだけでいいっていうのは楽ですね。
個人プロジェクトのお試しとしてLambda functions on Netlify最高でした。