在 Ember 应用程序中提供来自 S3 的图像资产答案

【问题标题】：Serving image assets from S3 in Ember app在 Ember 应用程序中提供来自 S3 的图像资产
【发布时间】：2021-09-07 11:06:30
【问题描述】：

我有一个 Rails 服务器设置，以便其中一个视图从 S3 加载 Ember 应用程序 - 在我的 application.html.erb 中如下所示：

  ...
  <body>
    <%= yield %>
    <%= ember_assets.script_tag_for('vendor') %>
    <%= ember_assets.script_tag_for('my-ember-frontend-app') %>

这在我的ApplicationController:

class ApplicationController < ActionController::Base
  helper_method def ember_assets
    @ember_assets ||= begin
      asset_loader = EmberAssets::FileLoader.new # responsible for loading JS from S3

      EmberAssets.new(request: request, asset_loader: asset_loader)
    end
  end
  ...

Javascript 加载正常，因为我的 EmberAssets Ruby 类正确地指向并加载了来自 S3 的 JS 文件。但是，我将徽标和其他一些默认资产存储在 public/assets/images/... 中，并在我的 Ember 应用程序中读取它们，如下所示：

<img src="/assets/images/logo.png" alt="logo">

问题是，当 JS 正确加载时，图像文件没有从 S3 加载。

如何让我的 Ember 应用也从 S3 读取默认资产？我检查了 S3，资产在正确的文件夹中，如预期的那样，带有指纹和所有内容。

我正在使用 Rails 6 和 Ember 3.25，并且我已经安装了这些 ember-cli-deploy 插件来构建和部署我的 Ember 应用程序。

    "ember-cli-deploy": "^1.0.2",
    "ember-cli-deploy-build": "^2.0.0",
    "ember-cli-deploy-json-config": "^1.0.1",
    "ember-cli-deploy-s3": "^3.0.0",

这是我的构建配置。我尝试添加我的 S3 存储桶网址，但没有成功：

module.exports = function (defaults) {
  let app = new EmberApp(defaults, {
    // Add options here

    fingerprint: {
      prepend: 'https://ember-s3-prod.s3.amazonaws.com/'
    }
  });
  ...

谢谢！

【问题讨论】：

标签： javascript ruby-on-rails amazon-s3 ember.js

【解决方案1】：

我查看了编译后的 JS，并且前置工作正常。事实证明，我忽略了复制由ember deploy production 命令创建的新index.json，这意味着我的rails 服务器指向的是旧资产，而不是最近部署的资产。

要点是您可以添加选项来编译您的 Ember 应用程序 documented here，而对于我的用例，我只需要 prepend 选项。

【讨论】：