Shopify App Proxy - 如何在请求响应中包含我的资产文件 |反应 / JS / Heroku

Question

我正在使用 React & Express 构建一个 Shopify 应用程序，通过 Heroku 部署，我正尝试使用应用程序代理将其嵌入到我的店面中。

当我最终在我的商店中加载代理 URL 时 - 我的 .css 和 .js 块文件在控制台中出现空白屏幕和一堆 404。请求已发送并经过身份验证，我的 API 的响应是 (200) - 它不会呈现任何内容。

最后，经过大量研究，我意识到 Shopify 已经将这些 CSS 和 JS 文件的路径更改为 my-store.myshopify.com/hash.chunk.js等等，而不是对我的 Heroku 服务器的引用。

看来这个问题以前在此线程中遇到过：但是，我似乎无法找到 node/react/heroku 与此处提供的 Ruby 解决方案等效的方法。

任何指导或帮助将不胜感激！

我首先通过 express 服务我的 React 应用程序：

app.use(express.static(path.join(__dirname, 'client/build')));

然后当我的代理 URL 被击中时，我发回 client/build 文件夹中的索引文件：

router.get('/proxy', (req, res) => {

    res.set('Content-Type', 'application/liquid').sendFile(path.join(__dirname, '../client/build/index.html'));

  });

Answer 1

经过反复试验，我找到了解决问题的有效方法。

package.json 中的主页很重要。我将它设置为我的 Heroku 地址，而实际上它应该设置为 herokuaddress.com/YOURPROXYROUTE（即 /app/my-app）

还需要一些额外的中间件 - 对于那些感兴趣的人，我设置了以下路由来处理来自 Shopify 应用程序代理的请求。

这是我在 server.js 中导入的任何路由上方设置的：

app.use(express.static(path.join(__dirname, 'client/build')));

这些路由是从 /shopify-routes.js 文件中导入的：

router.get('/proxy', (req, res) => {
    res.set('Content-Type', 'application/liquid').sendFile(path.join(__dirname, '../client/build/index.html'));
  });

  router.get('/proxy/static/css/:file', (req, res) => {
    res.set('Content-Type', 'text/css').sendFile(path.join(__dirname, `../client/build/static/css/${req.params.file}`));
  });

  router.get('/proxy/static/js/:file', (req, res) => {
    res.set('Content-Type', 'text/javascript').sendFile(path.join(__dirname, `../client/build/static/js/${req.params.file}`));
  });

虽然这可能有点笨拙，但它已经解决了问题，应用程序现在正在 Shopify 店面中加载。

Shopify App Proxy - 如何在请求响应中包含我的资产文件 |反应 / JS / Heroku

Shopify App Proxy - How to include my asset files in the request response | React / JS / Heroku

reactjs

heroku

shopify

asset-pipeline

assets