如何在 Azure 网站中拥有测试和生产 AngularJS 应用程序？

Question

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

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

在 angular 中，我有指向移动服务 API 路径的资源。我有一个 returns 基本服务路径的配置工厂。我希望 dev/staging 槽指向 -dev api 并且生产槽指向生产 API 路径。

我可以创建两个配置工厂，但我不确定如何告诉它在暂存槽中使用开发工厂，在生产槽中使用生产工厂。对于带有服务器代码的 .net 应用程序，我会使用配置内容，或者环境变量，但这都是客户端代码。

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

我不确定这是否重要，但我正在从 Visual Studio 在线部署作为构建的一部分。

我怎样才能做到这一点？

Answer 1

我能够解决同样的问题。我有开发、测试和生产环境，它们每个都需要连接到不同的 API 端点。我能够使用名为 grunt-ng-constant

的 g运行t 插件来完成此操作

基本上安装插件后，修改 G运行t 文件并在 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'
      }
    }
  }
},

像这样注册 G运行t 任务：

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 文件来保存你的 development 常量。您可以配置不同的任务，例如 grunt testing 或 grunt production 来生成测试或生产常量。

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

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

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

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

在您的控制器中，您可以获得这样的 "environment" 变量：

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+'/');

      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

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

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

Answer 4

您可能有兴趣了解 David Ebbo 和我如何设置此场景。在David's talk at Build he discusses how to configure two websites to communication with each other. The source code for his talk is available on GitHub called ToDoApp. If you prefer to read over watch, there was also an article written about David's talk which is available in the Azure Documentation called Deploy a Complex Application predictably in Azure

如何在 Azure 网站中拥有测试和生产 AngularJS 应用程序？

How can I have a test and production AngularJS app in an Azure Website?

azure

angularjs

azure-web-app-service