Angularアプリをどのようにデプロイしますか？

Angularアプリが本稼働フェーズに達したら、どのようにデプロイしますか？

これまでに見たすべてのガイド（angular.ioでも）は、変更を反映するために、ライトサーバーとbrowserSyncに頼っていますが、開発が終了したら、アプリをどのように公開できますか？

ページ.js上のすべてのコンパイル済みファイルをインポートしindex.htmlますか、それともgulpを使用して縮小しますか？彼らは機能しますか？SystemJSは製品版で必要ですか？

あなたは実際にはここで2つの質問に触れています。

1つ目は、アプリケーションをホストする方法ですか。。
そして@toskvが言ったように、本当に広すぎる質問には答えられず、多くの異なることに依存しています。

もう一つはありますが、アプリケーションの展開バージョンを準備するにはどうすればよいですか？。
ここにはいくつかのオプションがあります。

1. そのまま展開します。それだけ-縮小、連結、名前変換などはありません。すべてのtsプロジェクトをトランスパイルして、すべての結果のjs / css / ...ソース+依存関係をホスティングサーバーにコピーしてください。

2. webpackまたはsystemjsビルダーなどの特別なバンドルツールを使用してデプロイします。
   彼らは＃1に欠けているすべての可能性を備えています。
   すべてのアプリコードを、HTMLで参照するいくつかのjs / css / ...ファイルにパックできます。systemjsビルダーでsystemjsは、展開パッケージの一部として含める必要をなくすこともできます。

3. ng deployAngular 8以降を使用して、CLIからアプリをデプロイできます。ng deploy選択したプラットフォーム（など@angular/fire）と組み合わせて使用​​する必要があります。公式ドキュメントをチェックして、自分に最適なものをここで確認できます

はい、おそらくsystemjsあなたはあなたのパッケージの一部として他の外部ライブラリを展開して束にする必要があるでしょう。そして、はい、HTMLページから参照するいくつかのjsファイルにそれらをバンドルすることができます。

ただし、ページからコンパイル済みのjsファイルをすべて参照する必要はありませんsystemjs。モジュールローダーがそれを処理するためです。

私はそれが泥だらけに聞こえることを知っています-＃2を始めるのを助けるために、ここに2つの本当に良いサンプルアプリケーションがあります：

SystemJSビルダー：angular2シード

WebPack：angular2 webpackスターター

簡単な答え。Angular CLIを使用して、

ng build 

プロジェクトのルートディレクトリにあるコマンド。サイトはdistディレクトリに作成され、任意のWebサーバーに展開できます。

これはテスト用にビルドされます。アプリに本番用の設定がある場合は、使用する必要があります

ng build --prod

これにより、distディレクトリにプロジェクトが構築され、サーバーにプッシュできます。

私が最初にこの回答を投稿して以来、多くのことが起こりました。CLIは最終的に1.0.0です。このガイドに従って、ビルドを試行する前にプロジェクトをアップグレードしてください。 https://github.com/angular/angular-cli/wiki/stories-rc-update

Angular CLIを使用すると簡単です。Herokuの例：

1. Herokuアカウントを作成してCLIをインストールする

2. angular-clidepをdependenciesinに移動しますpackage.json（Herokuにプッシュしたときにインストールされるようにします）。

3. コードがHerokuにプッシュされたときpostinstallに実行さng buildれるスクリプトを追加します。また、次の手順で作成されるノードサーバーの起動コマンドを追加します。これにより、アプリの静的ファイルdistがサーバー上のディレクトリに配置され、後でアプリが起動します。

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. アプリを提供するExpressサーバーを作成します。

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Herokuリモートを作成し、プッシュしてアプリをデプロイします。

heroku create
git add .
git commit -m "first deploy"
git push heroku master

ここでは簡単だWRITEUPどのように処理するためにHTTPSとを使用するように要求を強制する方法など、より詳細な情報を持っている私がしたがPathLocationStrategy:)

私は永遠に使っています：

1. Angular -cli to distフォルダーでAngularアプリケーションをビルドするng build --prod --output-path ./dist

2. Angularアプリケーションパスにserver.jsファイルを作成します。

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. 永遠に始める forever start server.js

それで全部です！アプリケーションが実行されているはずです！

うまくいけば、これが役立つかもしれませんし、うまくいけば、私は今週中にこれを試すことができます。

1. AzureでWebアプリを作成する
2. vsコードでAngular 2アプリを作成します。
3. bundle.jsへのWebpack。
4. Azureサイト公開プロファイルXMLをダウンロードする
5. サイトプロファイルでhttps://www.npmjs.com/package/azure-deployを使用してAzure-deployを構成し ます。
6. デプロイ。
7. クリームを味わう。

ローカルホストで私のようなアプリをテストする場合、または空白の白いページで問題が発生する場合は、これを使用します。

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

説明：

ng build

アプリをビルドしますが、コードには多くのスペース、タブ、その他のものがあり、コードを人間が読むことができます。サーバーの場合、コードの外観は重要ではありません。これが私が使用する理由です：

ng build --prod --build-optimizer 

これにより、本番用のコードが作成され、サイズが縮小されます[ --build-optimizer]より多くのコードを削減できます]。

したがって、最後に--base-href="http://127.0.0.1/my-app/"「メインフレーム」がどこにあるかをアプリケーションに表示します（簡単な言葉で）。これを使用すると、任意のフォルダに複数の角度付きアプリを含めることができます。

Angular2アプリを本番サーバーにデプロイするには、何よりもまず、アプリがマシンのローカルで実行されるようにします。

Angular2アプリはノードアプリとしてデプロイすることもできます。

したがって、ノードエントリポイントファイルserver.js / app.jsを作成します（私の例ではexpressを使用しています）

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

急行も追加、package.jsonファイルに依存関係としてをます。

次に、それを好みの環境にデプロイします。

IISに展開するための小さなブログをまとめました。リンクをたどる

アプリケーションをIISにデプロイするには、以下の手順に従います。

ステップ1：コマンドng build --prodを使用してAngularアプリケーションをビルドする

ステップ2：ビルド後、すべてのファイルはアプリケーションパスのdistフォルダーに保存されます。

手順3：QRCodeという名前でC：\ inetpub \ wwwrootにフォルダーを作成します。

手順4：distフォルダーの内容をC：\ inetpub \ wwwroot \ QRCodeフォルダーにコピーします。

手順5：コマンド（ウィンドウ+ R）を使用してIISマネージャーを開き、inetmgrと入力して[OK]をクリックします。

ステップ6：[既定のWebサイト]を右クリックし、[ アプリケーションの追加 ]をクリックします。

ステップ7：エイリアス名「QRCode」を入力し、物理パスをC：\ inetpub \ wwwroot \ QRCodeに設定します。

ステップ8：index.htmlファイルを開き、href = "\"という行を見つけて'\'を削除します。

ステップ9：任意のブラウザーでアプリケーションを参照します。

ビデオを理解して理解することもできます。

ビデオのURL：https : //youtu.be/F8EI-8XUNZc

アプリケーションをApache（Linuxサーバー）にデプロイして、次の手順を実行できる場合： 次の手順を実行します。

ステップ1： ng build --prod --env=prod

ステップ2。（サーバーにdistをコピー）次にdistフォルダーを作成し、distフォルダーをコピーして、サーバーのルートディレクトリに展開します。

ステップ3。.htaccessルートフォルダにファイルを作成し、これを.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Ahead of Timeコンパイラーを使用してコンパイルすることにより、最小かつ最速のロードプロダクションバンドルを取得し、角度付きAOTクックブック（https://angular.io/docs/ts/latest/cookbook）に示すように、ロールアップを使用してtree-shake / minifyを実行します。 /aot-compiler.html

これは、以前の回答で述べたようにAngular-CLIでも利用できますが、CLIを使用してアプリを作成していない場合は、クックブックに従ってください。

AOTクックブックで作成されたバンドルが含まれている、マテリアルとSVGチャート（Angular2に裏打ちされた）を使用した実例もあります。また、バンドルの作成に必要なすべての構成とスクリプトも見つかります。こちらでチェックしてください：https : //github.com/fintechneo/angular2-templates/

ファイルの数とAoTコンパイル済みビルドと開発環境のサイズの違いを示す簡単なビデオを作りました。上記のgithubリポジトリのプロジェクトを示しています。あなたはここでそれを見ることができます：https：//youtu.be/ZoZDCgQwnmQ

GithubページでのAngular 2のデプロイ

ghpagesでのAngular2 Webpackのデプロイのテスト

まずdist、アプリケーションのフォルダーからすべての関連ファイルを取得します。私にとっては、次のとおりです。+アセットフォルダー内のcssファイル+ main.bundle.js + polyfills.bundle.js + vendor.bundle.js

次に、作成したリポジトリにこのファイルをプッシュします。

1-アプリケーションをルートディレクトリで実行する場合- [yourgithubusername] .github.ioという名前の特別なリポジトリを作成し、これらのファイルをマスターブランチにプッシュします

2-これらのページをサブディレクトリまたはルート以外の別のブランチに作成する場合と同様に、ブランチgh-pagesを作成し、これらのファイルをそのブランチにプッシュします。

どちらの場合も、これらのデプロイされたページにアクセスする方法は異なります。

最初のケースではhttps：// [yourgithubusername] .github.ioになり、2番目のケースでは[yourgithubusername] .github.io / [Repo name]になります。

2番目のケースを使用してデプロイする場合は、すべてのルートマッピングが指定したパスに依存し、[/ branchname]に設定する必要があるため、distのindex.htmlファイルのベースURLを必ず変更してください。

このページへのリンク

https://rahulrsingh09.github.io/Deployment

Gitレポ

https://github.com/rahulrsingh09/Deployment

Angularアプリをすばやく簡単にホストする方法として、私はFirbaseホスティングを使用しています。最初の層は無料で、Firebase CLIを使用して新しいバージョンを簡単にデプロイできます。この記事では、プロダクションAngular 2アプリをFirebaseにデプロイするために必要な手順について説明します。https：//medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

つまり、ng build --prodパッケージにdistフォルダーを作成するを実行します。これが、Firebase Hostingにデプロイされるフォルダーです。

Angular 2をAzureにデプロイするのは簡単です

1. ng build --prodを実行します。これにより、index.htmlを含むいくつかのファイル内にすべてがバンドルされたdistフォルダーが生成されます。

2. その中にリソースグループとWebアプリを作成します。

3. FTPを使用してdistフォルダーのファイルを配置します。Azureでは、アプリケーションを実行するためにindex.htmlを探します。

それでおしまい。アプリが実行中です！

2017年現在、最善の方法は、角度プロジェクトにangular-cli（v1.4.4）を使用することです。

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

--prodでデフォルトでオンになっているため、-aotを明示的に追加する必要はありません。--output-hashingの使用は、キャッシュのバーストに関する個人の好みによるものです。

以下を追加することで、CDNサポートを明示的に追加できます。

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

かなり高速なホスティングにCDNを使用する場合。

角度CLIは、次のコマンドを使用することができます。

ng build --prod

アプリケーションをデプロイするために必要なすべてを含むdistフォルダーを生成します。

Webサーバーの使用経験がない場合は、Angular to Cloudを使用することをお勧めします。distフォルダーをzipファイルとして圧縮し、プラットフォームにアップロードするだけです。

Angularより前のWeb経験を持つ多くの人々は、戦争内でWebアーティファクト（つまり、Java / Springプロジェクト内のjqueryおよびhtml）をデプロイすることに慣れていると思います。CORSの問題を回避するためにこれを行ったのは、角度プロジェクトとRESTプロジェクトを分離したままにした後です。

私の解決策は、CLIで生成されたすべてのAngular（4）コンテンツをmy-appからMyJavaApplication / angularに移動することでした。次に、Mavenビルドを変更して、maven-resources-pluginを使用してコンテンツを/ angular / distからディストリビューションのルート（つまり、$ project.build.directory} / MyJavaApplication）に移動しました。Angularはデフォルトで戦争のルートからリソースをロードします。

Angularプロジェクトにルーティングを追加し始めたとき、mavenビルドをさらに変更して、index.htmlを/ distからWEB-INF / appにコピーしました。また、すべてのサーバー側の残りの呼び出しをインデックスにリダイレクトするJavaコントローラを追加しました。

以下のリンクに従ってください。

Index.htmlページのスクリプトファイルのパスを変更します。場所を見つけることができなかったエラーが発生した場合に備えて、component.htmlのパスを変更します。

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy