Question

有人可以建议我如何设置它。这是场景。

我正在开发一个带有Azure移动服务后端的角度应用程序。

在角度我有资源指向移动服务API路径。我有一个返回基本服务路径的配置工厂。我希望dev / staging插槽指向-dev api，生成槽指向生产API路径。

我可以创建两个配置工厂，但我不知道如何告诉它使用暂存插槽中的dev和生产槽中的生产工厂。对于具有服务器代码的.net应用程序，我会使用配置内容，或者可能是环境变量，但这是所有客户端代码。

我想只有两个网站，一个从dev分支部署，一个从master部署，并且有不同的配置...但是一旦我将dev合并到master，那么配置更改也会合并。

我不确定它是否重要，但我是从Visual Studio Online部署的，是构建的一部分。

我该如何做到这一点？

Answer 1

我能够解决同样的问题。我有开发，测试和生产环境，他们每个都需要连接到不同的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时，它都会生成一个包含开发常量的config.js文件。您可以配置不同的任务，例如grunt testing或grunt production，以生成测试或生产常量。

最后，将config.js添加到index.html，如下所示：

<script src="/scripts/config.js" />

在您的应用中注册配置模块：

var app = angular.module('myApp', [ 'config' ]);

在你的控制器中你可以得到你的环境＆＃34;像这样的变量：

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

希望这能帮到你！

Answer 2

如果您可以关闭生产的客户端主机名与开发服务器（或不生产服务器），那么您可以注入$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/。

Answer 3

您可能有兴趣了解David Ebbo和我如何设置此方案。在Build David's talk中，他讨论了如何配置两个网站以便彼此通信。他的演讲的源代码可以在GitHub上找到，名为ToDoApp。如果您更喜欢阅读手表，还有一篇关于David的演讲的文章，该文章在Azure文档中提供，名为Deploy a Complex Application predictably in Azure

Answer 4

您可以从Azure门户为站点和插槽设置应用程序设置，并为开发和生产插槽设置单独的设置。

有关详细信息，请参阅这些文档：https://azure.microsoft.com/en-us/documentation/articles/web-sites-staged-publishing/#configuration-for-deployment-slots

如何在Azure网站上安装测试和生产AngularJS应用程序？

4 个答案: