将 Ember 个带有插件的应用程序部署到 Github 个页面
Deploying Ember application with Addon to Github Pages
我的组织正在使用 Ember 插件来开发我们的应用程序之间的一组共享组件。我们称这个存储库为 app-components
。目前,组件应用程序的主要职责是分发 CSS、字体和图像。
我们还在构建一个动态风格指南,它将吸收我们的共享组件并以中立的方式呈现它们以供开发人员参考。我们称这个存储库为 app-styleguide
。我们的目标是部署 app-styleguide
使用 ember-deploy
将此解决方案部署到 Github 页面。 url 遵循以下模式:
https://organization.github.io/app-styleguide/
当 app-styleguide
应用程序进入 gh-pages
分支并作为网页提供时,app-components
提供的所有字体和图像都会给我们一个 404。对于这个问题,我参考了一些不同的解决方案,但我不断遇到我们尝试过的相同解决方案。
我尝试使用以下两个 ember 插件自动部署到 github 页面:
- https://github.com/poetic/ember-cli-github-pages
- https://www.npmjs.com/package/ember-cli-deploy-gh-pages
最后我们采用了普通的 ember-cli-deploy 解决方案,因为这两个插件已经很老了...
我已按照此处的说明添加 rootUrl and
locationTypeproperties to our
environment.js` 文件,但没有成功:
我们的 environment.js 文件如下所示:
if (environment === 'production') {
ENV.rootURL = '/app-styleguide';
ENV.locationType = 'hash';
}
并且我们的请求继续不将 app-styleguide
添加到请求 URL 来自插件的资产。以下是来自 Chrome DevTools Network 选项卡的失败请求示例:
Request URL:https://organization.github.io/assets/images/thumbnail-icons/person.svg
Request Method:GET
Status Code:404 Not Found
如您所见,app-styleguide
未添加到请求中。
非常感谢任何帮助!
我在 Ember Slack Community 上得到了一些帮助
(特别感谢@alexspeller)。事实证明我需要更新资产指纹识别中的一些设置。
使用包含的 broccoli-asset-rev
库,我必须修改我的 ember-cli-build.js
以包含以下内容:
var app = new EmberApp(defaults, {
fingerprint: {
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff'],
prepend: '/app-styleguide/'
}
});
我需要更新选项以说明 SVG、TTF 和 WOFF,以及适当的前置 url 段。
您可以在此处了解该功能:
https://ember-cli.com/asset-compilation#fingerprinting-and-cdn-urls
可用选项:
https://github.com/cibernox/broccoli-asset-rev?files=1#options
我的组织正在使用 Ember 插件来开发我们的应用程序之间的一组共享组件。我们称这个存储库为 app-components
。目前,组件应用程序的主要职责是分发 CSS、字体和图像。
我们还在构建一个动态风格指南,它将吸收我们的共享组件并以中立的方式呈现它们以供开发人员参考。我们称这个存储库为 app-styleguide
。我们的目标是部署 app-styleguide
使用 ember-deploy
将此解决方案部署到 Github 页面。 url 遵循以下模式:
https://organization.github.io/app-styleguide/
当 app-styleguide
应用程序进入 gh-pages
分支并作为网页提供时,app-components
提供的所有字体和图像都会给我们一个 404。对于这个问题,我参考了一些不同的解决方案,但我不断遇到我们尝试过的相同解决方案。
我尝试使用以下两个 ember 插件自动部署到 github 页面:
- https://github.com/poetic/ember-cli-github-pages
- https://www.npmjs.com/package/ember-cli-deploy-gh-pages
最后我们采用了普通的 ember-cli-deploy 解决方案,因为这两个插件已经很老了...
我已按照此处的说明添加 rootUrl and
locationTypeproperties to our
environment.js` 文件,但没有成功:
我们的 environment.js 文件如下所示:
if (environment === 'production') {
ENV.rootURL = '/app-styleguide';
ENV.locationType = 'hash';
}
并且我们的请求继续不将 app-styleguide
添加到请求 URL 来自插件的资产。以下是来自 Chrome DevTools Network 选项卡的失败请求示例:
Request URL:https://organization.github.io/assets/images/thumbnail-icons/person.svg
Request Method:GET
Status Code:404 Not Found
如您所见,app-styleguide
未添加到请求中。
非常感谢任何帮助!
我在 Ember Slack Community 上得到了一些帮助 (特别感谢@alexspeller)。事实证明我需要更新资产指纹识别中的一些设置。
使用包含的 broccoli-asset-rev
库,我必须修改我的 ember-cli-build.js
以包含以下内容:
var app = new EmberApp(defaults, {
fingerprint: {
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff'],
prepend: '/app-styleguide/'
}
});
我需要更新选项以说明 SVG、TTF 和 WOFF,以及适当的前置 url 段。
您可以在此处了解该功能: https://ember-cli.com/asset-compilation#fingerprinting-and-cdn-urls
可用选项: https://github.com/cibernox/broccoli-asset-rev?files=1#options