为媒体上传和 React 构建分别管理静态文件

Question

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

当前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 前端 Build 也被视为静态文件。从 npm run build 命令手动创建构建后，它在本地工作正常。但是，当我使用两个单独的引擎将其推入生产环境时，一个 Node.js 用于 React，另一个 Python 用于 Heroku 上的 Django 应用程序，然后 Django 尝试从 GS_BUCKET 获取构建文件媒体文件和静态文件。所以 Django.

没有选择前端构建文件

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

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

If you need more clarification please comment it out then I'll add more details as well.

Answer 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
)
#...

You can check out the live running mock site with this config. on. https://naturalmedicineclinic.herokuapp.com/

为媒体上传和 React 构建分别管理静态文件

Managing static files Separately For Media Uploads and Separate for React Build

python

django

google-cloud-storage

reactjs