python - 从 django 静态文件提供服务并上传到 heroku 时无法找到反应静态文件
问题描述
我正在尝试向 Heroku 添加一个 Django 后端和一个反应前端。按照本教程。我正在使用白噪声来提供静态文件。
运行时python manage.py collectstatic
,我不断收到相同的错误:
django.core.exceptions.SuspiciousFileOperation: The joined path (C:\Users\<name>\Documents\combined_connect\static\media\background-pattern.f6347303.png) is located outside of the base path component (C:\Users\<name>\Documents\combined_connect\staticfiles)
这个命令在部署时也由 heroku python 钩子运行。python钩子在react钩子之后运行,所以react build文件夹肯定在那里。出于测试目的,我在调用命令时也在build
本地运行。collectstatic
问题与我如何定义静态根有关,但对于我的生活,我无法弄清楚。我使用了多个教程,静态文件上的 django 文档和静态文件上的 heroku 开发文档。
为什么它在静态中寻找我的媒体文件(background-pattern.png 等)?collectstatic
一切都被放入staticfiles
目录中。无论我将文件名或变量更改为什么,关于查找冲突的错误staticfiles
总是static
会发生。
这是我定义它们的方式:
设置.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'build')], # pointing to the React build folder
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = 'build/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'build/static'),
)
以下是项目的结构:
编辑:使用这个配置,我可以很好地为后端服务。如果我转到根 url /
,我会看到 Django 404 页面而不是我的 React 主页。完美/admin
运行,我可以调用/api/
端点。
解决方案
首先也许是一些澄清:-)
“媒体”目录用于例如由用户上传的内容。所以它更多的是动态内容,而不是静态的。或者至少对于您的服务的每个实例都不是静态的。因此,它通常也不随您的应用程序一起提供。django 文档中的详细信息
我假设在你的设置中你有类似MEDIA_ROOT = "build/static/media/"
或类似的东西,这会导致冲突。
如果您想使用“媒体”文件,即用户上传的文件,那么无论如何您都需要在 Heroku 上使用不同的存储空间。Heroku Dynos 有一个临时文件系统,这意味着您每天可以获得一次实例的新副本,这会导致您在实例生命周期内存储的所有数据丢失。
要解决此问题,您可以将这些媒体文件存储在例如 AWS S3 上。Django 有一个很棒的插件,它将文件系统存储替换为 AWS S3 存储。这意味着从您作为开发人员的角度来看,API 根本不会改变。
这是使用 django-s3-storage 的 Django 开发和 PROD 设置示例:
开发示例配置(没什么特别的,没有 S3):
class Development(Configuration):
... # Your code
@property
def MEDIA_ROOT(self):
default_value = os.path.join(self.BASE_DIR, 'public', 'media')
return values.Value(default=default_value, environ_name='MEDIA_ROOT')
@property
def STATIC_ROOT(self):
default_value = os.path.join(self.BASE_DIR, 'static')
return values.Value(default=default_value, environ_name='STATIC_ROOT')
@property
def STATICFILES_DIRS(self):
return (
os.path.join(self.BASE_DIR, 'whatever', 'react', 'build'),
os.path.join(self.BASE_DIR, 'yourapp', 'admin', 'static'),
)
... # Your code
对于您的本地开发,请确保媒体和静态不要指向相同的目录/结构。
生产示例配置:
# Inheriting from Development only serves as example. Good practice would be to move code used by both environments into a `Base` class.
class Production(Development):
... # Your code
DEFAULT_FILE_STORAGE = 'django_s3_storage.storage.S3Storage'
AWS_REGION = "us-east-1"
AWS_ACCESS_KEY_ID = values.Value(default='', environ_name='AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = values.Value(default='', environ_name='AWS_SECRET_ACCESS_KEY')
AWS_S3_BUCKET_NAME = values.Value(default='', environ_name='AWS_S3_BUCKET_NAME')
@property
def INSTALLED_APPS(self):
return super().INSTALLED_APPS + [
'django_s3_storage',
]
... # Your code
推荐阅读
- r - 通过 write.csv 导出数据帧返回错误
- model-view-controller - 如何将参数从视图传递到控制器?
- node.js - Webpack/babel 意外的令牌,应为“;”
- firebase - Firebase Firestore 中 merge 和 mergeFields 的区别
- ios - 自定义字体在模拟器上工作,但在某些情节提要中没有呈现
- url - 如何通过 onTap 为网格布局中的每个网格触发 url?每个网格应该打开一个不同的 url
- c++ - 使用集合在 log(N) 中排序?
- fonts - 我怎么知道字体 URL 来自哪里?
- java - 我怎样才能把它变成一个 Java 正则表达式?
- angular - 无法创建有效的角度路由保护