Question

我正在编写一个带有反应SPA前端的django rest框架API（后端）。对于生产环境，前端通过http://example.com/的nginx提供，后端代理gunicorn，并使用不同的路径从同一个域提供服务 - http://example.com/api/

这在生产中都运行良好，没有CORS问题，因为前端和后端都通过nginx在同一个域下提供。

对于本地开发，我希望能够使用./manage.py runserver复制类似的设置，并让django从project / frontend / dist（由npm build单独构建）提供前端。

有没有人有任何urlpattern魔法允许这种情况发生，并让react-router发挥得很好？我无法弄明白，它开始让我疯狂......

如果项目结构有助于解释，那么项目结构是这样的。

Project
|
 ── backend
│   ├── apps
│   ├── config
|   |    ├── settings.py
|   |    ├── settings_local.py
|   |    ├── urls.py
│   ├── manage.py
│   ├── requirements.txt
│   └── venv
├── frontend
│   ├── dist (contains the npm build webpack)
│   ├── node_modules
│   ├── package.json
│   ├── package-lock.json
│   ├── scripts
│   ├── src
│   ├── webpack.config.js

编辑＃1

感谢另一篇文章，我可以通过将其添加到我的urls.py

来获得部分内容

if settings.DEBUG:
    from django.views.generic import RedirectView
    from django.contrib.staticfiles.views import serve

    bundle_path = os.path.abspath(os.path.join(root_dir, 'frontend', 'dist'))

    settings.STATICFILES_DIRS += (bundle_path,)

    urlpatterns += [url(r'^$', serve, kwargs={'path': 'index.html'})]
    urlpatterns += [url(r'^(?!/?static/)(?!/?media/)(?P<path>.*\..*)$',
        RedirectView.as_view(url='/static/%(path)s', permanent=False))]

我在这里唯一的问题是，如果我直接进入其中一个JS路由器链接，那么django会尝试解释它并找不到路由。

我现在需要的是一个能够重定向到＆＃39; /＆＃39;还要在网址上保留任何额外的网址路径信息

Answer 1

您可以使用nginx反向代理来提供服务。不需要配置Django的网址。见这里的例子： http://www.codingpedia.org/ama/how-to-configure-nginx-in-production-to-serve-angular-app-and-reverse-proxy-nodejs

Answer 2

最后让它与所有路由一起工作。

将webpack dist文件夹添加到settings.STATICFILES_DIRS 添加了webpack前端路径到settings.TEMPLATES

为urls.py添加了3个新的urlpatterns（基于条件，settings.DEBUG）

urlpatterns += [
        url(r'^(?!/?static/)(?!/?media/)(?P<path>.*\..*)$',
        RedirectView.as_view(url='/static/%(path)s', permanent=False)),
        url(r'^$', TemplateView.as_view(template_name='dist/index.html'), name='frontend'),
        url(r'^(?P<path>.*)/$', TemplateView.as_view(template_name='dist/index.html'), name='frontend'),
]

第一个使用django的静态文件重定向要提供的包的任何asssets。

第二个模式提供根路径/作为webpack dist文件夹中的模板

最后一个部分处理所有剩余的JS路由路径以返回到初始根视图。

用于提供外部webpack包的Django URL模式

编辑＃1

2 个答案: