在 Heroku 上运行 Django/React 应用程序时，如何让 collectstatic 工作？

Posted 2023-02-24

【中文标题】在 Heroku 上运行 Django/React 应用程序时，如何让 collectstatic 工作？

【英文标题】：How do I get collectstatic to work when running a Django/React App on Heroku?

【发布时间】：2021-09-06 12:55:45

【问题描述】：

我有一个可以在我的开发服务器上运行的 Django/Wagtail/React 应用程序，但是当我尝试在 Heroku 上构建它时，当它运行 collectstatic 时出现 ***FileNotFoundError。我正在使用 Whitenoise 来提供静态文件，并使用相应的 Procfile 安装 Gunicorn。这是我在 Heroku 上得到的错误日志：

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/python
-----> Python app detected
-----> Using Python version specified in Pipfile.lock
-----> No change in requirements detected, installing from cache
-----> Using cached install of python-3.9.5
-----> Installing pip 20.2.4, setuptools 47.1.1 and wheel 0.36.2
-----> Installing dependencies with Pipenv 2020.11.15
       Installing dependencies from Pipfile.lock (d71a71)...
-----> Installing SQLite3
-----> $ python manage.py collectstatic --noinput
       BASE_DIR /tmp/build_73214ee4
       BASE_DIR + FRONTENTD:  /tmp/build_73214ee4/frontend/build/static
       Traceback (most recent call last):
         File "/tmp/build_73214ee4/manage.py", line 10, in <module>
           execute_from_command_line(sys.argv)
         File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/__init__.py", line 419, in execute_from_command_line
           utility.execute()
         File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/__init__.py", line 413, in execute
           self.fetch_command(subcommand).run_from_argv(self.argv)
         File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/base.py", line 354, in run_from_argv
           self.execute(*args, **cmd_options)
         File "/app/.heroku/python/lib/python3.9/site-packages/django/core/management/base.py", line 398, in execute
           output = self.handle(*args, **options)
         File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 187, in handle
           collected = self.collect()
         File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/management/commands/collectstatic.py", line 105, in collect
           for path, storage in finder.list(self.ignore_patterns):
         File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/finders.py", line 130, in list
           for path in utils.get_files(storage, ignore_patterns):
         File "/app/.heroku/python/lib/python3.9/site-packages/django/contrib/staticfiles/utils.py", line 23, in get_files
           directories, files = storage.listdir(location)
         File "/app/.heroku/python/lib/python3.9/site-packages/django/core/files/storage.py", line 323, in listdir
           for entry in os.scandir(path):
       **FileNotFoundError: [Errno 2] No such file or directory: '/tmp/build_73214ee4/frontend/build/static'
 !     Error while running '$ python manage.py collectstatic --noinput'.**
       See traceback above for details.
       You may need to update application code to resolve this error.
       Or, you can disable collectstatic for this application:
          $ heroku config:set DISABLE_COLLECTSTATIC=1
       https://devcenter.heroku.com/articles/django-assets
 !     Push rejected, failed to compile Python app.
 !     Push failed

我觉得这可能是因为我的设置文件在这里（我将它在开发和生产之间分开，但会在这里整理以提高可读性）：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'corsheaders.middleware.CorsMiddleware',                        # django-cors-headers: https://pypi.org/project/django-cors-headers/

    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'wagtail.contrib.redirects.middleware.RedirectMiddleware',
]

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

STATICFILES_DIRS = [
    os.path.join(PROJECT_DIR, 'static'),
    os.path.join(BASE_DIR, 'frontend/build/static'),
]


STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
MEDIA_URL = "https://%s/" % AWS_S3_CUSTOM_DOMAIN

"""Whitenoise Static Files"""
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'     # See: https://wagtail.io/blog/deploying-wagtail-heroku/
COMPRESS_OFFLINE = True
COMPRESS_CSS_FILTERS = [
    'compressor.filters.css_default.CssAbsoluteFilter',
    'compressor.filters.cssmin.CSSMinFilter',
]
COMPRESS_CSS_HASHING_METHOD = 'content'
django_heroku.settings(locals())

我的文件结构是这样的：

Base_Directory
|__ app1
|__ app2
|__ Frontend (React App)
   |__ build
      |__ static
      |__ (etc..)
   |__ index.html
   |__ src
   |__ (etc..)
|__ Project_Directory
|__ manage.py
|__ Procfile
|__ (etc..)

从错误中，它似乎无法识别正在构建的静态文件夹。我打印了 BASE_DIR 的输出，看起来很奇怪：“/tmp/build_73214ee4”。在开发环境中，STATICFILES_DIRS 列表可以指向 React 应用程序的位置，但是很好。

我尝试在基本目录中创建一个 static 和一个 staticfiles 文件夹（其中有一个虚拟 txt 文件，因此可以通过 git 上传），但它仍然返回相同的错误。我尝试将前端文件夹移动到 Project_Directory 文件夹中，但这也不起作用。以前有没有人遇到过这种情况，如果有，您有什么建议可以分享吗？

【参考方案1】：

运行这个：

heroku config:set DISABLE_COLLECTSTATIC=1

在您的终端中并重新启动

【讨论】：

你能解释一下这是做什么的吗？

我这样做了，它运行了，但没有加载任何静态文件。我最终不得不运行 heroku run python manage.py collectstatic 并弹出类似的错误。

【参考方案2】：

奇怪的是，解决方案就在我的盲点。当我创建我的 React 应用程序时，它包含一个 gitignore 文件，该文件阻止了前端/构建文件夹被上传到 Github。我在 Heroku 上使用来自 Github 功能的运行项目，这就是为什么它给出一个错误说找不到文件夹的原因。不用说，但这为我解决了 collectstatic 问题！