如何实现Django与Angular 2项目在同一个端口正常运行？

核心逻辑：两个服务无法同时监听同一端口，常规实现方案是将Angular编译为静态资源，由Django统一托管所有请求：非API路径返回Angular入口页面，API路径走Django接口逻辑，无需额外依赖即可实现同端口运行

基础项目结构参考 #

demo_project/
├── django_backend/          # Django后端根目录
│   ├── django_backend/      # Django项目配置目录
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── api/                 # 自定义API应用（可根据需求创建）
│   ├── static/              # 静态资源目录，存放Angular打包后的js、css等资源
│   └── templates/           # 模板目录，存放Angular打包后的入口文件
└── angular_frontend/        # Angular前端项目根目录

操作步骤 #

1. Angular端打包配置 #

• 修改Angular项目的angular.json配置，调整输出路径：

  {
    "projects": {
      "your-angular-project": {
        "architect": {
          "build": {
            "options": {
              "outputPath": "../django_backend/templates",
              "assets": ["src/favicon.ico", "src/assets"],
              "styles": ["src/styles.css"]
            }
          }
        }
      }
    }
  }
  

• 执行打包命令，指定静态资源前缀为Django的静态资源路由：

  ng build --prod --base-href / --deploy-url /static/
  

  执行完成后，Angular的index.html会自动输出到Django的templates目录，所有静态资源会输出到templates目录下，你只需要把所有js、css、图片等静态资源移动到Django的static目录即可。

2. Django端配置 #

• 调整settings.py中的模板和静态资源配置：

  INSTALLED_APPS = [
      # 其他默认应用
      'django.contrib.staticfiles',
      'api' # 注册你自己的API应用
  ]
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [BASE_DIR / 'templates'], # 确认模板目录指向存放index.html的路径
          'APP_DIRS': True,
          # 其余默认配置保持不变
      }
  ]
  
  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      BASE_DIR / 'static' # 指向存放Angular静态资源的目录
  ]
  

• 调整urls.py路由配置，API路由优先，最后匹配所有非API请求返回Angular入口：

  from django.contrib import admin
  from django.urls import path, re_path
  from django.views.generic import TemplateView
  # 导入你自己的API视图
  from api.views import demo_api_view
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      # 所有API路由放在最前面
      path('api/demo/', demo_api_view),
      # 通配路由，匹配所有非API请求，返回Angular的index.html
      re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))
  ]
  

3. 运行测试 #

执行Django启动命令指定端口即可：

python manage.py runserver 8080

访问localhost:8080即可打开Angular页面，访问localhost:8080/api/demo即可调用Django接口，二者完全运行在同一端口下。

按照上述步骤搭建的项目就是完全符合需求的最小实现，没有复杂依赖，非常适合新手快速上手。

内容的提问来源于stack exchange，提问作者данил куролесов