在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屋!