Next.js rewritesでマイクロサービスAPIプロキシを設定する

問題

フロントエンドはNext.js1つなのに、バックエンドのマイクロサービスがそれぞれ異なるポートで動いています。クライアントから直接呼び出すとCORSの問題が発生します。

解決方法

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/proxy/token/:path*',
        destination: 'http://127.0.0.1:3001/:path*',
      },
      {
        source: '/api/proxy/file/:path*',
        destination: 'http://127.0.0.1:3002/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

クライアントからは/api/proxy/token/verifyのように呼び出すだけです。Next.jsがサーバーサイドでhttp://127.0.0.1:3001/verifyにプロキシしてくれます。

ポイント

• rewritesはURLを変えずに転送先だけを変更します。redirectsと違い、クライアントからはプロキシの存在が見えません。
• :path*はワイルドカードで、すべてのサブパスを転送します。/api/proxy/token/a/b/cがhttp://127.0.0.1:3001/a/b/cにマッピングされます。
• 同一ドメインからリクエストが送信されるため、CORS設定が不要です。開発環境で特に便利です。