如何使用 Next.js 通过 CDN 提供静态生成的页面

Question

我正在尝试将 Next.js (9.5.2) 用于服务器端渲染和静态站点生成。SSR 使用 assetPrefix 对我来说很好用。我能够在 CloudFront 上托管我的所有静态资产。但是，我不确定托管静态页面的最佳方式是什么。

我面临两个问题。

1. assetPrefix不适用于 SSG 页面。所以指向 JS/CSS 的链接将是这样的<link rel="preload" href="/_next/static/css/styles.31b6de8d.chunk.css" as="style"/>
2. 假设我们主办CDN生成的HTML，我们能够满足资产assetPrefix，我怎么使用Next.js增量静态再生与fallback: true在getStaticPath。我的理解是，如果没有找到相应的HTML，将在服务器端生成页面。

感谢大家的帮助。

Answer 1

我对自己的问题有部分答案。

对于问题 1：

这个问题是我自己的错。assetPrefix与 SSR 一起工作，但不适用于 SSG，因为我没有正确传递环境变量。在我的情况下，我们有 2 个不同的 CDN URL 用于生产和暂存。所以我在next.config.js. 因为MY_ENV是从启动我的应用程序的 PM2 传入的，所以保证MY_ENV当 Next.js 需要访问时始终可用next.config.js。

// next.config.js
const isProd = process.env.MY_ENV === 'production';
const isStaging = process.env.MY_ENV === 'staging';
const isDevelopment = process.env.MY_ENV === 'development';

if (isProd) {
  assetPrefix = 'https://mycdn.cloudfront.net/';
} else if (isStaging) {
  assetPrefix = 'https://mycdn.cloudfront.net/staging';
}

但是，当我运行next build静态页面时，构建步骤不使用 PM2，因此MY_ENV不可用。为了使其工作，我需要使用不同的变量运行构建两次。

"build": "npm-run-all --parallel build:production build:staging",
"build:production": "MY_ENV=production next build",
"build:staging": "MY_ENV=staging next build",

对于问题 2：

如果我能够预先生成所有静态页面。我可以将所有内容放在 CDN 上，它们就会起作用。

就我的情况而言，ISR 更适合。我让 ISR 工作的方法是要求服务器为每个请求返回 HTML，而不是托管在 CDN 上。由于所有其他资产都托管在 CDN 上，因此性能仍然相当不错，并且该解决方案非常适合我的情况。

如果你和我一样在这个问题上遇到了一些困难，希望我的回答对你有所帮助。