如何在 django 中从 s3 加载反应静态文件 - 反应答案

【问题标题】：How to load react's staticfiles from s3 in django - react如何在 django 中从 s3 加载反应静态文件 - 反应
【发布时间】：2021-08-20 16:13:53
【问题描述】：

所以我有一个 Django - React 应用程序。所有的静态文件都由 s3 提供

我跑了

npm run build

然后我将构建文件夹处理到我的 django 项目文件夹中。然后我在我的 settings.py 文件中设置模板目录和静态文件目录。

当我尝试加载 django-admin 页面时。一切正常。静态文件由 aws s3 提供。但是当我尝试加载反应页面时。它会尝试在本地查找显然不存在的静态文件。

那么我如何告诉我的 react 应用程序在 s3 中查找静态文件？这就是我的 index.html 的样子

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="jgprth."/>
    <link rel="apple-touch-icon" href="/logo192.png"/>
    <link rel="manifest" href="/manifest.json"/>
    <title>test</title></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (e) {
    function t(t) {
        for (var n, a, l = t[0], f = t[1], i = t[2], p = 0, s = []; p < l.length; p++) a = l[p], Object.prototype.hasOwnProperty.call(o, a) && o[a] && s.push(o[a][0]), o[a] = 0;
        for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]);
        for (c && c(t); s.length;) s.shift()();
        return u.push.apply(u, i || []), r()
    }

    function r() {
        for (var e, t = 0; t < u.length; t++) {
            for (var r = u[t], n = !0, l = 1; l < r.length; l++) {
                var f = r[l];
                0 !== o[f] && (n = !1)
            }
            n && (u.splice(t--, 1), e = a(a.s = r[0]))
        }
        return e
    }

    var n = {}, o = {1: 0}, u = [];

    function a(t) {
        if (n[t]) return n[t].exports;
        var r = n[t] = {i: t, l: !1, exports: {}};
        return e[t].call(r.exports, r, r.exports, a), r.l = !0, r.exports
    }

    a.m = e, a.c = n, a.d = function (e, t, r) {
        a.o(e, t) || Object.defineProperty(e, t, {enumerable: !0, get: r})
    }, a.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, a.t = function (e, t) {
        if (1 & t && (e = a(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var r = Object.create(null);
        if (a.r(r), Object.defineProperty(r, "default", {
            enumerable: !0,
            value: e
        }), 2 & t && "string" != typeof e) for (var n in e) a.d(r, n, function (t) {
            return e[t]
        }.bind(null, n));
        return r
    }, a.n = function (e) {
        var t = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return a.d(t, "a", t), t
    }, a.o = function (e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, a.p = "/";
    var l = this.webpackJsonpdatacertus = this.webpackJsonpdatacertus || [], f = l.push.bind(l);
    l.push = t, l = l.slice();
    for (var i = 0; i < l.length; i++) t(l[i]);
    var c = f;
    r()
}([])</script>
<script src="/static/js/2.f0a4d193.chunk.js"></script>
<script src="/static/js/main.c64debc0.chunk.js"></script>
</body>
</html>

【问题讨论】：

标签： reactjs django amazon-s3 django-react

【解决方案1】：

在.env 文件中设置PUBLIC_URL 配置（由ReactJS 编译器读取）。您在此处设置的字符串将用于作为所有静态文件地址的前缀，因此它可以是本地开发中的静态文件地址（如http://localhost:8000/static）或S3存储桶地址（如https://foobar.s3.amazonaws.com）。

找到提示 here，为 PUBLIC_URL here 反应文档。

编辑：我发现的唯一有效的解决方案是在 AWS 上运行时从 Nginx（而不是 S3）提供静态文件。

React.JS 应用是在同一个域中使用绝对路径编译的：

PUBLIC_URL=/rjsstatic/foo/bar/

Django 站点处理路由rjsstatic/foo/bar/(?<path>.+)$ 到一个提供静态文件的视图（仅用于开发设置）。我用过这个method：

from django.contrib.staticfiles.views import serve

REACT_JS_APP_PATH = 'my_reactjs_app'

def serve_react_app_files(request, path):
    return serve(request, os.path.join(REACT_JS_APP_PATH, path))

在本例中，文件存储在static/my_reactjs_app/。

在生产环境中，Nginx 被配置为捕获相同的路由并提供静态文件。使用了一个简单的别名配置：

location /rjsstatic/foo/bar/ { 
    alias /path/to/reactjs/static/files/;
}

【讨论】：

是的，如果我的存储桶是公开的，这将起作用。但我的存储桶是私有的，我正在使用 cloudfront cdn 提供静态文件。所以网址每次都会改变。
@ShrinidhiHegde 我用我的最新发现更新了我的答案。当我使用 S3 存储桶存储静态文件时，js 文件尝试加载更多文件但在错误的域上（新请求 URL 直接指向 S3，而不是网站的 URL）。我用实际有效的解决方案更新了答案。