使用 create-react-app 自定义静态文件路径？

Question

我一直在开发 Django-React 应用程序有一段时间了，今天终于将它推送到 Heroku。我使用了在 DjangoCon-talk 中看到的一种技术，从 Django 模板视图为我的 SPA 提供服务。我手动构建 react-app，然后定位 index.html。我还使用 AWS S3 来存储我的静态文件，这就是我卡住的地方。

当我推送到 Heroku 时，collectstatic 会将我的静态文件添加到 AWS。但是，我访问这些静态文件的唯一方法是，如果我推送应用程序，从 AWS 复制静态 url，将它们粘贴到我的 index.html 中的 stylesheet/script-tags，然后再次推送。

在运行 npm run build 时有没有办法动态创建这些？

类似于 https://my-bucket.s3.amazonaws.com/static/js/{my_js_file}.chunk.js?

如果这是不可能的，是否有其他解决方案？提示将不胜感激。

Answer 1

我通过捕获所有以“静态”开头的路径并将它们重定向到存储桶来解决这个问题。

以下在我的urls.py中用“static”重定向路径，把剩下的交给react。对于其他情况，您可以添加 api 地址等：

urlpatterns += [
    re_path('^static', redirect_static),
    re_path('.*', render_react),
]

下面是redirect_static function/view:

def redirect_static(request):
    return redirect(f"https://<bucket_address>{request.path}")

使用 create-react-app 自定义静态文件路径？

custom paths to static files with create-react-app?

django

reactjs

amazon-web-services

amazon-s3

npm-scripts