NGINX作为节点或者Angular应用程序的反向代理

时间:2020-02-23 14:41:07  来源:igfitidea点击:

反向代理是一种从一个或者多个上游服务器检索客户端资源的服务器。
它通常将自己放置在专用网络中的防火墙后面,并将客户端请求转发到这些上游服务器。
反向代理极大地提高了任何Web应用程序的安全性,性能和可靠性。

许多用NodeJS或者Angular编写的现代Web应用程序都可以与自己的独立服务器一起运行,但是它们缺乏许多这些应用程序所需的许多高级功能,如负载平衡,安全性和加速。
NGINX及其高级功能可以在服务于NodeJS或者Angular应用程序的请求时充当反向代理。

NGINX反向代理服务器

在本教程中,我们将探讨如何将NGINX用作Node或者Angular应用程序的反向代理服务器。
下图概述了反向代理服务器如何工作以及如何处理客户端请求并发送响应。

假设条件

  • 可以从公共域访问NGINX服务器。

  • Node或者Angular应用程序将在专用网络中的单独系统(上游服务器)中运行,并且可以从NGINX服务器进行访问。
    尽管很有可能在单个系统中进行设置。

  • 本教程使用了变量,例如" SUBDOMAIN.theitroad.com"和" PRIVATE_IP"。
    在适当的地方用您自己的值替换它们。

NodeJS应用程序

假设您已经在环境中安装了NGINX,让我们创建一个示例NodeJS应用程序,它将通过NGINX反向代理进行访问。
首先,请在专用网络中的系统中设置节点环境。

安装NodeJS

在继续安装NodeJS和最新版本的npm(节点软件包管理器)之前,请检查其是否已安装:

# node --version 
# npm --version

如果以上命令返回了NodeJS和NPM的版本,则跳过以下安装步骤并继续创建示例NodeJS应用程序。

要安装NodeJS和NPM,请使用以下命令:

# apt-get install nodejs npm

安装完成后,再次检查NodeJS和NPM的版本。

# node --version
# npm --version

创建示例节点应用程序

准备好NodeJS环境后,使用ExpressJS创建一个示例应用程序。
因此,为节点应用程序创建一个文件夹并安装ExpressJS。

# mkdir node_app  
# cd node_app
# npm install express

现在使用您喜欢的文本编辑器,创建app.js,并将以下内容添加到其中。

# vi app.js
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World !'))
app.listen(3000, () => console.log('Node.js app listening on port 3000.'))

使用以下命令运行节点应用程序:

# node app.js

对端口号3000进行curl查询,以确认该应用程序正在localhost上运行。

# curl localhost:3000
Hello World !

此时,NodeJS应用程序将在上游服务器中运行。
在最后一步,我们将NGINX配置为充当上述节点应用程序的反向代理。
目前,让我们继续创建一个角度应用程序,其步骤如下:

Angular应用

Angular是另一个使用打字稿开发Web应用程序JavaScript框架。
通常,可以通过附带的独立服务器访问有角度的应用程序。
但是由于在生产环境中使用此独立服务器的一些缺点,因此将反向代理置于有角度的应用程序的前面,以更好地为其提供服务。

设置Angular环境

由于Angular是JavaScript框架,因此需要在系统中安装版本> 8.9的Nodejs。
因此,在继续安装角度CLI之前,请通过在终端中发出以下命令来快速设置节点环境。

# curl -sL https://deb.nodesource.com/setup_10.x | sudo bash 
# apt-get install nodejs npm

现在继续安装Angular CLI,它可以帮助我们创建项目,为任何angular应用程序生成应用程序和库代码。

# npm install -g @angular/cli

Angular环境所需的设置现已完成。
在下一步中,我们将创建一个Angular应用程序。

创建Angular应用

使用以下angular CLI命令创建一个Angular应用程序:

# ng new angular-app

转到新创建的角度目录,然后通过指定主机名和端口号运行Web应用程序:

# cd angular-app
# ng serve --host PRIVATE_IP --port 3000

对端口号3000进行卷曲查询,以确认angular应用程序正在本地主机上运行。

# curl PRIVATE_IP:3000

此时,Angular应用程序将在上游服务器中运行。
下一步,我们将NGINX配置为上述角度应用程序的反向代理。

将NGINX配置为反向代理

导航到NGINX虚拟主机配置目录,并创建一个将充当反向代理的服务器块。
请记住,您可以通过Internet访问较早安装了NGINX的系统,即系统已连接了公共IP。

# cd /etc/nginx/sites-available
# vi node_or_angular_app.conf

server {  
            listen 80;
            server_name SUBDOMAIN.theitroad.com;
            location/{  
                         proxy_pass https://PRIVATE_IP:3000;  
                         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_pass指令使服务器阻止反向代理。
所有发往域" SUBDOMAIN.theitroad.com"的流量以及与根位置块(/)匹配的流量都将转发至运行节点或者角度应用程序的" https://PRIVATE_IP:3000"。

是否为NodeJS和Angular App提供NGINX反向代理?

上面的服务器块将充当节点或者角度应用程序的反向代理。
要使用NGINX反向代理同时为节点和角度应用程序提供服务,如果要为两个应用程序使用同一系统,只需在两个不同的端口号中运行它们。

也可以使用两个单独的上游服务器来运行节点和角度应用程序。
此外,您还需要创建另一个NGINX服务器块,其具有与server_nameproxy_pass指令匹配的值。

检查以上服务器块中的任何语法错误,然后启用它。
最后,重新加载NGINX以应用新设置。

# nginx -t
# cd /etc/nginx/sites-enabled
# ln -s ../sites-available/node_or_angular_app.conf .
# systemctl reload nginx

现在将您喜欢的Web浏览器指向" https://SUBDOMAIN.theitroad.com",您将收到来自Node或者Angular应用程序的欢迎消息。