Nginx反向代理+ ExpressJS + Angular + SSL配置问题 [英] Nginx Reverse Proxy + ExpressJS + Angular + SSL configuration issues

问题描述

我是新手，我有一些我无法通过Google回答的问题.

I'm new to this stuff and I have a few questions I couldn't answer through Google.

如果我做对了- nginx 是我的网络服务器-已完成对服务器的请求，并且 nginx 服务于我的客户端(Angular)，但我也可以使用我的Express应用程序与res.sendFile()一起使用? 如果我使用反向代理设置nginx，它可以作为客户端和后端之间的实例吗?因此，他们不是通过nginx彼此直接通信，而要做到这一点，我必须proxy_pass我的Express应用程序?

If I get it right - nginx is my webserver - a request to my server is done and nginx serves my client (Angular) but can I also use my Express app to serve it with res.sendFile()? And if I setup nginx with a reverse proxy it works as an instance between my client and backend? So they don't communicate directly with eachother but through nginx and to do so I have to proxy_pass my Express app?

我的nginx网站可用的配置:

My nginx sites-available config:

# Default server configuration
#
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name blank-agency.org www.blank-agency.org;
    return 301 https://$server_name$request_uri;
} 


server {    
    # SSL configuration
    listen 443 ssl default_server;
    listen [::]:443 ssl default_server;

    ssl on;

ssl_certificate /etc/letsencrypt/live/blank-agency.org/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/blank-agency.org/privkey.pem;

server_name blank-agency.org www.blank-agency.org;  
root /var/www/webserver/public/website;



    location ~ /.well-known {
            allow all;
    }


location / {

    proxy_pass https://localhost: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;

}

您可以看到我的目录结构是:

As you can see my directory structure is:

/var/www/webserver->这是我的快递app.js

/var/www/webserver --> here is my express app.js

/var/www/webserver/public/website->这是我的角度dist文件

/var/www/webserver/public/website --> here are my angular dist files

如果我使用nginx作为反向代理，我的客户端不再可用(bad gateway 502)，那么我想现在必须通过Express应用程序提供它吗?

If I use nginx as a reverse proxy my client is not served anymore (bad gateway 502) so I suppose I have to serve it via my Express app now?

所以现在我的app.js:

// require section

var express = require('express'),
    mysql = require('mysql'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    path = require('path'),
    app = express();

// middlewares bodyParser + cors
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());



var connection = mysql.createConnection({
    host: '127.0.0.1',
    user: 'root',
    password: 'whatever',
    database: 'whateverDB'
});

connection.connect();


app.use( express.static(__dirname + '/public/website'));

app.get('/', function(req, res){
    res.sendFile(path.join(__dirname + '/public/website/index.html'));
});

app.route('/customers').get((req, res) => {
   connection.query('SELECT * FROM customers', function (err, rows) {
      const results = JSON.stringify(rows);
      console.log(req.param("term"));
      res.send(results);
   })

})



// app listen port

app.listen(3000, function () {
    console.log('Example app listening on port 3000!');
});

再次一切似乎都正常工作...但是为什么我可以通过http://blank-agency.org:3000访问我的应用程序?首先应该将HTTP请求重定向到HTTPS吗?与 https://blank-agency/customers 相同->我在URL上公开的数据似乎很安全发出哈哈

Again everything seem to work fine...but why can I access my app through http://blank-agency.org:3000? First of all HTTP requests should be redirected to HTTPS? Same for https://blank-agency/customers --> my data exposed on an URL seems like an security issue haha

我知道它是在端口3000上提供的，因为我是通过侦听端口3000的Express应用程序将其发送的，但是还应该如何提供它呢?因为具有反向代理设置的Nginx会出现上述提到的502错误，并且我已经通过Linux上的iptables在防火墙上打开了端口80 & 443.

I get that it is served on port 3000 cause I sent it through my Express app which listens on port 3000 but how else should it be served? Because nginx with reverse proxy setting gives 502 error like mentioned and i already opened the ports 80 & 443 on my Firewall through iptables on linux.

netstat -tlpn

在端口80和443上显示nginx

show nginx on ports 80 and 443

systemctl status nginx

和

nginx -t

一切都很好.

我想我对这里使用的概念有很深的误解，或者其他不正确的地方. 让我知道您是否需要更多信息.

I suppose I have a deep misunderstanding of the concepts used here or something else isn't right. Let me know if you need more information.

先谢谢您了:)

推荐答案

供以后参考，您绝对可以同时通过Nginx和express-static提供文件.

For future reference, you can absolutely serve files through both Nginx and express-static.

我在server.js中拥有此文件，当在没有Nginx的情况下本地运行时，该文件将提供./public/中的所有文件.

I have this in my server.js, which serves all files within ./public/ when run locally without Nginx.

app.use('/assets', express.static(path.join(__dirname, 'public')));
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

然后在Nginx配置中，我可以将其提供给相同的目录.在生产环境中，它将由Nginx完全处理，并且永远不会在/assets上运行Express应用程序.

Then in Nginx configuration I have this to serve the same directory. In a production environment, it will be fully handled by Nginx and never hit the Express app for /assets.

location /assets/ {
    alias /home/app/public/;
    sendfile on;
    sendfile_max_chunk 5m;
    tcp_nopush on;
  }

由于Prerender.io配置的缘故，我的代理通行证稍微复杂了一些，但是您可能需要遵循这些原则.这会将 /assets/以外的任何内容发送到您的Express服务器.

My proxy-pass is a little more complicated due to Prerender.io configuration but you'll want something along these lines. This will send anything except /assets/ to your Express server.

location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:5000;
}

这篇关于Nginx反向代理+ ExpressJS + Angular + SSL配置问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！