如何在Azure部署中指定不同的api URL并在本地运行？

Question

所以我的设置是这样的。

我有两个项目的解决方案。第一个项目是代表REST API的ASP.NET WebAPI项目。它完全没有视图，只返回API调用的JSON响应。

第二个项目是一个AngularJS客户端。我开始在Visual Studio中创建一个空的Web应用程序。所以这个项目确实有一个Web.Config和一个Azure发布配置文件，但没有C＃控制器，路由，app_start等，它们都是JavaScript和HTML。

这两个项目在Azure中作为两个独立的Web应用程序进行部署。 Project_API和Project_Web。

我的问题是在我的Angular App中，当负责与REST API通信的服务时，我如何根据Azure中是否部署了vs vs本地方式来优雅地检测或设置URL？

// Use this api URL when running locally 
var BaseURL = 'http://localhost:15774/api/games/'; 
// Use this api URL when deployed to Azure 
// var BaseURL = 'http://Project_API.azurewebsites.net/api/games/'; 

它类似于Project_API项目的内部我可以为本地vs生产数据库设置不同的连接字符串。据我了解，因为C＃代码可以从Web.Config读取数据库连接字符串，并且我可以在部署的应用程序的Azure应用程序设置中覆盖该值。我想我不知道为JavaScript客户端Web应用程序执行类似操作的正确方法。

Answer 1

实际的解决方案，我有去是创建一个ASP 5项目（典型值）即这个项目类型内置了对gulp任务运行者的支持。使用Visual Studio首先开发一个AngularJS客户端仍然感觉有点不自然，但至少这使得它更接近于通过taskrunner支持的通用前端webdev客户端开发感受。

另一个建议的解决方案我相信也可以。在我看来，如果您选择：

1. 将您的REST API和客户端前端分离为独立的独立项目，而不是从单个项目提供客户端和服务器。
2. 将您的前端客户写成Angular SPA。

然后，在Angular客户端中使用C＃和Razor是不可取的。这在传统的ASP开发中可能很常见，但在大多数Angular客户端开发中并不常见和标准。对于Angular客户使用taskrunners更像是一般的做法。然而，正如之前的解决方案指出的那样，这对于Visual Studio来说是全新的支持。

1. 拉进一口一个新的模块/依赖性：

   对我的解决方案的细节休息吞掉-NG-不断

2. 创建应用程序/ config.json：

   { “development”：{“ApiEndpoint”：“http://localhost:15774/api/games/”}， “production”：{“ApiEndpoint”：“http://myapp.azurewebsites.net/api/games/”} }

3. 设置新的gulp任务：“gulp config” 设置此任务以调用gulp-ng-constant附带的ngConstant函数。让它从配置文件加载开发设置：

   var myConfig = require（paths.webroot +'js/app/config.json'）; var envConfig = myConfig [“development”];

关注一饮而尽-NG-不变文档，以指定任何选项，并指定角模块，你想要的常量中注册的名称。
绑定这一新的任务后，生成事件的任务 - 跑步者资源管理器，所以它会在每次构建之后运行。

设置新吞任务：一口生产：配置 使它完全一样的步骤3，不同之处的myconfig [“生产”] 不要其绑定到离职后build事件，而是将其添加到project.json文件中的预发布任务：

“prepublish”：[“npm install”，“bower install”，“gulp clean”，“gulp production：config”， “gulp min”]

现在，无论您何时建立和/或发布吞噬任务，都会自动生成一个文件/ app/ng Constants.js。如果您正确设置任务，则该文件将包含Angular代码以使用正确的模块注册常量。

angular.module("game", []) 
     .constant("ApiEndpoint", "http://localhost:15774/api/games/") 

我真的不喜欢这个解决方案的唯一的事情是，有没有明显的方式在一饮而尽判断一个版本是“调试”与“释放”。阅读一些论坛，听起来像VS团队意识到这个问题，并计划在未来修复它。它需要一些方法将构建配置公开给taskrunner。在我的解决方案中，它会在每次构建时编写“开发”常量，然后在发布时将它们覆盖为“生产”值。这适用于此API端点情况，但其他常量可能有不同的要求，并且需要该版本与调试配置，否则将被迫手动运行发布任务，这可能是可接受的，具体取决于您在本地运行发布版本的频率。

Answer 2

在你的情况下，你应该有一个cshtml文件，它提供了更多关于页面的信息。如果您打算使用IIS进行部署，您将需要MVC。否则，你的选择会和节点类似。

是否从注册表值，环境变量，数据库，Web配置或任何其他信息中读取信息。

在这一天结束时，你将有一些设置一个值，你在cshtml用剃刀产生：

<script>window.ENDPOINT = '@someEndpoint'</script>

然后你可以只读取关闭窗口您的JavaScript，或者你可以在你的应用程序做一个常数，用这种方式：

app.constant('myAppGlobal', window.ENDPOINT || {});