在 nginx 上托管静态 angular2 应用程序并将 http 请求代理到后端 api

如何获取 Angular2 工作路由并将 http 请求代理到另一台计算机上的 REST API？

我在 nginx 服务器上有一个 angular2 Web 应用程序，它提供静态 html 文件。我有一个单独的 REST API 托管在具有不同 IP 地址的另一台计算机上。我已在 nginx 配置文件中将位置设置为 / ，以允许 angular2 路由正常工作。我还添加了一个位置 /api/，我希望它能够拦截任何 api 请求并将它们代理到我的后端 api。

我的 nginxconf 代理设置为http://swapi.co 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());
  }
}

任何帮助将非常感激。

在我的开发环境中正确代理请求。添加到 http 块并指向上游 api 值的代理传递

upstream api {
  server 192.168.0.15:9998;
}

完整配置：

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;
    }
  }
}