3

最近、私たちのチームは、レガシー製品にマイクロ フロント エンド アーキテクチャを実装することを決定しました。これは、Asp.Net aspx ページと javascript/jquery を使用して開発されました。

昨年、アプリケーションで一部のビューに angular の使用を開始しました。angular をロードするには、prod ビルド ファイルを .net プロジェクトに配置し、コンポーネントを aspx マスター ページにロードします。

保留中の残りの古いビューを、マイクロ フロント エンド アーキテクチャを使用して角度付きに移行することを計画しています。

そのため、私は同じことについて小さな poc を行い、アーキテクチャをそれに近い場所に到達させることができました。

この URL に従って実装し、ポート 4400 で実行しました。

https://medium.com/swlh/build-micro-frontends-using-angular-elements-the-beginners-guide-75ffeae61b58

そして、私の既存のAngularプロジェクトでは、customElementsを使用してこれをロードしています

this.appendCustomElementWithUrls('app-positions','http://localhost:4400/main-es5.js', (<HTMLElement>document.getElementById("chartAppContainerNamInqA")) );

appendCustomElementWithUrls(name: string,url: string,target: HTMLElement){
        if (!customElements.get(name)) {
              const script = document.createElement('script');
              script.src = url;
              document.head.appendChild(script);
          }

          const component = document.createElement(name);
          target.appendChild(component);

    }

そして、これは期待どおりに機能し、開発環境に customElements をロードできます。しかし、本番環境では、実装方法が本当にわかりません。

私の懸念：

  1. prod の一部のポートでもアプリを実行する必要がありますか? はいの場合、それを行う方法と、ユーザーがポートを変更できるように動的にすることができます。.net アプリケーションでの方法。クライアントはそのポートですでに何かを実行している可能性があるため

  2. 私が達成しようとしている方法は正しいかどうかです。

前もって感謝します。

4

1 に答える 1

4

そんなご要望をお持ちの方へ。

私は多くの調査を行い、多くの記事を読み、解決策を見つけました。

そこで、Angular 要素を使用して別のアプリケーションを作成し、cmd を使用して単一のバンドルを生成しました。

ng build --prod --output-hashing none --single-bundle true

次に、IIS でアプリケーションを作成し、prod で生成されたすべてのファイルをポート 9091 に配置しました。これには任意のポートを使用できます。

私のweb.configファイルでは、ユーザーがポート番号を変更した場合にweb.configを直接更新するようなキーを作成しました:

<add key="MicroFrontEnd" value="http://localhost:9190"/>

ポートは設定可能でなければならないので、ポート番号を取得するための API を作成しました。

次に、これをシェルアプリで使用しましたが、魅力的に機能します。

于 2020-02-28T15:01:39.087 に答える