在 nginx 上托管静态 angular2 应用程序并将 http 请求代理到后端 api [英] Hosting static angular2 app on nginx and proxying http requests to backend api
问题描述
如何让 angular2 路由工作并将 http 请求代理到另一台机器上的 rest api?
我在 nginx 服务器上有一个 angular2 Web 应用程序,它提供静态 html 文件.我在具有不同 IP 地址的不同机器上托管了一个单独的 rest api.我已在我的 nginx 配置文件中将位置设置为/以允许 angular2 路由正常工作.我还添加了一个位置/api/,我希望它可以拦截任何 api 请求并将它们代理到我的后端 api.
I have an angular2 web application on an nginx server which serves the static html files. I have a separate rest api hosted on a different machine with a different IP address. I have set the location to / in my nginx config file to allow the angular2 routes to work correctly. I have also added a location /api/ which i hoped would intercept any api requests and proxy them to my backend api.
我的 nginx conf 与代理设置为 http://swapi.co 以进行测试.
My nginx conf with proxy set to http://swapi.co for test purposes.
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 服务
My angular2 service
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值
Got it to proxy requests correctly in my development environment. Added to the http block and pointed proxy pass to the upstream api value
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;
}
}
}
这篇关于在 nginx 上托管静态 angular2 应用程序并将 http 请求代理到后端 api的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!