nginxでstatic angular2 appをホスティングし、バックエンドapiにHTTPリクエストをプロキシする

Question

別のマシン上の残りのAPIへのHTTPリクエストとプロキシHTTPリクエストを処理するにはどうすればよいですか？

私は静的なhtmlファイルを提供するnginxサーバー上にangular2 Webアプリケーションを持っています。私は別のIPアドレスを持つ別のマシンでホストされている別の残りのAPIを持っています。私は/に自分のnginxの設定ファイルに位置を設定して、angular2経路が正しく動作するようにしました。私はまた、/ api /私は任意のAPIリクエストを傍受し、私のバックエンドのAPIにそれらを代理することを望んだ場所を追加しました。

プロキシを使用しているnginx confがテスト用にhttp://swapi.coに設定されています。

events { 
    worker_connections 4096; ## Default: 1024 
} 

http { 
    server { 
    listen  80; 
    server_name localhost; 

    root /usr/share/nginx/html; 
    index index.html index.htm; 
    include /etc/nginx/mime.types; 

    location/{ 
     # If you want to enable html5Mode(true) in your angularjs app for pretty URL 
     # then all request for your angularJS app will be through index.html 
     try_files $uri /index.html; 
    } 

    # /api will server your proxied API that is running on same machine different port 
    # or another machine. So you can protect your API endpoint not get hit by public directly 
    location /api/ { 
     proxy_pass http://swapi.co; 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection 'upgrade'; 
     proxy_set_header Host $host; 
     proxy_cache_bypass $http_upgrade; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 

    #Static File Caching. All static files with the following extension will be cached for 1 day 
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ { 
     expires 1d; 
    } 
    } 
} 

マイangular2サービス

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class Service { 

    private url: string = '/api/people/'; 
    constructor (private http: Http) {} 

    getPeople() { 
    return this.http.get(this.url) 
        .map(res => res.json()); 
    } 
} 

任意の助けもいただければ幸いです。

Answer 1

私の開発環境でプロキシ要求に正しく対応しました。

upstream api { 
    server 192.168.0.15:9998; 
} 

は完全な設定

上流のAPI値へのHTTPブロックと尖ったプロキシパスに追加しました：

events { 
    worker_connections 4096; ## Default: 1024 
} 

http { 

    # Change this depending on environment 
    upstream api { 
    server 192.168.0.1:9998; 
    } 

    server { 
    listen  80; 
    server_name localhost; 

    root /usr/share/nginx/html; 
    index index.html index.htm; 
    include /etc/nginx/mime.types; 

    location/{ 
     # If you want to enable html5Mode(true) in your angularjs app for pretty URL 
     # then all request for your angularJS app will be through index.html 
     try_files $uri /index.html; 
    } 

    # /api will server your proxied API that is running on same machine different port 
    # or another machine. So you can protect your API endpoint not get hit by public directly 
    location /api { 
     proxy_pass http://api; 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection 'upgrade'; 
     proxy_set_header Host $host; 
     proxy_cache_bypass $http_upgrade; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 

    #Static File Caching. All static files with the following extension will be cached for 1 day 
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ { 
     expires 1d; 
    } 
    } 
} 

が