在开发中将后端和前端服务放在同一个网络服务器后面

Question

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

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

的请求

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

Answer 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"
 })

在开发中将后端和前端服务放在同一个网络服务器后面

Putting the backend and frontend services behind the same webserver in development

django

configuration

webserver

angularjs