为媒体上传单独管理静态文件，为 React 构建单独管理静态文件答案

【问题标题】：Managing static files Separately For Media Uploads and Separate for React Build为媒体上传单独管理静态文件，为 React 构建单独管理静态文件
【发布时间】：2021-10-28 04:30:09
【问题描述】：

我当前的静态文件配置有点问题。

当前Settings.py

#...
GOOGLE_APPLICATION_CREDENTIALS = BASE_DIR / 'Cloud_Storage_Secrets/model-calling-323507-96957393f399.json'
STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'build/static' #React Frontend Files
]

MEDIA_ROOT = BASE_DIR / 'static/images'
STATIC_ROOT = BASE_DIR / 'staticfiles'

GS_BUCKET_NAME = 'GS_BUCKET_NAME'

STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    GOOGLE_APPLICATION_CREDENTIALS
)
#...

现在的问题是，当 Django 提供这些文件时，React 前端构建也被视为静态文件。在手动从npm run build 命令创建构建后，它在本地工作正常。但是，当我使用两个单独的引擎将其推送到生产环境中时，一个 Node.js 用于 React，另一个是 Python 用于 Heroku 上的 Django 应用程序，然后 Django 尝试从 GS_BUCKET 获取构建文件，为媒体文件和静态文件配置。所以Django 不会选择前端构建文件。

所以我正在尝试进行两种配置。 Google Cloud Storage 仅适用于媒体文件，但静态文件应作为默认绕过 Google Cloud Storage。

那么如何使它成为可能。请向我建议任何使它们分开的方法。或者如何绕过 Google Cloud Storage 仅针对媒体文件的配置。谢谢！

如果您需要更多说明，请将其注释掉，然后我也会添加更多详细信息。

【问题讨论】：

标签： python reactjs django google-cloud-storage

【解决方案1】：

刚刚找到解决方案。这很容易，但是我花了很多时间才把这个想法配置成这种方式。现在我使用Whitenoise 为来自 React.js 前端构建的所有静态文件提供服务，也为 Django 提供服务。但Google Cloud Storage 仅用于媒体上传。

这是更新的 settings.py

#...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
GOOGLE_APPLICATION_CREDENTIALS = BASE_DIR / 'Cloud_Storage_Secrets/model-calling-323507-96957393f399.json'

STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATIC_ROOT = BASE_DIR / 'staticfiles'

MEDIA_URL = '/images/'
STATICFILES_DIRS = [
    BASE_DIR / 'static',
    BASE_DIR / 'build/static'
]

MEDIA_ROOT = BASE_DIR / 'images'
GS_BUCKET_NAME = 'buket-name'
DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
# STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    GOOGLE_APPLICATION_CREDENTIALS
)
#...

您可以使用此配置查看实时运行的模拟站点。在。 https://naturalmedicineclinic.herokuapp.com/

【讨论】：