web-dev-qa-db-ja.com

どのように展開しますか Angular アプリ？

プロダクション段階に入ったら、どのようにAngularアプリケーションをデプロイするのですか？

私がこれまで見てきたすべてのガイド（ angular.io でも）は変更を反映するためにサービスを提供するためのlite-serverとbrowserSyncを頼りにしています。

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

typescriptangularproductionsystemjs
173
Joseph Girgis

あなたは実際にここに一つに二つの質問に触れています。 1つ目は、アプリケーションをホストする方法です。そして@toskvが答えるには本当に広すぎる質問を述べたように、そして多くの異なった事に依存しています。 2つ目はより具体的です - アプリケーションのデプロイメントバージョンをどのように準備しますか。ここにいくつかの選択肢があります。

  1. そのまま展開します。それだけで - 縮小、連結、名前の変更などはありません。すべてのtsプロジェクトをコンパイルし、作成したすべてのjs/css/...ソース+依存関係をホスティングサーバーにコピーすれば、問題ありません。
  2. 特別なバンドルツールを使用してデプロイします。 webpackやsystemjsビルダーのように。彼らは＃1に欠けているすべての可能性が付属しています。あなたはあなたのHTMLで参照しているjs/css/...ファイルのほんのいくつかにあなたのすべてのあなたのアプリコードを詰めることができます。 Systemjs buiderを使用すると、配置パッケージの一部としてsystemjsを含める必要がなくなります。

はい、あなたはおそらくあなたのパッケージの一部としてsystemjsと他のたくさんの外部ライブラリをデプロイする必要があるでしょう。そしてはい、あなたはあなたがあなたのhtmlページから参照するちょうど2、3のjsファイルにそれらをバンドルすることができるでしょう。ただし、ページからコンパイル済みのすべてのjsファイルを参照する必要はありません。モジュールローダとしてのsystemjsがそれを処理します。

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

SystemJSビルダー： angular2 seed

WebPack： Angular 2 WebPackスターター

彼らがどのようにそれをするか見てください - そしてうまくいけばこれはあなたが作るアプリをバンドルするあなたの方法を見つけるのを助けるでしょう。

84
Amid

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

ng build

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

アプリにプロダクション設定がある場合はテスト用にビルドされます。

ng build --prod

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

私が最初にこの答えを投稿してから多くのことが起こりました。 CLIはついに1.0.0になったので、このガイドに従うと、アップグレードしようとする前にプロジェクトがアップグレードされるはずです。 https://github.com/angular/angular-cli/wiki/stories-rc-update

83
Nate Bunney

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

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

  2. angular-cliをpackage.json内のdependenciesに移動します（したがって、Herokuにプッシュしたときにインストールされます。

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

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. アプリを提供する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);
  1. Herokuリモコンを作成してPushすると、アプリが無効になります。
heroku create
git add .
git commit -m "first deploy"
git Push heroku master

これは簡単な writeup です。リクエストにHTTPSを強制的に使用させる方法やPathLocationStrategy :)を処理する方法など、詳細を説明しました。

21
cienki

うまくいけば、これは役立つかもしれません、そしてうまくいけば私は今週中にこれを試してみるでしょう。

  1. AzureでWebアプリを作成する
  2. VsコードでAngular 2アプリを作成します。
  3. Bundle.jsにWebパックします。
  4. Azureサイト公開プロフィールxmlをダウンロードする
  5. サイトプロファイルで https://www.npmjs.com/package/Azure-deploy を使用してAzure展開を構成します。
  6. 展開します。
  7. クリームを味わう。
7
user6402762

forever ：と一緒に使います。

  1. angular-cli を使用してAngularアプリケーションをdistフォルダー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

それで全部です！あなたのアプリケーションは走っているはずです！

4
Yakir Tsuberi

何よりもまず、Angular 2アプリを運用サーバーにデプロイするには、アプリがマシン上でローカルに実行されるようにします。

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

したがって、ノードエントリポイントファイル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ファイルに依存関係として express も追加します。

それからあなたの好みの環境にそれを配置しなさい。

私はIISへの展開のために小さなブログをまとめました。フォロー リンク

4
Oduwole Oluwasegun

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

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

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

手順3： C：\ inetpub\wwwroot に名前を付けて QRCode にフォルダを作成します。

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

ステップ5： （ウィンドウ+ R） を使用してIIS Managerを開き、 inetmgr と入力して[OK]をクリックします。

ステップ6：デフォルトのWebサイトを右クリックし、 アプリケーションの追加 をクリックします。

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

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

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

理解を深めるためにビデオをフォローすることもできます。

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

3
Avadhesh Maurya

アプリケーションを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>
3
Sumit Jaiswal

localhost で私のようなアプリをテストすると、 空白のホワイトページで問題が発生する可能性があります iこれを使用します。

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/"を追加します。それであなたはどんなフォルダーにも複数の角度のあるアプリを持つことができます。

3
Michał Wojtanis

Ahead of Timeコンパイラーでコンパイルすることにより、最小かつ最速のロードプロダクションバンドルを取得し、ここでangular AOTクックブックに示されているように、ロールアップでツリーシェイク/ミニファイします： https：// angular .io/docs/ts/latest/cookbook/aot-compiler.html

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

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

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

2
Peter Salomonsen

GithubページでのAngular 2の展開

GhpagesでAngular 2 Webpackのデプロイをテストする

最初にあなたのアプリケーションのdistフォルダーからすべての関連ファイルを入手してください、私のためにそれはそれでした：+ cssファイル+ assets.bundle.js + polyfills.bundle.js + vendor.bundle.js

それからあなたが作成したリポジトリにこのファイルをプッシュします。

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

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

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

最初の場合は https：// [yourgithubusername] .github.io になり、2番目の場合は [yourgithubusername] .github.io/[リポジトリ名] になります。 。

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

このページへのリンク

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

2
Rahul Singh

Angular CLI を指定すると、次のコマンドを使用できます。

ng build --prod

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

Webサーバーを使った経験がない場合は、 Angular to Cloud を使用することをお勧めします。あなたはただZipファイルとしてdistフォルダを圧縮してプラットフォームにそれをアップロードする必要があります。

1
Bruno Oliveira

AzureでAngular 2を展開するのは簡単です

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

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

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

それでおしまい。あなたのアプリは走っています！

1
Malatesh Patil

簡単で安価な方法で角度付きアプリをホストするために、私は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にデプロイされるフォルダーです。

1
npesa92

2017年の時点で最善の方法はあなたのAngularプロジェクトに angular-cli （v1.4.4）を使うことです。

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

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

以下を追加することで _ cdn _ supportを明示的に追加できます。

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

あなたがホスティングにCDNを使うことを計画しているなら、それはかなり速いです。

1
Kay

私は、角度の前にWeb経験を積んだ多くの人々が彼らのWebアーティファクトを戦争の中で展開するのに慣れていると言うでしょう（すなわちjqueryとhtmlはJava/Springプロジェクトの中で）。角度付きプロジェクトとRESTプロジェクトを別々にしてみた後、CORSの問題を回避するためにこれを行いました。

私の解決策は、CLIで生成されたすべてのangular（4）コンテンツをmy-appからMyJavaApplication/angularに移動することでした。それからMavenのビルドを修正してmaven-resources-pluginを使って内容を/ angular/distから私の配布物のルートに移動しました（すなわち$ project.build.directory}/MyJavaApplication）。 Angularはデフォルトで戦争のルートからリソースをロードします。

私のAngularプロジェクトにルーティングを追加するようになったとき、私はさらに/ distからindex.htmlをWEB-INF/appにコピーするようにmavenビルドを修正しました。そして、すべてのサーバー側の休憩呼び出しをindexにリダイレクトするJavaコントローラーを追加しました。

1
Wallace Howery