帶有 Sentry 的 Vercel 中的 Next.js - 在生產中忽略源映射

Question

我正在使用@sentry/next.js模塊提供的 Sentry 配置在 Vercel 中部署 Next.js 應用程序。 這是示例 repo - https://github.com/voronianski/test-next-sentry-app

它使用來自 Next.js 的官方示例（例如https://github.com/vercel/next.js/tree/canary/examples/with-sentry ）。

與 Sentry 的集成完美運行。 然而，我注意到一件讓我煩惱的事情。 每個文件的源圖都是公開的。

這是應用程序的鏈接 - https://test-next-sentry-app.vercel.app/這里是 map 文件的 _app.js Z5E056C500A1C4B6A7115.-next-sentry-app. _next/static/chunks/pages/_app-b2c4ce59f737104d4ac1.js.map

這導致瀏覽器開發工具中的項目結構和源代碼完全可見 -

我嘗試使用.vercelignore文件，但沒有幫助 - https://github.com/voronianski/test-next-sentry-app/blob/main/.vercelignore

有沒有辦法不將源 map 文件在 Vercel 中公開？ 謝謝！

Answer 1

考慮通過 CDN 與 vercel.app 域對應用程序進行前端處理

https://vercel.com/support/articles/using-cloudflare-with-vercel

Cloudflare 可以通過他們的團隊計划免費獲得基於 IP 的訪問權限（不是公共用戶），然后您可以將他們的 IP 訪問規則添加到您的 IP 范圍內

https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-apps

Answer 2

正如 Vercel 支持所建議的那樣-您可以使用rewrites中的next.config.js選項來實現這一點-

const nextConfig = {
  // ...
  rewrites: async () => {
    // do not leak source-maps in Vercel production deployments
    // but keep them in Vercel preview deployments with generated urls 
    // for better dev experience
    const isVercelProdDeploy = process.env.VERCEL_ENV === 'production';

    if (isVercelProdDeploy) {
      return {
        beforeFiles: [
          {
            source: '/:path*.map',
            destination: '/404'
          }
        ]
      };
    }

    return [];
  },
  // ...
};

module.exports = nextConfig;

https://nextjs.org/docs/api-reference/next.config.js/rewrites