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中部署还是在本地运行来优雅地检测或设置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客户端开发感觉。

另一个建议的解决方案我肯定也有效。在我看来，如果你选择：

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

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

我的解决方案的其他细节：

拉入一个新模块/依赖项：gulp-ng-constant
创建app / config.json：

{ “发展”：{“ApiEndpoint”：“http://localhost:15774/api/games/”}， “生产”：{“ApiEndpoint”：“http://myapp.azurewebsites.net/api/games/”} }
设置新的gulp任务：“gulp config” 设置此任务以调用gulp-ng-constant附带的ngConstant函数。让它从配置文件中加载开发设置：

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

按照gulp-ng-constant文档指定任何选项，并指定要在其中注册常量的Angular模块的名称。
将此新任务绑定到task-runner explorer中的after-build事件，因此它将在每次构建后运行。

设置新的gulp任务：gulp production：config 使它与步骤3完全相同，除了myConfig [“production”] 不要将它绑定到构建后事件，而是将其添加到project.json文件中的预发布任务：

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

现在无论何时构建和/或发布gulp任务都会自动生成文件/app/ngConstants.js。如果正确设置任务，文件将包含Angular代码，以使用正确的模块注册常量。

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

我唯一不喜欢这个解决方案的是，如果构建是“Debug”vs“Release”，那么没有明显的方法可以告诉我们。阅读一些论坛听起来像VS团队已经意识到这个问题，并计划在将来修复它。它需要一些方法将构建配置公开给taskrunner。在我的解决方案中，它将在每个构建中编写“开发”常量，然后在发布时将它们覆盖为“生产”值。这适用于此API端点情况，但其他常量可能有不同的要求，需要发布与调试配置，或者您将被迫手动运行发布任务，这可能是可接受的，具体取决于您在本地运行发布版本的频率。

Answer 2

在您的情况下，您应该有一个cshtml文件，该文件为您提供有关该页面的更多信息。如果您打算使用IIS进行部署，则需要MVC。否则，您的选项将与节点等不同。

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

在一天结束时，您将拥有设置该值的内容，您可以使用Razor在cshtml中生成该值：

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

然后你可以在JavaScript中读取窗口，或者你可以在应用程序中保持不变并以这种方式使用它：

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

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

2 个答案: