Как правильно обслуживать статические файлы моего приложения Angular из проекта Django на Heroku? - PullRequest
Новая
       34

Как правильно обслуживать статические файлы моего приложения Angular из проекта Django на Heroku?

0 голосов
/ 29 июня 2018

Я пытаюсь развернуть на Heroku мое приложение, созданное с использованием Django 2, DRF и Angular 6, и пытаюсь получить статические файлы моего приложения Angular. Я использую WhitheNoise как для среды разработки, так и для Heroku. Структура проекта следующая: 

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

Я настроил Heroku таким образом, чтобы при каждом развертывании моего приложения создавалось мое угловое приложение, поэтому статические файлы генерируются в frontend / dist /, затем запускается collectstatic и копирует их в папку статических файлов в корень моего проекта. Мои настройки: 

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)),
]

Это прекрасно работает и собирает все файлы моего углового приложения внутри staticfiles / в папке с именем frontend /

Моя проблема в том, что сейчас я пытаюсь обработать файл index.html, который находится в staticfiles / frontend, и не могу заставить его работать: 

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')

Это находит и обслуживает файл index.html, но не может успешно обслуживать остальные необходимые js-файлы для запуска моего приложения (polyfills, main, styles ...), так как «/ static /» не добавляется автоматически на URL, который их запрашивает. Кто-нибудь знает, как я могу сказать 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>

И вывод моей консоли: 

[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

Также обратите внимание, что я не хочу ни редактировать вручную созданный index.html, ни размещать его где-либо еще, так как это изменит мой рабочий процесс развертывания.

Кроме того, я знаю, что django.views.statics.serve не подходит для производства, поэтому советы также приветствуются, если вы знаете, как обрабатывать этот файл другим способом

Спасибо!

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

В конце концов, я мог бы решить это сам, установив этот замечательный пакет: django-spa , который основывается на whitenoise для обслуживания индекса и файлов из SPA непосредственно из корневой папки статических файлов.

Пример использования пакета здесь

Кроме того, мне пришлось удалить папку «frontend» из каталога, где собираются статические файлы: 

STATICFILES_DIRS = [
os.path.join(ANGULAR_APP_DIR),
]

И удалите представление, которое я использовал для обслуживания моего индекса в '/': 

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),
]

Спасибо @ metakermit за пакет!

0 голосов
/ 29 июня 2018

Вы можете использовать render

from django.shortcuts import render
return render(request, 'index.html', {})

Для статических файлов вам нужно добавить /static/ как 

{% load static %}
<script type="text/javascript" src="{% static "polyfills.7ee4ee2275a8c5d5ea6f.js" %}"></script>
...