Amazon Cloudfront CDN 集成到 NUXT.js

Question

我已经将网站开发成 nuxtjs。我已经创建并配置了 AWS Cloudfront CDN 实例。

Cloudfront cdn url 工作正常，并显示我的 nuxtjs 域网站的精确副本。

我的要求：我希望 nuxtjs 项目模板从云端而不是我现有的域文件夹提供所有静态内容，例如图像、css 和 js。 谁能指导我如何做到这一点？ p>

我做的步骤：

• 构建 Nuxt.js 网站
• 已创建 AWS S3 存储桶和 cloundfront 实例。还验证了云前端 url 具有我的域的精确副本。
• 我将 CDN 域 url 的“build : publicPath”添加到我的nuxt.config.js 文件中。

我用过

build: {
   publicPath: 'https://AWS_CDN_ID.cloudfront.net' 
}

AWS_CDN_ID 是我的 cloudfront.net 实例 ID。

当我执行npm run build 时，它会生成 dist 文件夹，但我找不到任何用于静态内容的 CDN url。

谁能指导我在 nuxt 构建期间我还需要做什么才能在静态内容中使用 Amazon Cloudfront CDN url 吗？？

如何将 cloudfront 中的内容用于 NUXT.js 模板？？

谢谢

参考。 https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build

Answer 1

来自文档：

然后，在启动 nuxt build 时，将 .nuxt/dist/client 目录的内容上传到您的 CDN 即可！

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#publicpath

在配置 Cloudfront 时，您选择了数据来源，据我了解，您的意图是使用 S3。因此，在您的情况下，您应该运行 build 命令，然后将 .nuxt/dist/client 的内容复制到您的 S3 存储桶。

设置 CDN 时显示公共链接，不确定您尝试使用的 AWS_CDN_ID 是否有效。 CDN 的公共链接在这里：