Next.js 在带有哨兵的 Vercel 中 - 在生产中忽略源地图

Question

我正在使用 @sentry/next.js 模块提供的哨兵配置在 Vercel 中部署一个 Next.js 应用程序。这是示例回购 - https://github.com/voronianski/test-next-sentry-app

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

与 Sentry 的集成完美无缺。但是我注意到一件事让我很困扰。 每个文件的源映射 public 仅可用。

这是应用程序的 link - https://test-next-sentry-app.vercel.app/ and here is the map file of _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 中不将源映射文件部署到 public？谢谢！

Answer 1

考虑通过 CDN 与 vercel.app 域

前置您的应用程序

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

Cloudflare 通过他们的团队计划免费提供基于 IP 的访问点（不是 public 用户），然后您可以将他们的 IP 访问规则添加到该路径的 IP 范围

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

Answer 2

根据 Vercel 支持人员的建议 - 您可以使用 next.config.js 中的 rewrites 选项来实现此目的 -

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

Next.js 在带有哨兵的 Vercel 中 - 在生产中忽略源地图

Next.js in Vercel with Sentry - ignore source maps in production

javascript

next.js

sentry

source-maps

vercel