英文:
How to handle static assets with AWS Amplify and Next.js?
问题
我正在处理托管在AWS Amplify上的Next.js项目，并想知道处理静态资源（图片、字体、CSS、JS等）的最佳方式是什么。
我看到两个潜在的解决方案：
- 使用next.config.js文件中的remotePatterns来定位CDN。
- 使用AWS Amplify的内置存储解决方案处理静态资源。
对于托管在AWS Amplify上的Next.js应用程序，这些解决方案中哪种是最佳实践？
我应该注意到有关性能或成本的任何考虑因素吗？
我目前正在使用选项＃1。我在我的next.config.js文件中实现了remotePatterns功能，在单独的constants.ts文件中定义了CLOUDFRONT_URL常量，并使用该常量来引用Image组件中的静态资产。
英文:
I'm working on a Next.js project hosted on AWS Amplify, and I'm wondering what the best way is to handle static assets (images, fonts, css, js etc.) with this setup.
I've seen two potential solutions:
- Using remotePatterns in the next.config.js file to target a CDN.
- Using AWS Amplify's built-in storage solutions for static assets.
Which of these solutions is the best practice for a Next.js app on AWS Amplify?
Are there any performance or cost considerations that I should be aware of?
I'm currently using option #1. I have implemented the remotePatterns feature in my next.config.js file, defined a CLOUDFRONT_URL constant in a separate constants.ts file, and I'm using that constant to reference the static assets in the Image component.
答案1
得分: 1
这取决于您的使用情况，您对预期流量有了解吗？使用 Amplify，您可以获得免费的 12 个月，然后您需要支付构建、存储、数据传输和 SSR 请求以及 SSR 请求处理的费用。使用 CloudFront 和 S3 选项，您将支付 S3 存储、向互联网传输的数据和来源的费用。对于 CloudFront，每月向互联网传输的前 1TB 数据和除中国以外的所有边缘位置的 1 千万次 http/https 请求是免费的。如果您有良好的缓存，您将能够降低向来源的数据传输成本。
英文:
It depends on your usage, do you have any idea of what traffic you are expecting? With Amplify you can get free 12 months free and then you will have to pay the cost for the build, storage, data transfer and SSR requests and SSR request processing. With CloudFront and S3 option you will pay for S3 storage, and data transfer out to Internet and Origin. With CloudFront, the first 1TB per month of data transfer out to the internet and 10 million http/https requests from all edge locations except china are free. If you have good caching you will be able to reduce costs of data transfer to Origin.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论