小程序nginx做反向代理_NGINX作为节点或Angular应用程序的反向代理

小程序nginx做反向代理

A reverse proxy is a server that retrieves resources for clients from one or more upstream servers. It typically places itself behind a firewall in a private network and forwards clients request to these upstream servers. A reverse proxy greatly improves security, performance, and reliability of any web application.

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

Many modern web applications written in NodeJS or Angular can run with their own standalone server but they lack a number of advanced features like load balancing, security, and acceleration that most of these applications demands. NGINX with its advanced features can act as a reverse proxy while serving the request for a NodeJS or an Angular application.

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

NGINX反向代理服务器 (NGINX Reverse Proxy Server)

In this tutorial, we will explore how NGINX can be used as a reverse proxy server for a Node or an Angular application. Below diagram gives you an overview of how reverse proxy server works and process client requests and send the response.

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

Nginx Reverse Proxy

Nginx反向代理

先决条件 (Prerequisite)

You have already installed NGINX by following our tutorial from here.您已经按照此处的教程安装了NGINX。

假设条件 (Assumption)

The NGINX server can be accessed from public domain.可以从公共域访问NGINX服务器。
The Node or Angular application will be running in a separate system (upstream server) in a private network and can be reached from NGINX server. Although it is very much possible to do the setups in a single system.Node或Angular应用程序将在专用网络中的单独系统（上游服务器）中运行，并且可以从NGINX服务器进行访问。尽管很有可能在单个系统中进行设置。
The tutorial makes use of variables like SUBDOMAIN.DOMAIN.TLD and PRIVATE_IP. Replace them with your own values at appropriate places.本教程使用变量，例如SUBDOMAIN.DOMAIN.TLD和PRIVATE_IP 。在适当的地方用您自己的值替换它们。

NodeJS应用程序 (NodeJS application)

Assuming you have already installed NGINX in your environment, Let us create an example NodeJS application that will be accessed through NGINX reverse proxy. To start with, set up a node environment in a system residing in your private network.

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

安装节点 (Install Node)

Before proceeding with installing NodeJS and latest version of npm(node package manager), check if it is already installed or not:

在继续安装NodeJS和最新版本的npm（节点软件包管理器）之前，请检查其是否已安装：

# node --version
# npm --version

If the above commands return the version of NodeJS and NPM then skip the following installation step and proceed with creating the example NodeJS application.

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

To install NodeJS and NPM, use the following commands:

要安装NodeJS和NPM，请使用以下命令：

# apt-get install nodejs npm

Once installed, check the version of NodeJS and NPM again.

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

# node --version
# npm --version

创建示例节点应用程序 (Create example Node application)

Once NodeJS environment is ready, create an example application using ExpressJS. Therefore, create a folder for node application and install ExpressJS.

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

# mkdir node_app
# cd node_app
# npm install express

Now using your favorite text editor, create app.js and add the following content into it.

现在使用您喜欢的文本编辑器，创建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.'))

Run the node application using following command:

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

# node app.js

Make a curl query to the port number 3000 to confirm that the application is running on localhost.

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

# curl localhost:3000
Hello World !

At this point, NodeJS application will be running in the upstream server. In the last step, we will configure NGINX to act as a reverse proxy for the above node application. For the time being, let us proceed with creating an angular application, the steps for which are given below:

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

角度应用 (Angular application)

Angular is another JavaScript framework for developing web applications using typescript. In general, an angular application is accessed through the standalone server that is shipped along with it. But due to a few disadvantages of using this standalone server in a production environment, a reverse proxy is placed in front of an angular application to serve it better.

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

设置角度环境 (Setup angular environment)

Since Angular is a JavaScript framework, it requires to have Nodejs with version > 8.9 installed in the system. Therefore before proceeding with installing angular CLI, quickly setup node environment by issuing following command in the terminal.

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

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

Now proceed with installing Angular CLI that helps us to create projects, generate application and library code for any angular application.

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

# npm install -g @angular/cli

The setup needed for Angular environment is now complete. In the next step, we will create an angular application.

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

创建角度应用 (Create angular application)

Create an Angular application using following angular CLI command:

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

# ng new angular-app

Change to the newly created angular directory and run the web application by specifying the host name and port number:

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

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

Make a curl query to the port number 3000 to confirm that the angular application is running on localhost.

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

# curl PRIVATE_IP:3000

At this point, the angular application will be running in your upstream server. In the next step, we will configure NGINX to act as a reverse proxy for the above angular application.

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

将NGINX配置为反向代理 (Configure NGINX as Reverse Proxy)

Navigate to the NGINX virtual host configuration directory and create a server block that will act as a reverse proxy. Remember the system where you have installed NGINX earlier can be reached via the Internet i.e. a public IP is attached to the system.

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

# cd /etc/nginx/sites-available
# vi node_or_angular_app.confserver {  listen 80;server_name SUBDOMAIN.DOMAIN.TLD;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;  }
}

The proxy_pass directive in the above configuration makes the server block a reverse proxy. All traffic destined to the domain SUBDOMAIN.DOMAIN.TLD and those matches with root location block (/) will be forwarded to https://PRIVATE_IP:3000 where the node or angular application is running.

上述配置中的proxy_pass指令使服务器阻止反向代理。所有发往域SUBDOMAIN.DOMAIN.TLD流量以及与根位置块（/）匹配的流量都将转发到运行节点或角度应用程序的https://PRIVATE_IP:3000 。

是否同时为NodeJS和Angular App提供NGINX反向代理？ (NGINX Reverse Proxy for Both NodeJS and Angular App?)

The above server block will act as a reverse proxy for either node or angular application. To serve both node and angular application at the same time using NGINX reverse proxy, just run them in two different port number if you intended to use the same system for both of them.

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

It is also very much possible to use two separate upstream servers for running node and angular application. Further, you also need to create another NGINX server block with a matching values for server_name and proxy_pass directive.

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

Recommended Read: Understanding NGINX Configuration File.

推荐阅读 ：了解NGINX配置文件。

Check for any syntactical error in the above server block and enable the same. Finally, reload NGINX to apply new settings.

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

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

Now point your favorite web browser to https://SUBDOMAIN.DOMAIN.TLD, you will be greeted with a welcome message from the Node or Angular application.

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

Angular Welcome Page

角度欢迎页面

摘要 (Summary)

That’s all for configuring an NGINX reverse proxy for NodeJS or Angular application. You can now proceed with adding a free SSL certificate like Let’s Encrypt to secure your application!

这就是为NodeJS或Angular应用程序配置NGINX反向代理的全部。现在，您可以继续添加免费的SSL证书（例如“加密”）来保护您的应用程序！

翻译自: https://www.journaldev.com/27234/nginx-reverse-proxy-node-angular

小程序nginx做反向代理