在开发中将后端和前端服务放在同一个 Web 服务器后面答案

【问题标题】：Putting the backend and frontend services behind the same webserver in development在开发中将后端和前端服务放在同一个 Web 服务器后面
【发布时间】：2016-06-20 22:42:45
【问题描述】：

我们正在开发一个网络应用程序。后端用 Django 实现，前端用 AngularJS 实现。前端是使用标准前端工具开发的。

当部署到生产机器时，前端和后端都将由同一个域提供服务（我们将使用 nginx 作为网络服务器）。然而，在开发过程中，它们位于不同的域 - lite-server 提供来自 localhost:3000 的前端文件，而 Django 开发服务器处理对 localhost:8000 的请求。

如何在不安装 nginx 或其他成熟服务器的情况下将两者放在同一个域中？我们不想为我们使用的每个项目或每个项目的每个分支在我们的开发机器上安装和配置 nginx。

【问题讨论】：

标签： angularjs django configuration webserver

【解决方案1】：

我用相同的堆栈做了一个项目。在我的例子中，整个前端位于 Django 项目目录中一个名为 static 的文件夹中。此静态文件夹在您的 Django 项目的 settings.py 文件中定义为静态根目录。

所以，第一个 html 文件，比如 index.html 是通过 Django 使用其渲染引擎提供的，然后使用 Angular 的 uiRouter 和所有这些部分加载所有部分驻留在静态文件夹中，以便它们可以用作静态文件。

除了部分，所有其他静态媒体（如 CSS、JS 和图像）也驻留在静态根目录中。

index.html的快照：

{% load staticfiles %}
<html>
    <head>
        <link href="{% static 'development/assets/stylesheets/lib/normalize.css' %}" rel="stylesheet" type="text/css">
    </head>
</html>

如您所见，所有静态媒体的路径都是相对于静态根目录定义的。下面是静态根定义的样子：

settings.py：

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'

# Look here for `static` resource
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

以下是 Angular 应用程序配置中定义的 uiRouter 状态的快照：

 $stateProvider.state("home", {
    url: "",
    controller: "HomeCtrl",
    templateUrl: "/static/development/templates/home.html"
 })

【讨论】：