Vercel 中的 Next.js 与 Sentry - 忽略生产中的源映射

Question

我正在 Vercel 中部署 Next.js 应用程序，并使用

@sentry/next.js

模块提供的 Sentry 配置。这是示例存储库 - 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/ 这里是 _app.js 的地图文件 https://test-next-sentry-app。 vercel.app/_next/static/chunks/pages/_app-b2c4ce59f737104d4ac1.js.map

这导致浏览器开发工具中完全可见的项目结构和源代码 -

我尝试使用

.vercelignore

文件，但没有帮助 - https://github.com/voronianski/test-next-sentry-app/blob/main/.vercelignore

有没有办法在 Vercel 中不将源映射文件部署到公共？谢谢！

Answer 1

按照 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

Answer 2

在下一个配置中尝试这个

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

对我有用

Answer 3

考虑通过 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