iisにangular-cliアプリをデプロイする方法

Question

私は簡単なangle2-cliアプリを持っています（モデル駆動型の1ページ-ルーターは関係ありません）。 「ng serve」を使用すると、すべて正常に機能します。 ng build --productで製品版を作成しました。すべての./distフォルダーの内容をC：\ inetpub\wwwrootの下の新しいフォルダーにコピーしました。 IIS管理コンソールから仮想アプリを作成しました。デフォルトのアプリファイルはindex.htmlです。アプリuriを参照すると、「読み込み中...」のページのみが表示されます。 --productスイッチなしでビルドを試みます（ngビルドのみ）が、結果は同じです。 Angularアプリがロードされていません。 IISでangularアプリを公開するために必要なものは他にありますか？

Answer 1

この状況を解決する方法は次のとおりです。

• Angle-cliでプロジェクトを作成する
• ng buildを使用してアプリケーションを構築します
• IISを開き、新しい仮想ディレクトリを作成し、distフォルダーを表示します
• Index.htmlでbase hrefを/から/yourAliasNameOnIISに設定します

• このweb.configを使用して、リクエストをindex.htmlページにリダイレクトします

  <system.webServer>
  <rewrite>
    <rules>
      <rule name="AngularJS Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
        </conditions>
        <action type="Rewrite" url="/yourAliasNameOnIIS" />
      </rule>
    </rules>
  </rewrite>
  

• 仮想ディレクトリをWebアプリケーションに変換します

ng build --deploy-url "/yourAliasNameOnIIS"を使用して、dist/index.htmlのsrcパスを変更することもできます。

私はそれが役立つことを願っています！

Answer 2

ブラウザの開発ツールを開くと、アプリがjs、cssなどのファイルをダウンロードしようとしたときに404メッセージが表示されます。

Index.htmlでbase hrefを設定する必要があります

<base href="./">

これにより、ベースrefがIISのWebサイトの場所に関連するようになります。そうでない場合は、ハッシュロケーション戦略も使用する必要があります。そうでない場合、IISはng2ルーターURLの変更をインターセプトし、URLのコントローラー/アクションを見つけようとします。

app.module.tsのインポートの下：

RouterModule.forRoot(routerConfig, { useHash: true })

これらの2つの手順を完了しましたが、すべてIISでAzure VMで完全に動作しています。また、この方法で行うと、SPAをルートに配置する必要がなく、複数のSPAを（IISの異なるWebサイトで）隣り合わせに実行することができます。

Answer 3

私にとって、それは非常に簡単でした：

1. Ng buildコマンドを実行します。 distフォルダーが生成されます。
2. index.htmlファイルでhref = ""を作成します。
3. IISアプリケーションへのdistフォルダーパスを指定すると、機能します。

これにより、さらに簡単になります。index.htmlファイルを変更する必要はありません。

ng build -prod --base-href

Answer 4

私は多くの提案を参照しましたが、私のために働いたのはこれでした link

Angularアプリで別の方法で物事を構成する必要がある理由については、ここで明確に説明されています。リンクの手順に従って、公開されたファイルフォルダーの場所に以下の設定でweb.configを追加しました。

<?xml version="1.0"?>
<configuration>
<system.webServer>  
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

設定は上記のリンクでも説明されています。これが誰かを助けることを願っています。

Answer 5

私はそれが機能する以下のアプローチを試しました。

1. IISに新しいWebサイトを作成します（inetmgrを使用）
2. 「ng build --prod」を使用する-製品バージョンコードを生成する
3. Distフォルダーのファイルをコピーし、IISウェブサイトのルートフォルダーに貼り付けます（フォルダーをコピーして、問題の原因となるIISウェブサイトのルートフォルダーに配置しないでください）
4. 資格情報、認証などを最後から設定します。
5. 「MACHINE_NAME\IIS_IUSRS＆MACHINE_NAME\NETWORK SERVICE」のルートフォルダーのアクセス許可を設定します。
6. IISでデフォルトページを「index.html」として設定します
7. これでウェブサイトを閲覧できます。

Answer 6

以下のように、Web.configファイルなしで展開できます。

---

index.htmlは、その中のdistフォルダーでbase hrefタグを見つけることができます

これに応じてパスを変更します

例-wwwroot内に展開する場合

<base href="/">

例：wwwrootのフォルダー内に展開する場合

<base href="/FolderName/">

Answer 7

angular i18nを使用する場合は、言語ごとにアプリを構築し、それらを別々のフォルダーに配置する必要があります

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

ここにiisの設定があります

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>

Answer 8

Ulubeynの答えがほとんど私のために働いたのに加えて、有効にするために独自のIIS書き換えルールを追加しました：

1）/ distからエイリアスへの初期リダイレクト2）エイリアスからのJavaScriptのダウンロードおよび3）エイリアスのAngularルーティング

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
    <match url="(.*)" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
  </rule>
</rules>

Answer 9

web.configの場所app/src /コンテンツにweb.configファイルを追加します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>    
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>
</configuration>

---

.angular-cli.jsonで、web.configを次のようにアセットセクションに追加します。

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],