React+Django Azure部署咨询：前端鉴权+后端仅前端可访问

一、不建议部署在同一虚拟机 #

React前端（静态资源）和Django后端（动态服务）的托管特性差异明显，分开托管更合理：

• React用Azure静态Web应用能享受CDN缓存、自动构建部署等专属优化，成本低且效率高；
• Django用Azure Web应用可获得自动扩缩容、应用监控、环境隔离等特性，后续维护和迭代更便捷。
  若放在同一虚拟机，会完全浪费云服务的原生优势，还会增加部署复杂度和排查问题的难度。

二、实现前后端专属连接 #

通过**Azure虚拟网络（VNet）**即可实现两者的私密通信：

1. 将Django后端的Web应用部署到VNet的专用子网中，在Web应用的网络设置里禁用公共IP，仅允许VNet内部访问；
2. 配置Azure静态Web应用的VNet集成功能，让前端可以直接访问VNet内的后端服务。这样后端完全不对外暴露，只有前端能发起合法请求。

三、鉴权方案调整 #

前端鉴权 #

直接用Azure静态Web应用的内置Microsoft SSO功能即可：

• 在静态Web应用的门户设置中启用Microsoft身份提供商，配置允许访问的用户/租户范围；
• 静态Web应用会自动处理登录流程，前端可通过内置的/.auth/me端点获取用户身份信息和访问令牌。

后端鉴权（Django） #

需要修改Django逻辑验证前端传来的Azure AD令牌：

1. 前端调用Django API时，将SSO获取的访问令牌放在请求头Authorization: Bearer <token>中；
2. Django后端可安装django-oauth-toolkit，或直接调用Azure AD的令牌验证端点，校验令牌的签名、受众、过期时间等有效性；
3. 配置Django中间件，自动校验每个API请求的令牌，未通过则返回401状态码。

四、所需额外Azure资源 #

• Azure虚拟网络（VNet）：用于隔离后端服务，实现前后端的私密通信；
• Azure Active Directory（Azure AD）：提供Microsoft SSO的身份管理，负责令牌的生成与验证；
• 可选：应用服务环境（ASE）：如果需要更高的隔离级别或自定义网络配置，可使用ASE托管Django后端，但成本相对更高。

内容的提问来源于stack exchange，提问作者MatiDev