Публикуем (deploy) Ember фронтэнд в Django бакэнде

Разработка это, конечно, интересно, но приходит время деплоя (публикации фронтэнда). Перед публикацией на хостинге надо проверить работу на локальном компьютере.
Как и куда поместить данные из фронтэнда в бакэнд я сейчас расскажу.
Если непонятна структура связки Django - Ember, то смотрите статью про Создание среды для разработки веб приложения под Django framework и Ember js

Итак, делаем тестовый деплой:

1. На Django бакэнде

Приложение frontend можно и не создавать, но с ним элегантней смотрится (понятно, что и откуда берется).

- Создаем приложение - frontend:
$ python manage.py startapp frontend

-  В back/back/settings.py в INSTALLED_APPS добавляю приложение 'frontend' и сразу добавляю путь к статике фронэнда:

INSTALLED_APPS = [
    ...
    #local apps
    'frontend.apps.FrontendConfig',
]
 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/templates"),
]


- создаем back/frontend/urls.py

# back/frontend/urls.py

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^(?P<path>.*)/$', index),
]

- в back/back/urls.py добавляем ссылку на  'frontend.urls' 

# back/back/urls.py

from django.conf.urls import url, include
...
 
urlpatterns = [
    url(r'^', include('frontend.urls')),
    ...
]

- в back/frontend/views.py создаем функцию index  которая будем выводить index.html на главную страницу нашего Django бакэнда:

# back/frontend/views.py

from django.shortcuts import render


def index(request, path=''):
    response = render(request, 'index.html')
    return response

- создаем папку templates в back/frontend/

- в back/frontend/templates/ создаем для проверки  index.html
- в back/frontend/templates/index.html добавляем строку

<h1>Главная страница Django бакэнда</h1>

- Запускаем django бакэнд
$ python manage.py runserver

и смотрим http://localhost:8000/ должна быть надпись: Главная страница Django бакэнда


2. На Ember фронтэнде

переходим в папку ember фронэнда - у меня называется front

- добавляю в файл front/ember-cli-build.js префикс 'static/'

//front/ember-cli-build.js
 
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    fingerprint: {
      prepend: 'static/'
    }
  });
  return app.toTree();
};

Смысл в том, что в Django файлы статики ищутся в 'static' ,а в Ember создается для статики папка assets, я пошел по простому пути и добавил префикс 'static/'

- теперь выполняем команду:

$ ember build -prod

все благополучно "собралось" в папку front/dist

- содержимоем папки front/dist копирую в back/frontend/templates/

и запустив в консоли Django бакэнд -
$ python manage.py runserver
смотрю в браузере http://localhost:8000/.

Таким образом, "собрав" исходники на фронэнде и опубликовав их на бакэнде можно посмотреть, предварительно, как это все работает на одном сервере, т.е. теперь не нужно запускать фронэнд.

Например, можно отключить CORS на бакэнде
CORS_ORIGIN_ALLOW_ALL = False
и посмотреть на результат.


Есть еще и второй вариант Ember Django deploy v2