Angular 4クライアントアプリとJava Springアプリケーションがhttp://localhost:8080/
で動作し、Restエンドポイントを提供します。私の目標はhttp://localhost:8080/adminisitration
のようなURLからAngularアプリを呼び出すことができます。どうすればできますか?
前もって感謝します、
Ngアプリをビルドして、spring-bootフォルダーに配置する必要があります。
1. Create a public folder under resources in your spring-boot project
2. ng build --prod, type this command on you angular project which will create a dist folder under your angular project directory
3. copy files from you dist folder and place it in public folder under resources of your spring-boot project.
これは、spring-bootの下でangle-appを実行するのに役立ちます。
http:// localhost:8080/adminisitration を押すと、正常に動作するはずです
このチュートリアルを参考にしてください link
また、このチュートリアルでangular cliを使用し、リソースフォルダー(作成したもの、つまりフロントエンド)をポイントし、maven pom.xmlでリソースとして設定することもできます。 。
最初に2つの方法があります。angularアプリを静的リソースとしてスプリングブートアプリケーションから提供するため、jarにパックする必要があります。メンテナンスの観点からは見栄えがよくありません。
2番目は、nginxにangular静的リソースがあり、スプリングブートアプリにangular nginxに設定されたリバースプロキシを通して到達可能です
location /api/ { proxy_pass http://localhost:8080/api/; }
angularがGET http://localhost/api/somerest
を要求する場合、GET http://localhost:8080/api/somerest
に転送します
私はあなたの質問を理解しているので、proxy.config.json
という名前の新しいファイルを作成し、そのファイルにコードを貼り付け、.angular-cli.json
の隣にファイルを配置します
{
"/": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
バックエンドサーバーへのurlをヒットするには、http://localhost:8080/administration
を使用しないでください。代わりに、プロキシファイルで/administration
を使用するので、http://localhost:8080/
を使用してください。 app.component.ts
ファイル内のngOnInit()
内のコードの下に配置
this.http.get('/adminisitration',someRequestOption).subscribe(res =>{
console.log('happy...!');
})
バックエンドサーバーの起動:(ポート8080
のTomcat)および
フロントエンドサーバーを起動します:ng serve --proxy-config proxy.config.json
ブラウザーを開き、url http://localhost:4200
と入力すると、サーバーとクライアントにログが表示されます(存在する場合)。
注:上記のポートは、スプリングブートで提供されるデフォルトであり、angular 4