web-dev-qa-db-ja.com

Angular2をIISにデプロイする方法と対象

例えば、angular2-quickstartを取り上げます。 IISからこのWebアプリを起動するには、どのファイルを展開する必要があり、どの設定を設定する必要がありますか？

これは、JavaScriptにコンパイルすることを選択したTypeScriptチュートリアルです。

iisangular
25
user2355785

Angular 2のセットアップは、HTML5ルート（ハッシュバンなし）が機能していなかったため、非常に問題でした。

servingなしでIIS環境で動作するAngular2プロジェクトを取得するには、 Angular-CLI （まだビルドする必要があります！）：

  1. プロジェクトの開発が完了したら、プロジェクトを別の環境にビルド（またはコンパイル）する必要があります。設定する必要がある場合は、 this をお読みください。

必要な最短のビルドコマンドは次のとおりです。

ng b

  1. buildフォルダー（外部/異なるフォルダーを追加しなかった場合、これは 'distになります 'プロジェクト内のフォルダー）、コンテンツをIISサーバーにコピーします。

  2. IISサーバーのフォルダーに、IIS_IUSRSグループとIUSRユーザーがアクセスするために必要な許可があることを確認します。 （フォルダ->プロパティ->セキュリティ->編集->追加を右クリックして入力します。「名前の確認」ボタンをクリックして、入力したものが正しいことを確認します）

  3. 取り組む必要がある次の問題は、ルーティングの問題を修正するために、サーバーフォルダーに配置するweb.configファイルを取得することです。

Apacheで作業している場合、.htaccessが必要ですが、IISの場合はweb.configを使用しています。見つかったもの here は、アプリケーションがサーバーのルートディレクトリからルーティングしている場合に役立ちます。 （注：@Demortesで思い出されるように、これには URLRewrite と呼ばれる追加モジュールをIIS環境に追加する必要があります）

この（web.config）ファイルは、サーバーのrootディレクトリに入ります。

これが私と同様の問題を抱えている人の助けになることを願っています:)

乾杯。

10
jarodsmk

  1. ダウンロードしてインストールIIS rewrite plugin https://www.iis.net/downloads/Microsoft/url-rewrite

  2. デフォルトのWebサイトの下にアプリケーションを作成します。

    • C：\ inetpub\wwwrootにフォルダーを作成して、アプリケーションをホストします
    • ステップ8の後、distフォルダーの内容をc：\ inetpu\wwwroot \にコピーします

  3. Index.htmlでビルドする前に、base href = "/"をbase href = "//"に変更します

    • 新しいビルドごとに手順1、2、3をスキップするには、手順8の代わりに手順9をチェックアウトします。

  4. Web構成構造。

    <configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="Main Rule" >
                    <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="/<appname subfolder>/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
    • 注：srcフォルダーにWeb.configを作成し、assetセクションのangle-cli.jsonに参照を追加して、各ビルド中にコピーされるようにします。 -
    • そうしないと、ngビルドが使用されるたびにこのファイルを手動で作成することになります。

  5. 適用できません

  6. Angular-cli.jsonで、web.configをアセットブロックに入れます

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

  7. Angular-cli.josnにカスタムCSSパスの例を配置して、styles..bundle.csにパッケージ化されるようにします

        "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "assets/site.css",
        "assets/page.css",
        "assets/menu.css",
        "styles.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css"        
    ],

    カスタムスクリプトがある場合、スクリプトセクションの例の下にそれらのパスを入れます

        "scripts": [
            "../node_modules/jquery/dist/jquery.js",        
            "index.js" 
            ],

  8. ng build --prod

    • 注：ng build --prodは、angular-cliの最新バージョンでデフォルトでAOT（事前コンパイル）を開始します
    • 注：ng buildコマンドは、distフォルダーを削除し、buildコマンドを実行するたびにそのフォルダーを再作成します

  9. 代替ビルドコマンド：

    ng build --prod --output-path 'C:\inetpub\wwwroot\<appname subfolder>' --base-href /<appname subfolder>'/
    • a- index.htmlのbase-hrefを手動で更新したくない場合

    • b-アプリのdistフォルダーとwwwrootフォルダーをコピーしたくない場合。

    • 注1：次のコマンドは、管理者権限でビジュアルコード（またはターミナルアプリ）を開いた場合にのみ機能します。そうしないと、wwwrootに出力フォルダーを作成するmkdirコマンドが失敗します。

    • 注2：でWeb.configを更新する必要があります。手順4を参照
    • 注3：チェックアウトスラッシュ/ --base-hrefの開始と終了の両方/ '/

  10. 投稿のいずれかから直接引用を確認してください。 Webリンクの1つで説明されているように... wwwroot \のIIS_IUSRSグループおよびIUSRユーザーのセキュリティ特権を変更する必要があるかどうかはわかりません。必須ではないかもしれませんが、念のためにここで強調しています。

別の用途からの直接引用： "IISサーバーのフォルダーに、IIS_IUSRSグループおよびIUSRユーザーがアクセスするために必要なアクセス許可があることを確認します。フォルダーを右クリック->プロパティ->セキュリティ-> [編集]-> [追加]で入力します。[名前の確認]ボタンをクリックして、入力した内容が正しいことを確認します）

参考資料：- Angular2をIISに展開する方法と内容 - https://www.youtube.com/watch?v=K0XORWxG11k

6
purvin

Webapp自体は静的なファイル-Webアセット（* .js、*。htmlファイルなど）であるため、サーバーインテリジェンスは必要ありません。静的ファイルは何ですかangular2-quickstartは、outputとして生成し、そのbuildプロセスで実行します。開発環境（おそらくローカルコンピューター）。開発環境にはnode（+ npm）が必要です。実際、外部サーバーを使用せずにローカルの開発環境でこのチュートリアルをテストできます。

編集：package.jsonを見ると、lite-serverがあることがわかります：

  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },

Liteサーバーは、単純な（Web）ファイルサーバーをシミュレートする小さなサーバーです。

Webアプリを提供し、ブラウザーで開き、htmlまたはjavascriptの変更時に更新し、ソケットを使用してCSSの変更を挿入し、ルートが見つからない場合にフォールバックページを持つ軽量開発専用ノードサーバー。

答えを出すには、IISでアプリを提供するために、 http://docs.asp.net/en/latest/fundamentals/static-files.html のみが必要です。

4
Ashley Coolman

ここ は、IISでangularアプリを展開するための素敵で詳細な説明です。別のWebサイトとして公開するための要約された手順は次のとおりです。

  1. IISでWebサイトを作成します。このWebアプリケーションに指定した物理パスがC：\ Publishであるとしましょう。
  2. あなたを公開angular以下のコマンドを使用してアプリ：-

ng build --prod

  1. アプリケーションが正常にビルドされたら、distフォルダーの内容をコピーしてC：\ Publishフォルダーに貼り付けます。

  2. Web.configファイルを次の内容でフォルダーC：\ Publishに追加します-

     <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> 
 <アクションタイプ= "Rewrite" url = "/" />
 </ rule> 
 </ rules> 
 </ rewrite> 
 </ system.webServer> 
 </ configuration>

  3. すべて完了しました。IISに移動してWebサイトを参照すると、動作していることがわかります。

1
yatharth varshney

IISでは、Angular 2ルーティング（ハッシュあり）は問題なく機能します。すべてのリクエストをangularアプリのindex.htmlファイルにリダイレクトするデフォルトのURL書き換えルールを作成するだけです。ルールは、必要なjsファイルと実際のangularアプリURL（つまり、index.htmlまたはindex.html＃/ {route-value}を除くすべてのリクエストをindex.htmlにリダイレクトします。

例：

<rules>
  <rule name="Default">
    <match url="(.* ).js|index.html(.*)" negate="true" />
    <action type="Rewrite" url="/index.html" />
  </rule>
</rules>

IISでは、Angular 2ルーティング（ハッシュなし）は機能しません。 純粋なHTMLアプリケーションの場合 IISは着信要求をルーティングし、そのようなページがその場所に存在しない場合、要求をエラーページにリダイレクトします。

。Net MVCアプリケーションの場合すべての着信リクエストURLを処理し、それをangularインデックスビューにリダイレクトするデフォルトルートを作成できます。

MVCアプリケーションのEx Route：

routes.MapRoute(
    name: "Angular",
            url: "{*url}",
           defaults: new { controller = "Home", action = "Index", id =     UrlParameter.Optional },
           constraints: new { url = new AppFeatureUrlConstraint() }


public class AppFeatureUrlConstraint : IRouteConstraint
    {
        public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
        {
        if (values[parameterName] != null)
        {
            var url = values[parameterName].ToString();
            if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
                return true;
            else
                return false;
        }
        return false;
        }
    }
1
Arash

今日（2016年10月13日）の時点でAngular2が現在実行されている小さなgithubプロジェクトを作成しました。これはIIS 7.5でルーティングおよびng serveの下で実行されます。ハッシュベースのURL戦略を使用します。これは、angular-cliを使用し、IISまたはng serveでのセットアップ方法についての詳細が記載されています。

https://github.com/howserss/Angular2-IIS-sample-app

1
howserss