- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以我有一个 Django - React 应用程序。所有的静态文件都由 s3 提供服务
我跑了
npm run build
然后我将构建文件夹复制到我的 Django 项目文件夹中。然后我在我的 settings.py 文件中设置模板目录和静态文件目录。
当我尝试加载 django-admin 页面时。一切都很完美。静态文件由 aws s3 提供。但是当我尝试加载 react 页面时。它试图在本地寻找显然不存在的静态文件。
那么我如何告诉我的 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>
最佳答案
在 .env
中设置 PUBLIC_URL 配置文件(由 ReactJS 编译器读取)。您在那里设置的字符串将用于所有静态文件地址的前缀,因此它可能是本地开发中的静态文件地址(如 http://localhost:8000/static
)或 S3 存储桶地址(如 https://foobar.s3.amazonaws.com
)。
找到提示 here , 对 PUBLIC_URL 的 react 文档 here .
编辑:我发现并且实际有效的唯一解决方案是在 AWS 上运行时从 Nginx(而不是 S3)提供静态文件。
React.JS 应用程序是使用同一域内的绝对路径编译的:
PUBLIC_URL=/rjsstatic/foo/bar/
Django 站点处理路由 rjsstatic/foo/bar/(?<path>.+)$
到提供静态文件的 View (仅用于开发设置)。我用了这个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/;
}
关于reactjs - 如何在 django 中从 s3 加载 react 静态文件 - react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67806201/
我对 Python-Django 和 web 开发还很陌生,我被困在这个使用 POST 创建新资源的特殊问题上。 我正在为 REST API 使用 Django REST 框架,我正在尝试创建一个新资
我已经使用 Django-storages 成功地将 Word 文档存储到 S3。 class Document(TitleSlugDescriptionModel, TimeStampedModel
我有 2 个关于模型代理的问题, 如何从模型对象创建代理对象? 如何从模型查询集创建代理查询集? 例如,假设我们定义了: from django.contrib.auth.models import
我想编写一个直接执行 HTTP 请求的单元测试(而不是使用 django.test.client.Client)。 如果您好奇为什么 - 那是因为我想测试我从 Django 应用程序公开的 Thrif
我为我的个人网站启动了一个 django 项目来学习 django。到目前为止,我已经将我的开发环境设置为我需要的一切,并遵循 this很棒的教程来创建一些基本的数据结构和模板。现在我想开始使用我之前
我已经阅读了很多关于如何在使用 Django 注册时添加额外字段的信息,例如 here 、 here 和 here 。代码片段是: forms.py(来自注册应用程序) class Registrat
我正在编写小型社交应用程序。功能之一是在网站标题中写入用户名。因此,例如,如果我登录并且我的名字是Oleg(用户名),那么我应该看到: Hello, Oleg | Click to edit prof
我有一个使用 Django 和 Django Rest 框架开发的应用程序。我想将 django-reversion 功能添加到我的应用程序中。 我已经尝试过http://django-reversi
我有一个简单的 HTML 表单,我没有使用 Django 表单,但现在我想添加一个选择。 选择最容易创建为 Django ChoiceField (与通过循环等手动创建选择相反),但是,如果没有在 D
我不明白为什么人们以两种方式编写外键,这样做的目的是什么?它们是相同还是不同? 我注意到有些人这样写: author = models.ForeignKey(Author, on_delete=mod
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
这对于 Django 1.2 仍然有效吗? Custom Filter in Django Admin on Django 1.3 or below 我已经尝试过,但管理类中的 list_filter
问题在于,当 django-compressor 编译为 .js 文件的 CoffeeScript 文件中引用 {{ STATIC_URL }} 时,它无法正确加载。 在我的 django 模板中,我
我正在尝试将一些字段从一个 django 模型移动到一个新模型。假设我有一个书籍模型: class Book(models.Model): title = models.CharField(max
我想在我的 Django 应用程序中获取评论最多的十个帖子,但我做不到,因为我想不出合适的方法。 我目前正在使用 django 评论框架,并且我已经看到使用 aggregate or annotate
目前我正在寻找在 Django 中实现访问控制。我已经阅读了有关内置权限的内容,但它并不关心每个对象的基础。例如,我想要“只有创建者可以删除自己的项目”之类的权限。所以我读到了 django-guar
嗨,我正在将我的 Django 模型的一个字段的值设置为其他模型的另一个字段的值。这个值应该是动态变化的。 这是我的第一个模型 class MainModel(AbstractBaseUser, Pe
我正在尝试为我的模型创建一个编辑表单。我没有使用模型表单,因为根据模型类型,用户可以使用不同的表单。 (例如,其中一个表单有 Tinymce 小部件,而另一个没有。) 有没有什么方法可以使用模型设置表
Django 模板中的搜索字段 如何在类似于此图像的 Django 模板中创建搜索字段 http://asciicasts.com/system/photos/1204/original/E354I0
根据 Django documentation ,如果 Django 安装激活了 AuthenticationMiddleware,HttpRequest 对象有一个“user”属性代表当前登录的用户
我是一名优秀的程序员,十分优秀!