时间戳

首页 > 解决方案 > 在页面构建时将资产从 CDN 导入 Gatsby

amazon-web-services - 在页面构建时将资产从 CDN 导入 Gatsby

问题描述

我想将资产（视频）从 CDN (AWS CloudFront) 导入 Gatsby 中的特定页面。我不知道该怎么做。

我尝试import在页面顶部添加一个引用资产链接的语句，即：http://[refId].cloudfront.net/myVideo.mp4。当我这样做并运行时gatsby develop，我得到This dependency was not found并引用了链接。

当我运行时gatsby build，我收到以下错误：

错误：./src/pages/index.js 未找到模块：错误：无法解析'C:\Users\David\Documents\wa 中的' http://[refId].cloudfront.net/myVideo.mp4 ' mp\www\greystone\src\pages' 解析'C:\Users\David\Documents\wamp\www\greystone\src\pages' 中的 ' http://[refId].cloudfront.net/myVideo.mp4 ' 已解析请求是使用描述文件的模块：C:\Users\David\Documents\wamp\www\greystone\package.json（相对路径：./src/pages）字段“浏览器”不包含有效的别名配置解析为模块 C:\Users\David\Documents\wamp\www\greystone\src\pages\node_modules 不存在或不是目录

所以 Gatsby 正试图将导入解读为一个模块，它出现了。

我在 Gatsby Docs, Importing Assets Directly Into Files中找到了这个页面，但是没有提到如何使用 CDN 来做到这一点。

导入链接本身，当放置在浏览器地址栏中时有效，但当试图以这种方式将资产导入页面时，Gatsby 无法构建/编译。

import myVideo from 'http://[refId].cloudfront.net/myVideo.mp4'

export default (props) => (
    ...
    <video src={myVideo}></video>
    ...
)

我希望 URL 被转译/编译成静态 HTML。

标签： amazon-web-servicesamazon-s3amazon-cloudfrontgatsby

解决方案

也许您可以直接在组件中使用 url：

export default (props) => (
    ...
    <video src="http://[refId].cloudfront.net/myVideo.mp4"></video>
    ...
)

如果您想存储视频并与 Gatsby 一起提供，请createRemoteFileNode查看gatsby-source-filesystem.

推荐阅读