azureの読書アプリの設定で2つ目のアプリ

Question

VSTS CI/CDを使用して、別のウェブアプリのスロットに角度2のアプリを配備したい（dev、staging、prodと言う）。各スロットは異なるWeb APIを指している必要があります。通常、アプリケーション内に3つの異なる環境ファイルを指定しますが、異なる環境で3回ビルドする必要があるという欠点があります。

私が達成したいのは、2つのビルド、devとprodを持つことです。 dev getをデベロッパー・スロットにデプロイし、prod build getをステージング先にデプロイしてから、同じビルドをプロダクション・スロットにデプロイする必要があります。各スロットのアプリ設定を定義できます。それらは環境変数のように扱われます。

角度2アプリ内からこれらの設定を読み込む方法はありますか、それとも他に何か不足していますか？

Answer 1

私は、同じビルドを2〜3回に分けて配備することを避け、プロダクションサーバーのコードの縮小とバンドルを忘れてしまいます。ので、あなたのコードが本番ブランチにプッシュされたときに、例えば、npm your-build-task --prodを実行することができ、単にnpm yourbuild-taskマスターにプッシュするときや開発ブランチなど：あなたは VSTSでビルドタスクを設定されて何ができるか

。

あなたAppModule（または任意のモジュールあなたがあなたのサービスを持っている）では、次の設定ができます。

providers: [ 
... 
    { 
    provide: API_CONFIG, useFactory: apiConfigFactory 
    } 
... 
] 

... 

export function apiConfigFactory() { 
    if (environment.production) { 
    return MY_PROD_API_CONFIG; 
    } else { 
    return MY_DEV_API_CONFIG; 
    } 
} 

そしてそのように、あなたはそれぞれのconfigオブジェクトであなたのベースURLを設定することができます：1 prodを指し、devは1つを指しています。あなたは単にinjec正しいAPI API URLを取得するには、API_CONFIGを使用します。

同じビルドを維持したい場合は、上記と同様の操作を行うことができますが、apiFactoryConfig機能では、ブラウザのベースを確認するなどの方法で環境を区別するロジックが必要になります。azurewebsites.net URLまたはそのようなものです。

Answer 2

実行時にバックエンド言語のみが環境変数としてAPP設定にアクセスできます。角度2はフロント側にあるため、フロントエンドからこれらの設定を直接読み取ることはできません。この問題を回避するには、エンドポイントを公開するバックエンドを介してアプリの設定を読んでから、Angular 2アプリでAJAXコール経由でこのエンドポイントにアクセスします。

my earlier postここで、PHPサンプルコードを投稿してAPP設定を読み込むことができます。