Nginx部署前端项目+Zuul集群的Nginx访问不了的问题

刘雨昕—腊肉炒土豆

已于 2023-05-29 16:21:57 修改

阅读量3k

点赞数 4

分类专栏： nginx 文章标签： nginx 运维 linux

于 2020-12-21 18:07:29 首次发布

本文链接：https://blog.csdn.net/mrxutada/article/details/111478553

版权

nginx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、nginx安装和部署
二、部署前端项目
三、部署多个项目
四、 nginx配置文件详解
Zuul集群下nginx访问不了的问题：
- 情况描述：

一、nginx安装和部署

1、nginx下载：
http://nginx.org/en/download.html
在这里插入图片描述
2、安装部署：
1）、下载完成后，解压缩，把前端代码放入nginx/hmtl目录下即可，运行cmd，使用命令进行操作，不要直接双击nginx.exe。
一定要在dos窗口启动，不要直接双击nginx.exe，这样会导致修改配置后重启、停止nginx无效，需要手动关闭任务管理器内的所有nginx进程，再启动才可以（有时候也可以重启生效）。
2）使用命令切换到解压目录
在这里插入图片描述
3）输出命令start nginx，会闪动一下，启动成功

4）再输入命令tasklist /fi "imagename eq nginx.exe"可查看任务进程是否存在

注：如果提示没有运行的任务匹配指定标准，那就是任务没有运行起来。
原因：端口被占用或路径包含中文
nginx的默认端口是80，可以看看80端口是不是被ftp或者网关服务等等占用了。
解决：修改nginx的端口或者关闭其他占用80的端口的服务，将路径改成英文。
查看80端口情况命令：netstat -ano | findstr 0.0.0.0:80

在这里插入图片描述

详细情况可以去解压目录的日志中查看：
在这里插入图片描述

任务管理器中也有能查看nginx是否启动了
在这里插入图片描述
5）修改配置文件nginx.conf

server {
		#nginx服务监听的端口
        listen       80;
		#域名配置，一般是本机ip地址或者localhost或者www.baidu.com这样的，配置了别人就能通过这个名称去访问
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
			#程序根目录，可以是相对路径，也可以是绝对路径，这里可以指定到具体的文件夹
			root html;
			#默认主页，还没有配置自己的项目时，root后面默认的文件夹是html，里面有两个html文件，默认就是打开index.html显示welcom to nginx
            index  index.html index.htm;
			#把所有匹配不到的路径重定向到index.html，vue-router的mode是history模式的情况下需要配置，否则会出现刷新页面404的情况
			try_files $uri $uri/ /index.html;
        }
		#页面中发送的请求代理到后端接口	
		location /api {
			#需要代理访问的后端服务器地址(一般是网关地址)
			proxy_pass http://192.168.0.123:6001;
            #重写以/api为baseURL的接口地址
	        rewrite "^/api/(.*)$" /$1 break;
        }
 }

修改完后保存，查一下配置文件是否正确，后面是nginx.conf文件的路径，successful就说明正确了
nginx -t -c /nginx/nginx-1.20.1/conf/nginx.conf
在这里插入图片描述
端口未改动，直接localhost:80访问，出现欢迎界面说明部署成功

说明：
在浏览器中输入http://localhost:80的时候，浏览器的发送的http://localhost:80这个请求会被端口为80的nginx服务进行处理，然后会被location / {} 匹配，然后nginx就会找配置的root 路径下的index.html文件，并响应给浏览器，这时浏览器就可以访问到我们项目的页面了。
6）相关命令
启动
start nginx
快速停止
nginx -s stop
完整有序的关闭
nginx -s quit
重启
nginx -s reload

二、部署前端项目

1、将打包后的dist文件夹放到html文件下，可以直接用dist文件夹名，也可以重命名
在这里插入图片描述
这里重命名为pgbpm

注意修改相关congfig.json里面的后端地址
2、修改nginx.conf配置文件

server {
		#nginx服务监听的端口
        listen       8081;
		#域名配置，一般是本机ip地址或者localhost或者www.baidu.com这样的，配置了别人就能通过这个名称去访问
        server_name  192.168.0.123;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
			#程序根目录配置，可以是相对路径，也可以是绝对路径，这里可以指定到具体的文件夹
			root   E:\\nginx\\nginx-1.20.1\\html\\;
			#默认主页，还没有配置自己的项目时，root后面默认的文件夹是html，里面有两个html文件，默认就是打开index.html显示welcom to nginx
            index  index.html index.htm;
			#把所有匹配不到的路径重定向到index.html，vue-router的mode是history模式的情况下需要配置，否则会出现刷新页面404的情况
			try_files $uri $uri/ /index.html;
        }
		#页面中发送的请求代理到后端接口	
		location /api {
			#需要代理访问的后端服务器地址(一般是网关地址)
			proxy_pass http://192.168.0.123:6001;
            #重写以/api为baseURL的接口地址
	        rewrite "^/api/(.*)$" /$1 break;
        }
 }

注意：
root 这里，因为index.html代码里面加了pgbpm，所以这里不写到pgbpm文件夹，不然就多了一层，访问不到了，看日志也可以看到。
在这里插入图片描述

这样页面就可以访问了

在这里插入图片描述

假设后端服务器的地址是http://192.168.0.123:6001，请求后端服务的登录接口是http://192.168.0.123:6001/accounts/login，然后前端页面中发送的登录请求地址是：http://192.168.0.123:6001/api/accounts/login?userName=%E6%B2%88%E5%BF%A0%E6%98%8E&password=123456，这时我们就可以在nginx.conf配置文件中加入如下内容：

在这里插入图片描述
说明：
前端页面发送的登录请求接口http://192.168.0.123:6001/api/accounts/login时是加了个/api的路径，但是真实的后端服务的登录接口http://192.168.0.123:6001/accounts/login是没有这个/api前缀的，所以在这里需要重写前端发送的请求地址，把/api给去掉，也就是rewrite “^/api/(.*)$” /$1 break;这句。

3、修改配置后重启nginx即可

三、部署多个项目

在这里插入图片描述
分别配置多个server即可，如：

在这里插入图片描述
可以用一个server，这就是同样的端口和域名，如：

在这里插入图片描述

四、 nginx配置文件详解

#user  nobody;

#==工作进程数，一般设置为cpu核心数
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {

    #==最大连接数，一般设置为cpu*2048
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    
    #==客户端链接超时时间
    keepalive_timeout  65;

    #gzip  on;

    #当配置多个server节点时，默认server names的缓存区大小就不够了，需要手动设置大一点
    server_names_hash_bucket_size 512;

    #server表示虚拟主机可以理解为一个站点，可以配置多个server节点搭建多个站点
    #每一个请求进来确定使用哪个server由server_name确定
    server {
        #站点监听端口
        listen       80;
        #站点访问域名
        server_name  localhost;
        
        #编码格式，避免url参数乱码
        charset utf-8;

        #access_log  logs/host.access.log  main;

        #location用来匹配同一域名下多个URI的访问规则
        #比如动态资源如何跳转，静态资源如何跳转等
        #location后面跟着的/代表匹配规则
        location / {
            #站点根目录，可以是相对路径，也可以使绝对路径
            root   html;
            #
            index  index.html index.htm;
            
            #转发后端站点地址，一般用于做软负载，轮询后端服务器
            #proxy_pass http://10.11.12.237:8080;

            #拒绝请求，返回403，一般用于某些目录禁止访问
            #deny all;
            
            #允许请求
            #allow all;
            
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            #重新定义或者添加发往后端服务器的请求头
            #给请求头中添加客户请求主机名
            proxy_set_header Host $host;
            #给请求头中添加客户端IP
            proxy_set_header X-Real-IP $remote_addr;
            #将$remote_addr变量值添加在客户端“X-Forwarded-For”请求头的后面，并以逗号分隔。 如果客户端请求未携带“X-Forwarded-For”请求头，$proxy_add_x_forwarded_for变量值将与$remote_addr变量相同  
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            #给请求头中添加客户端的Cookie
            proxy_set_header Cookie $http_cookie;
            #将使用代理服务器的主域名和端口号来替换。如果端口是80，可以不加。
            proxy_redirect off;
            
            #浏览器对 Cookie 有很多限制，如果 Cookie 的 Domain 部分与当前页面的 Domain 不匹配就无法写入。
            #所以如果请求 A 域名，服务器 proxy_pass 到 B 域名，然后 B 服务器输出 Domian=B 的 Cookie，
            #前端的页面依然停留在 A 域名上，于是浏览器就无法将 Cookie 写入。
            
　　         #不仅是域名，浏览器对 Path 也有限制。我们经常会 proxy_pass 到目标服务器的某个 Path 下，
            #不把这个 Path 暴露给浏览器。这时候如果目标服务器的 Cookie 写死了 Path 也会出现 Cookie 无法写入的问题。
            
            #设置“Set-Cookie”响应头中的domain属性的替换文本，其值可以为一个字符串、正则表达式的模式或一个引用的变量
            #转发后端服务器如果需要Cookie则需要将cookie domain也进行转换，否则前端域名与后端域名不一致cookie就会无法存取
　　　　　　  #配置规则：proxy_cookie_domain serverDomain(后端服务器域) nginxDomain(nginx服务器域)
            proxy_cookie_domain localhost .testcaigou800.com;
            
            #取消当前配置级别的所有proxy_cookie_domain指令
            #proxy_cookie_domain off;
            #与后端服务器建立连接的超时时间。一般不可能大于75秒；
            proxy_connect_timeout 30;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }
	
	server {
        listen       8081;
        server_name  192.168.0.123;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
			root   E:\\nginx\\nginx-1.20.1\\html;
            index  index.html index.htm;
        }
     }
    
　　#当需要对同一端口监听多个域名时，使用如下配置，端口相同域名不同，server_name也可以使用正则进行配置
　　#但要注意server过多需要手动扩大server_names_hash_bucket_size缓存区大小
　　server {
　　　　listen 80;
　　　　server_name www.abc.com;
　　　　charset utf-8;
　　　　location / {
　　　　　　proxy_pass http://localhost:10001;
　　　　}
　　}
　　server {
　　　　listen 80;
　　　　server_name aaa.abc.com;
　　　　charset utf-8;
　　　　location / {
　　　　　　proxy_pass http://localhost:20002;
　　　　}
　　}
}

Zuul集群下nginx访问不了的问题：

针对我个人的情况：
在windows系统中，安装完nginx后，启动成功，可以在进程中看到，但是访问不了的问题

情况描述：

1、启动不成功，进程中没有nginx程序
原因分析：可能是端口被占用，先排除端口问题

2、启动成功，但是访问不了nginx的首页

原因分析：可能是添加了其他配置，首先不改动nginx.conf文件的情况下，应该可以访问成功
http://localhost/会显示Welcome to nginx!

说明：这里可以不用改localhost，当然也可以改成其他的，访问对应的名称即可，访问不了的原因不是这个的名称问题。

3、在做网关集群的时候，更改nginx.conf的配置后，访问不了接口

	#配置上游服务器网关端口集群,默认轮询机制
	upstream  backServer{
        server 127.0.0.1:3081 weight=1;
        server 127.0.0.1:3082 weight=1;
        server 127.0.0.1:3083 weight=1;
    }

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            # 指定上游服务器负载均衡服务器
			proxy_pass http://backServer/;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

没有配置网关集群的时候，是可以访问nginx首页的http://localhost/，配置了之后就没法访问了，实际上这个时候好像就不需要访问首页了（不知道对不对），反正我就是直接访问接口，就可以成功了，只是访问不了首页。
直接访问http://localhost/saas/user/haha就可以成功了

在这里插入图片描述
我启动了两个saas服务，两个网关
可以看到后台的日志为：

可以看到访问了端口为3082的网关，9528的saas服务

再访问一次http://localhost/saas/user/haha
在这里插入图片描述

访问了端口为3081的网关，9528的saas服务

又访问一次http://localhost/saas/user/haha
在这里插入图片描述
访问了端口为3082的网关，9529的saas服务了，时间可以对应上。

总结：
nginx+zuul网关集群的这中集群分发，项目中好像一般用的是云dns，具体的我不太清楚，本文就针对这种情况而已，项目中不使用的话，学习一下也是可以的。

Nginx负载均衡实现原理（摘自网络）：
Nginx服务器作为前端，Tomcat服务器作为后端，Web页面请求由Nginx服务来进行转发请求到不同的web服务器上，但是不是把所有的Web请求转发，而是将静态页面请求Nginx服务器自己来处理，动态页面请求转发给后端的Tomcat服务器来处理。
Tomcat是属于轻量级的应用服务器，它内置了一个轻量级的WEB服务器，用于转发html文件的请求，可以接受的访问量可能会不足，所以我们需要多台Tmocat服务器，然后通过Nginx选择负载策略来挑选不同的Tomcat服务器去进行处理。
nginx+tomcat 部署实现负载均衡原理如下图：
在这里插入图片描述

nginx和ribbon的区别（摘自网络）：
nignx是服务端负载均衡，客户端所有请求都会交给nginx，然后由nginx实现转发请求到不同的web服务器上（如Tomcat），即负载均衡是由服务端实现的。
ribbon是客户端负载均衡，在调用服务接口时，会在注册中心上获取注册服务列表之后缓存到JVM本地，从而在本地实现RPC远程服务调用（个人理解的意思：nginx用来处理网关集群的，ribbon用来处理服务集群的，至于为不直接用nginx处理服务集群，好像是因为开发语言的问题）。
nignx适合于服务器端实现负载均衡，比如Tomcat ，Ribbon适合于在微服务中RPC远程调用实现本地服务负载均衡，比如Dubbo、SpringCloud中都是采用本地负载均衡。

nginx是一个独立运行的服务器，通过反向代理实现负载均衡。ribbon是一个客户端负载均衡器，它依赖于服务注册中心给出的服务列表，做服务路由选择。两个定位不一样，工作模式和位置也不一样。在某些基于DNS负载场合，两者是可以结合起来使用的。
ribbon是一个客户端负载均衡框架，最大的优势之一就是无单点，而使用nginx的话又会引入这样一个单点了，引入这个单点以后你还要调优它，请求也多了一层转发，从可靠性、复杂度这些方面都不如直接用ribbon。

其实如果用k8s的话，甚至springcloud都不需要，看项目和团队怎么抉择吧。

正向代理和反向代理的区别：
正向代理隐藏的是用户，反向代理隐藏的是服务器
正向代理是为用户服务的，反向代理是为服务器服务的
正向代理：
正向代理是一个被配置为代表客户端的服务器（伪装客户端），客户端的请求转到代理处，而不是服务器处。代理再将请求转发给服务器，并等待响应，将其送回给客户端。这样的话，服务器就不知道客户端是谁了。它只知道代理的源IP地址。这时候对于服务器而言用户是不可见的，他们并不知道用户在哪。因此，正向代理可以保护和隐藏客户端的身份。 VPN也遵循相同的工作原理。
优点：
1、选择性的发送/阻止请求
2、记录或监控请求
3、缓存回复
在这里插入图片描述
vpn是在用户浏览器端设置的(并不是在远端的服务器设置)。
浏览器先访问vpn地址，vpn地址转发请求，并最后将请求结果原路返回来。

反向代理：
反向代理是配置为代表另一台服务器运行的服务器（伪装服务器）。代理代替服务器接收客户端的请求。代理将请求转发到服务器并等待将它们发送回给客户端的响应。
客户端不知道它正在与反向代理通信。响应返回给客户端，似乎来自服务器本身。这时对于用户而言服务器是不可见的，用户并不知道是哪个服务器给你传回来数据。因此反向代理可以保护和隐藏服务器的身份。
优点：
1、为一组服务器做负载平衡
2、服务器的匿名性和更高的安全性
3、更好的性能，代替服务器执行额外的任务
在这里插入图片描述
反向代理是作用在服务器端的，是一个虚拟ip(VIP)。对于用户的一个请求，会转发到多个后端处理器中的一台来处理该具体请求。
大型网站都有DNS(域名解析服务器)，load balance(负载均衡器)等。

注意：无论是正向代理和反向代理，实际上相互都不知道对方，他们只需要明确自己的需求和结果，而中间的发送和返回的过程并不关心，实际上一个传输的过程中完全有可能存在正向代理和反向代理两种模式，当你使用vpn（正向）访问一个使用了负载均衡（反向）的服务器。

例子：
正向代理：vpn，某个商店，你不能去买东西或者你不想暴露自己，但是你朋友可以去买，你就把钱给他让他去买。（你的请求给你朋友，商店不知道真正的客户是谁）
反向代理：vip，某个生产商，不想暴露自己的几个生产工厂，就把商品放到门店，你就去门店那里买。（你只关心你买到的东西对的，你并不知道真正的生产工厂是哪个）

刘雨昕—腊肉炒土豆

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Nginx部署前端项目+Zuul集群的Nginx访问不了的问题

项目场景：本文章针对我个人的情况在windows系统中，安装完nginx后，启动成功，可以在进程中看到，但是访问不了的问题问题描述：1、启动不成功，进程中没有nginx程序原因分析：可能是端口被占用，先排除端口问题2、启动成功，但是访问不了nginx的首页原因分析：可能是添加了其他配置，首先不改动nginx.conf文件的情况下，应该可以访问成功http://localhost/会显示Welcome to nginx!注意：这里可以不用改localhost，当然也可以改成其他的，访问对
复制链接

扫一扫

专栏目录