有人可以建议我如何设置它。这是风景。
我正在开发一个带有 Azure 移动服务后端的 Angular 应用程序。
在角度我有指向移动服务 API 路径的资源。我有一个返回基本服务路径的配置工厂。我希望 dev/staging 插槽指向 -dev api，而生产插槽指向生产 API 路径。
我可以创建两个配置工厂，但我不确定如何告诉它在暂存槽中使用开发者，在生产槽中使用生产者。对于带有服务器代码的 .net 应用程序，我会使用配置内容，或者可能是环境变量，但这都是客户端代码。
我以为只有两个网站，一个从 dev 分支部署，一个从 master 部署，并具有不同的配置...但是一旦我将 dev 合并到 master，那么配置更改也会合并。
我不确定这是否重要，但我正在从 Visual Studio Online 作为构建的一部分进行部署。
我怎样才能做到这一点？
【问题讨论】：
标签： angularjs azure azure-web-app-service
我能够解决同样的问题。我有开发、测试和生产环境，它们都需要连接到不同的 API 端点。我可以使用一个名为 grunt-ng-constant 的 grunt 插件来实现这一点
基本上在安装插件后，修改 Gruntfile 并在 grunt.initConfig 中添加如下内容：
ngconstant: {
// Options for all targets
options: {
space: ' ',
wrap: '"use strict";\n\n {%= __ngModule %}',
name: 'config',
},
// Environment targets
development: {
options: {
dest: '<%= yeoman.app %>/scripts/config.js'
},
constants: {
ENV: {
name: 'development',
apiEndpoint: 'http://your-development.api.endpoint:3000'
}
}
},
production: {
options: {
dest: '<%= yeoman.dist %>/scripts/config.js'
},
constants: {
ENV: {
name: 'production',
apiEndpoint: 'http://api.livesite.com'
}
}
}
},
像这样注册 Grunt 任务：
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'ngconstant:development', // ADD THIS
'bower-install',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
现在每次运行 grunt serve 时，它都会生成一个包含 development 常量的 config.js 文件。您可以配置不同的任务，例如 grunt testing 或 grunt production 来生成测试或生产常量。
最后你像这样将 config.js 添加到你的 index.html 中：
<script src="/scripts/config.js" />
并在您的应用中注册配置模块：
var app = angular.module('myApp', [ 'config' ]);
在您的控制器中，您可以像这样获取“环境”变量：
angular.module('myApp')
.controller('MainCtrl', function ($scope, $http, ENV) { // ENV is injected
$scope.login = function() {
$http.post(
ENV.apiEndPoint, // Our environmental var :)
$scope.yourData
).success(function() {
console.log('Cows');
});
};
});
使用这种方法，您可以轻松地自动化整个部署管道。您可以让 CI 服务器将您的更改推送到适当的服务器并构建您的应用程序的正确版本。
这是一个非常有用的资源供您阅读，我从中提取了代码示例：http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application
希望对您有所帮助！
【讨论】：
如果您可以关闭生产服务器与开发服务器的客户端主机名（或不是生产服务器），那么您可以注入$http 拦截器来重写请求 URL。在我的app.js 中，我有类似的内容：
var DEV_SRVR = 'http://my-machine.example.com:8000';
var PRODUCTION_FRONT_END_CLIENT_SUFFIX = 'DEPLOYMENT';
app.factory('REST_Interceptor',[
function() {
var request = function(config) {
if (RegExp(PRODUCTION_FRONT_END_CLIENT_SUFFIX,'i').test(window.location.host)) {
return config;
}
var rest_request_regex = new RegExp('^.*?/rest/(.*)$');
config.url = config.url.replace(rest_request_regex, DEV_SRVR+'/$1');
return config;
}
return {
request: request
}
}])
app.config([
'$httpProvider',
function($httpProvider) {
$httpProvider.interceptors.push('REST_Interceptor');
}])
因此，来自 AngularJS 的请求如下：
$http.get('/rest/foo/')
如果客户端不是生产客户端接口，则转到http://my-machine.example.com:8000/foo/，否则转到生产主机的/rest/foo/。
【讨论】：
您可能有兴趣了解 David Ebbo 和我如何设置此场景。在 Build 的 David's talk 中，他讨论了如何配置两个网站以相互通信。他演讲的源代码可在 GitHub 上获得，名为 ToDoApp。如果您喜欢阅读而不是观看，Azure 文档中还有一篇关于 David 演讲的文章，名为 Deploy a Complex Application predictably in Azure
【讨论】：
您可以从 Azure 门户为您的站点和插槽设置应用设置，并为开发插槽和生产插槽设置单独的设置。
有关详细信息，请参阅这些文档：https://azure.microsoft.com/en-us/documentation/articles/web-sites-staged-publishing/#configuration-for-deployment-slots
【讨论】：