如何从Heroku上的Django项目中正确提供我的Angular应用程序静态文件?

AGr*_*o12 4 django heroku web-deployment django-rest-framework angular

我正在尝试在Heroku上部署使用Django 2,DRF和Angular 6构建的应用程序,并且努力获取Angular应用程序的静态文件。我在开发环境和Heroku上都使用WhitheNoise。该项目的结构如下:

my_project/ 
   |-frontend/
   |    |- dist/
   |    |- ...
   |-myproject/
   |    |-settings/
   |    |  |- __init.py
   |    |  |- base.py
   |    |  |- prod.py
   |    |  |- dev.py
   |    |- __init__.py
   |    |- urls.py
   |    |- views.py
   |    |- wsgi.py
   |-other_app1/
   |    |- ...
   |-other_app2/
   |    |- ...
   |-staticfiles/
   |    |-....
   |-manage.py
   |-Procfile
   |-requirements.txt
Run Code Online (Sandbox Code Playgroud)

我已经配置好了Heroku,每次部署我的应用程序时,都会构建我的角度应用程序,因此将在frontend / dist /中生成静态文件,然后运行collectstatic并将其复制到我的根目录下的static文件文件夹中。我的项目。我的设置是:

ANGULAR_APP_DIR = os.path.join(BASE_DIR, 'frontend/dist')

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

STATICFILES_DIRS = [
    ('frontend', os.path.join(ANGULAR_APP_DIR)),
]
Run Code Online (Sandbox Code Playgroud)

这可以正常工作,并通过名为frontend /的文件夹将我的角度应用程序的所有文件收集在staticfiles /中

我的问题是,现在我正在尝试提供位于staticfiles / frontend中的index.html文件,但无法使其正常工作:

urls.py

urlpatterns = [      
    path('', HomePageView.as_view()), #first one
    # .... Other urls
]

views.py

from django.views import static

# Serves the index page
class HomePageView(TemplateView):
  def get(self, request, **kwargs):
      return static.serve(request,'index.html', 'staticfiles')
Run Code Online (Sandbox Code Playgroud)

这会找到并提供index.html文件,但无法成功提供其余的js文件供我的应用运行(polyfills,main,style ...),因为'/ static /'不会自动附加到要求他们的网址。有人知道我如何告诉Django或Heroku在staticfiles / frontend文件夹下找到它们吗?

生成的index.html如下所示:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Angular Project</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.578ada0b0e3742b4b4bb.css"></head>
<body class="with-top-navbar">
  <app-root></app-root>
<script type="text/javascript" src="runtime.92d800a8cdfd75f49eae.js"></script>
  <script type="text/javascript" src="polyfills.7ee4ee2275a8c5d5ea6f.js"></script>
  <script type="text/javascript" src="main.4aeccc46b72bbab58fd0.js"></script></body>
</html>
Run Code Online (Sandbox Code Playgroud)

我的控制台的输出是:

[29/Jun/2018 13:31:30] "GET / HTTP/1.1" 200 638
Not Found: /styles.578ada0b0e3742b4b4bb.css
Not Found: /runtime.92d800a8cdfd75f49eae.js
[29/Jun/2018 13:31:30] "GET /styles.578ada0b0e3742b4b4bb.css HTTP/1.1" 404 2353
Not Found: /polyfills.7ee4ee2275a8c5d5ea6f.js
Not Found: /main.4aeccc46b72bbab58fd0.js
[29/Jun/2018 13:31:30] "GET /polyfills.7ee4ee2275a8c5d5ea6f.js HTTP/1.1" 404 2359
[29/Jun/2018 13:31:30] "GET /runtime.92d800a8cdfd75f49eae.js HTTP/1.1" 404 2353
[29/Jun/2018 13:31:30] "GET /main.4aeccc46b72bbab58fd0.js HTTP/1.1" 404 2344
Not Found: /styles.578ada0b0e3742b4b4bb.css
[29/Jun/2018 13:31:32] "GET /styles.578ada0b0e3742b4b4bb.css HTTP/1.1" 404 2353
Not Found: /runtime.92d800a8cdfd75f49eae.js
[29/Jun/2018 13:31:32] "GET /runtime.92d800a8cdfd75f49eae.js HTTP/1.1" 404 2353
Not Found: /polyfills.7ee4ee2275a8c5d5ea6f.js
[29/Jun/2018 13:31:32] "GET /polyfills.7ee4ee2275a8c5d5ea6f.js HTTP/1.1" 404 2359
Not Found: /main.4aeccc46b72bbab58fd0.js
[29/Jun/2018 13:31:32] "GET /main.4aeccc46b72bbab58fd0.js HTTP/1.1" 404 2344
Run Code Online (Sandbox Code Playgroud)

另外,请注意,我不想手动编辑生成的index.html,也不要将其放置在其他位置,因为这会改变我的部署工作流程。

此外,我知道django.views.statics.serve不适合生产,因此如果您知道如何以其他方式提供此文件,也欢迎提供提示。

谢谢!

AGr*_*o12 5

最后,我可以自己安装一个不错的软件包来解决它:django-spa,它建立在whitenoise之上,可以直接从statics文件的根文件夹提供SPA的索引和文件。

此处使用包的示例

另外,我还必须从收集静态填充的目录中删除“ frontend”文件夹:

STATICFILES_DIRS = [
os.path.join(ANGULAR_APP_DIR),
]
Run Code Online (Sandbox Code Playgroud)

并删除我用来在'/'上提供索引的视图:

urlpatterns = [
  # The following SPA settings are handled in Django-SPA
  # - everything not matched in Django's urlpatterns goes to /
  # - index.html served on /
  # - all /static/... files served on /...
  # other views....
  path('admin/', admin.site.urls),
]
Run Code Online (Sandbox Code Playgroud)

感谢@metakermit提供的软件包!