하늘색 배포 슬롯을 기반으로 각도 구성을 변경하십시오.

Question

데이터 용 API를 참조하는 각도 응용 프로그램이 있습니다. Build and Release 파이프 라인과 Azure App Service에 대해 Visual Studio Team Services (TFS 온라인)를 사용하여 호스팅하고 있습니다.

응용 프로그램이 파이프 라인에있는 환경 (Dev -> Stage -> Prod)에 따라 응용 프로그램은 해당 데이터에 대해 다른 API를 사용해야합니다. 예를 들어 Dev 환경에있는 경우 http://someapi-dev.azurewebsites.net을 참조하고 스테이지에있는 경우 http://someapi-stage.azurewebsites.net을 참조해야합니다.

Dev 환경은 자체 Azure App Service입니다. Stage 및 Prod 환경은 동일한 Azure App Service의 배포 슬롯입니다. Stage에서 Prod로 릴리스하면 간단한 슬롯 스왑 작업입니다.

문제는 모든 환경에서 동일한 각도 구성을 수행 할 수 없다는 것입니다. 사용하려는 적절한 API를 반영하도록 설정을 변경해야합니다.

어떻게 동적으로 만들 수 있습니까? Dev에 배포 할 때 명령 줄 단계를 사용하여 구성 파일을 덮어 쓸 수 있습니다 (예 : "move/Y config.dev.json config.json"). 그러나 Stage에서 Prod로 슬롯을 바꿀 때 어떻게 비슷한 작업을 수행합니까? 여기

내가 app.component.ts에서 런타임에 적절한 API URL을로드하고있어 방법은 다음과 같습니다

ngOnInit() { 
    this.http.get('assets/environments/config.json') 
    .map(res => res.json()) 
    .toPromise() 
    .then((config) => { 
     this.apiSvc.baseUrl = config.urlToApi; 
     this.isConfigReady = true; 
}); 

Answer 1

내가이와 함께 자신을 처리 했어.

config.json을 정적 파일에서 MVC보기로 이동해보십시오. 당신은 당신의 RouteConfig.RegisterRoutes의 방법은 .js 파일에 대한 경로를 설정할 수 있습니다 :이 작업을 수행하면, 당신은 당신의 web.config 파일의 섹션에서 데이터를 읽고 설정에 삽입 할 수

routes.MapRoute(
     name: "configRoute", 
     url: "settings/config.js", 
     defaults: new { controller = "Settings", action="Index" } 
    ); 

. json. 그러면 엔드 포인트를 앱 설정으로 설정할 수 있습니다. 당신의 조회수 예를 들어

, \ 설정 \ index.cshtml 당신의 config.json 파일을 제공 것이다 :이 작업을 완료 한 후에

@using System.Configuration 

    { 
     "endpoint": @ConfigurationManager.AppSettings["configEndpoint"] 
    } 

, 그것은 당신이 뭘 하려는지 단순화합니다. 이제 Azure 웹 응용 프로그램의 응용 프로그램 설정 섹션으로 이동하여 필요한 값을 설정할 수 있습니다. 슬롯 설정은 응용 프로그램 설정을 슬롯 설정으로 표시하는 경우에도 간단합니다.

Answer 2

각도 응용 프로그램의 src 경로 안에는 이름이 환경 인 폴더가 있어야합니다. 그 안에는 모든 환경이 있습니다. 따라서 import { environment } from './environments/environment';을 가져와야합니다. 가져 오기 경로는 앱 구성에 따라 다릅니다. 그래서 당신은 현재 env를 얻을 수 있고 어떤 API를 호출 할지를 점검 할 수 있습니다. 여기 는

export const environment = { 
    production: true 
}; 

난 당신이