web-dev-qa-db-ja.com

angularアプリケーションをApache Tomcatにデプロイする404ディープリンクの問題

angularディープリンクを含むアプリケーションを提供するようにApache Tomcatサーバーを設定する方法を理解しようとしています。たとえば、次のようにします。

静的サーバーは、mysite.com /へのリクエストを受け取ると、定期的にindex.htmlを返します。しかし、mysite.com/heroes/42を拒否し、代わりにindex.htmlを返すように構成されていない限り、404-Not Foundエラーを返します。

angular localhost/angularのアプリを提供したいので、以下を試しました：

1）ビルドangularアプリケーションを使用して：

ng build --prod --base-href .

2）ビルドフォルダー（デフォルト：dist）の内容を$ ApacheLocation/webapps/angularにコピーします

3）$ ApacheLocation/conf/Catalina/localhost/rewrite.configにRewriteRulesを追加します

# 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 ^\/angular\/.*$ /angular/index.html

4）ホストタグのすぐ下にバルブを追加する

 <Host name="localhost"  appBase="webapps" unpackWARs="true" autoDeploy="true"> 
   <Valve className="org.Apache.catalina.valves.rewrite.RewriteValve"/>

5）Tomcatサーバーを起動してlocalhost/angularに移動すると、次のようになります。

ncaught SyntaxError：Unexpected token < for all .js bundles（e.g main.bundle.js）

リライトルールを含めない場合、Tomcatはlocalhost/angularを期待どおりに提供しますただし、ディープリンクで404を提供します

私のセットアップ構成：

  • Tomcatバージョン9.0.0.M26
  • 角度バージョン4.4.2
  • @ angular/cli：1.4.2
  • ノード：8.5.0
  • npm：5.4.2
  • os：linux x64
apacheangulartomcatdeploymentangular-cli
11
Ante Vuletic Antic

私はこの問題を解決することができました http：// localhost：8080/angular/player/detail/4 以下の手順で：

1）ビルドangularアプリケーション：ng build --prod -bh ./ -d/angular

2）ビルドされたアプリのコンテンツを$ ApacheLocation/webapps/angularにコピーします

3）書き換えルール：

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/angular/(.*) /angular?path=$1

4）app.component.tsでナビゲーションをセットアップします。

constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

ngOnInit() {
const path = this.activatedRoute.snapshot.queryParams['path'];
const navigateTo = '/' + path;

if (path) {
  this.router.navigate([navigateTo]);
}

}

ここでテストプロジェクトを見つけることができます： https://github.com/avuletica/test

書き換えルールの説明：

# %{REQUEST_PATH} corresponds to the full path that is used for mapping.
# ! NOT character 
# '-f' (is regular file) Treats the TestString as a pathname and tests whether or not it exists, and is a regular file.
# ^ matches the beginning of the string or line
# . matches any charceter except line breaks
# * match 0 or more of the preceding token

したがって、基本的に/ angular/anythingにファイルがない場合、Tomcatはクエリパスとしてangularアプリケーションにフルパスを送信し、そのクエリからparam angularがルーティングを処理します。

7
Ante Vuletic Antic

Apache Tomcatサーバー（8、9）にangularアプリケーション（PathLocationStrategyルーティングを使用）をデプロイする場合のディープリンクの問題を修正するため-

  1. Server.xmlでRewriteValveを構成する
  2. Rewrite.configに書き換えルールを記述します

server.xml-

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.Apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

rewrite.config 注-/ hello /はangular Tomcat上のアプリ）のコンテキストパスです）

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/hello/(.*) /hello/index.html

この問題を記事に記載しました----（ディープリンクの問題の修正–デプロイangular Tomcatサーバー上のアプリケーション

注-これを達成するために必要なクライアント側の設定はありません（CLIからのデフォルトの構成を除いて）。すべてのクライアント側ルーティングは、Angular Routingモジュールによって処理されます。

1
Nithin Kumar Biliya