如何将集成Angular的Spring Boot/Postgres单Jar应用部署到Azure

方案1：直接部署单个Jar包（复用本地打包逻辑） #

如果你本地已经将Angular编译后的静态资源打包进Spring Boot的src/main/resources/static目录，不需要拆分前后端，直接按单Java应用部署即可，不存在连通问题：

• 首先创建Azure Database for PostgreSQL实例，配置防火墙规则允许Azure服务访问，记录JDBC连接地址、端口、数据库名、账号密码等信息
• 敏感的数据库连接参数不要硬编码在配置文件里，推荐使用Azure App Service的应用程序配置功能进行托管
• 直接将本地打包好的Jar包通过Azure CLI、Azure门户或者Maven插件部署到Java运行时环境的Azure App Service，访问App Service的默认域名即可直接访问应用，前后端运行在同一个实例中，不需要额外连通配置

方案2：前后端分离部署的连通配置 #

如果你需要将前端部署到Azure静态Web应用、后端单独部署到App Service，按以下步骤配置连通：

后端配置 #

• 后端部署完成后记录App Service的域名，格式如https://xxx-backend.azurewebsites.net
• 在Spring Boot项目中配置CORS规则，放行前端域名的跨域请求，参考配置代码：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 替换为你的前端实际部署域名
                .allowedOrigins("https://xxx-frontend.azurestaticapps.net")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

• 完成PostgreSQL数据库连接配置，单独访问后端域名验证接口可以正常返回数据

前端配置 #

• 修改Angular项目的生产环境配置文件environment.prod.ts，将API基础地址替换为实际的后端域名：

export const environment = {
  production: true,
  // 替换为你的后端接口实际访问前缀
  apiBaseUrl: 'https://xxx-backend.azurewebsites.net/api'
};

• 编译Angular项目生成静态资源包，部署到Azure静态Web应用即可，前端发起的接口请求会自动发送到后端服务

可选优化配置 #

• 如果不想暴露后端域名，可以使用Azure Front Door或者静态Web应用的API路由功能，将前端/api前缀的请求统一转发到后端服务，不需要额外配置CORS规则，所有请求走同一个域名
• 生产环境建议给前后端配置自定义域名，Azure会自动提供免费HTTPS证书

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