web-dev-qa-db-ja.com

Deploy Angular 2 TomcatにWebpackを使用するアプリ-404エラー

Angular 2フロントエンドをTomcatアプリケーションサーバーにビルドしてデプロイしたい。開始するために、私は次の紹介の手順に正確に従っている。 https：// angular .io/docs/ts/latest/guide/webpack.html 。

したがって、私は次のプロジェクト構造を持っています（すべてのファイルは、上記の紹介のとおりです）。

アンギュラー2-ウェブパック
--- config
------- helpers.js
------- karma.conf.js
------- karma-test-shim.js
------- webpack.common.js
------- webpack.dev.js
------- webpack.prod.js
------- webpack.test.js
--- dist
--- node_modules
- -公衆
------- css
-------------- styles.css
-------画像
-------------- angular.png
--- src
-------アプリ
-------------- app.component.css
-------------- app.component.html
-------------- app.component.spec.ts
-------------- app.component.ts
-------------- app.module.ts
------- index.html
------- main.ts
------- polyfills.ts
------- vendor.ts
---タイピング
--- karma.conf.js
--- package.json
--- tsconfig.json
--- typings.json
--- webpack.config.js

npm startそれぞれwebpack-dev-server --inline --progress --port 3000コンソールまたはWebstormで→期待どおりに動作する

実行するとnpm buildそれぞれrimraf dist && webpack --config config/webpack.prod.js --progress --profile --bailエラーなしでアプリをビルドし、出力バンドルファイルが物理的にdistフォルダーに配置されます。

dist
---資産
------- angular.png
--- app.css
--- app.css.map
--- app.js
--- app.js.map
--- index.html
--- polyfills.js
--- polyfills.js.map
--- vendor.js
--- vendor.js.map

次に、distフォルダーの内容をTomcat 9.0のwebappsディレクトリーにコピーしました。インストールされたアプリにアクセスしようとすると、.css-ファイルと.js-ファイルで404エラーが発生します（ 添付の画像で確認できます ）。間違ったURLからファイルを取得しようとします→「/ obv /」が欠落しています。

私は本当にここで立ち往生しており、このトピックに関してインターネットで見つけることができるすべてのものをすでに試したと感じています。

誰かが私が間違っていることを教えてもらえますか？前もって感謝します。

tomcatangularwebpackhttp-status-code-404
11
Smoose28

問題は<base href="/" />タグに関連しています。 TomcatのようなWebサーバーを使用する場合、またはfirefox index.htmlを使用してファイルシステムからアプリを直接ロードしようとする場合、これは単に間違っています。これは<base href="./" />に変更する必要があります。アプリにまだ問題がある場合は、スクリプトファイルのインポート方法を確認してください。 Tomcatで angular2-webpack を使用しようとしましたが、src属性で先頭のスラッシュを使用しないようにすべてのスクリプトタグを変更する必要もありました。

<script src="js/vendor.js" ></script>

Webpackでは、動作は属性output.publicPathによって制御されます。 angular2ドキュメント および angular2-webpack では、これは

output.publicPath="/"

リンクの絶対パスにつながります。 webpackを削除すると、相対パスが使用され、スクリプトと画像のリンクが機能します。

13
mszalbach

HashLocationStrategyを使用していない場合、Tomcatをデプロイするために更新すると404が表示されます。そのような場合、ソリューションにweb.xmlを使用し、index.htmlを指すすべてのルートを提供する必要があります。これがパスに適用できるコードスニペットで、Angularルートがこれを処理します。

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/home</url-pattern>
</servlet-mapping>

他の人が以前に提案したように、index.html（by）を設定してアプリをロードします。

5
Amit khandelwal

@alokstarの答えのわずかなバリエーションを使用する必要がありました。 「-d」または「--deploy」フラグも追加する必要がありました。これは、バージョンの変更が原因である可能性があります。

Angle-cliバージョンを実行しています：1.0.0-beta.28.3

  1. コマンドを実行しました：angle2プロジェクトフォルダーで「ng build -prod -bh/my_app -d/my_app」。
  2. Angular2プロジェクトフォルダーの「dist」フォルダーの内容をTomcat/webappフォルダーの「my_app」フォルダーにコピーします。
  3. Tomcatサーバーを起動します（実行していない場合）。

注：* ngビルドは、生産フラグを「--prod」ではなく「-prod」として文書化します。

ポート8080でTomcatを実行している場合、次を使用してアプリにアクセスできます。 http：// localhost：8080/my_app

2
Ashutosh

同様の状況がありました。フロントエンドアプリは、angular-2とwebpackを使用して準備ができていたので、Tomcatサーバーにデプロイしたかったのです。次の手順に従いました。

  1. Angular 2プロジェクトフォルダーでコマンド「ng build --prod --bh/[運用用に拡張するURL]」を実行します。

  2. これにより、angular2アプリにdistフォルダーが作成され、TomcatサーバーURLでステップ1の「your-project-name」が使用されます。

  3. 新しく作成したdistフォルダーのすべてのファイルをコピーして、Java application。のwebappsフォルダーに貼り付けます。

  4. Warファイルを作成します。

  5. その戦争をサーバーに展開します。

それが役に立てば幸い！

0
alokstar

これが、Tomcatにアプリケーションをデプロイする方法です。それはすべて、base hrefに依存していますindex.html。すべての画像は 'assets'フォルダーの下に保存する必要があります。そして、プロジェクト内の画像のパスは、このフォルダから始まる相対パスでなければなりません。

src = "assets/img/img1.jpg"

これを行うと、ファイルが見つからないという問題が解消されます。これは、アプリケーションのデプロイメントで発生します。

さて、これらの手順は残りを行います。

  • ng build --prod-base-href/myApp-このコマンドはbase-href = 'を追加します/ myApp 'to index.html
  • TomcatのwebappsフォルダーにフォルダーmyAppを作成します。
  • Distフォルダーの内容をこのmyAppフォルダーにコピーします。
  • サーバーを実行します。

アプリケーションは http：// localhost：8080/my_app でアクセス可能になります

アプリケーションのコンテキスト 'myApp'が必要ない場合は、base href = '。/'を実行するか、コマンドを使用して実稼働ビルドを作成してください。 ng build --prod

これは私の場合に役立ちました。それが役に立てば幸い。

0
Abhishek Kumar
  • 「dist」フォルダーをTomcatの「webapps」フォルダーにコピーすると、localhost：8080/distリンクが機能します。 （「publicPath： '/'」を「publicPath： '/ dist /'」に変更し、「npm run build」を実行する必要があります）
  • 私のベース：href = "/"
0
Phong Quách Văn