Angular cli：プロダクション用に準備する

Question

初めてAngular 2アプリケーションを作成しましたが、これをテストサーバーに配置したいと考えています。

私は最近角度-CLIプロジェクトに変換し、コマンドを使用して構築された：

ng build --prod 

私が理解から、私はその後、上にフォルダ「/ DIST」の内容を貼り付けることができるはずですテストサーバーと「/ DIST」フォルダは、なぜ私は、スタンドアロンのアプリケーション（つまりとして私のPC上でそれを実行することができません、私はの内容をコピーすることはできません、スタンドアロンで実行することができた場合は、しかし

ng serve 

でそれを実行しますdistフォルダをPC上の別の場所に移動して実行してください）

これは実際に私がテスト/プロダクションサーバーに置く最初のアプリケーションなので、私が求めていることがばかげているなら、私に負担してください。 （アプリをコピーし、（私が思う少し過剰である）ng serve --prodを実行したり、他のサーバーに./distをコピーして、一部のサーバーソフトウェアを使用することができ、すなわちnginxのは、Apache、表現 - ：

Answer 1

あなたはいけない、と私は、ビルドを公開するng serveを使用しないことができると思います。ここでは、Apacheサーバのための.htaccessの例です。 ng buildで作成されたファイルは、Webサーバーにアップロードしてそこから配信することができます。 ng build -e=prod --prod --no-sourcemap --aot

なしsourcemapsにangular-cliデフォルトの最新バージョンは、それがここでは注目に値しますが

1. ラン。 -e=prodは、environmentsフォルダ内に定義されている運用環境を使用していることを確認します。最後は--aotです。あなたのプロジェクトの中で特別なことが起こっていなければ、事前にコンパイラを使ってコンパイルすることができます。ただし、問題が発生した場合はng serve --aotを使用して問題を解決するか、--aotを完全に削除してください。
   2. その後、distフォルダの内容をWebサーバーにコピーすることができます。ただし、サーバー上の既存のファイルリクエストがすべてindex.htmlにリダイレクトされ、アプリケーションを指すURLがルートにあることを確認する必要があります。

   これは、インスタンスnginxためにindex.htmlリダイレクトするための手段は、サーバーの構成ブロック内にこれを置くことができます。

   location/{ 
       try_files $uri $uri/ /index.html; 
   } 
   

   www.example.comはdistのフォルダ内に作成index.htmlを提供しています場合、これはあります。何らかの理由でwww.example.com/subfolderのようなサブフォルダからアプリケーションを提供したい場合は、生成されたindex.html内の<base>タグをこのサブフォルダを指すように変更する必要があります。

   ローカルに本番ビルドをテストしたい場合は、1つのオプションlite-serverをインストールすることです。

   npm install -g lite-server 
   

   その後path/to/project/root/distにあなたのコンソールに移動し、lite-serverを実行します。

   gzip on; 
   gzip_static on; 
   

   ：これはあなたのnginxのgzipの設定内にこれを置くことができ、Webサーバを作成し、ブラウザを開き、あなたがnginxを使用してクールになりたいと静的に生成された.gzファイルを提供する場合は、生成index.html

   を提供します

Answer 2

2つのオプションがありますそれのトンがある、あなたはあなたが慣れているものを選択することができます）。あなたが必要とするのは、角度アプリがSPAであるため、ファイルリクエストではなく、index.htmlにリクエストするだけです。

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 

# If the requested resource doesn't exist, use index.html 
RewriteRule^/index.html 

Answer 3

nb build --proddistフォルダにすべての必要なファイルを置いてください。

あなたは構築されたプロジェクトを実行するng serveは必要ありません。

あなたは、任意のサーバ（ローカルホストのも、いくつかの種類）

ng serveが唯一のライブリロードと発展のためにあるにdistコンテンツを配置する必要があります。