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

标签 angularjs django configuration webserver

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

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

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

最佳答案

我用相同的堆栈做了一个项目。就我而言,整个前端位于 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"
 })

关于angularjs - 在开发中将后端和前端服务放在同一个网络服务器后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35842776/

相关文章:

jquery - Angular 无法在使用 jquery 加载函数加载的 div 上工作

javascript - 客户端框架还是服务器端框架?

django - Django + Tastypie 分析

eclipse - 如何在 Ubuntu 中为 Eclipse 中的调试配置添加 sudo?

javascript - 修改 ng-messages 指令以仅在字段为 $dirty 时显示

javascript - 将 Json 括号中的数据获取到 AngularJS 中

python - 使用 Windows 10 使用 django-extensions 生成 PNG 格式的模型图(不使用 Conda 或 Anaconda)

django - 如何在 Django 中从 html5 和 css3 创建 pdf?

c# - 如何让每个开发人员拥有自己的私有(private) web.config?

python - 使用 setuptools 创建符号链接(symbolic link)