一台电脑上idea+webstorm使用nginx配置前后端分离

最新推荐文章于 2024-06-28 16:12:22 发布

qy88666

最新推荐文章于 2024-06-28 16:12:22 发布

阅读量3.7k

点赞数 5

分类专栏：前后端分离

本文链接：https://blog.csdn.net/qy88666/article/details/105070679

版权

前后端分离专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Nginx简介
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。因它的稳定性、丰富的功能集、示例配置文件和低系统资源的消耗而闻名。其特点是占有内存少，并发能力强。

二、安装
直接官网下载，解压即可使用。

三、启动
(1)直接双击nginx.exe，双击后一个黑色的弹窗一闪而过
(2)打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可

在浏览器地址栏输入网址 http://localhost:80，回车，出现以下页面说明启动成功
在这里插入图片描述
四、停止
如果使用cmd命令窗口启动nginx，关闭cmd窗口是不能结束nginx进程的。
输入nginx命令 nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx，有任务的话等任务执行完成才停止)

如果嫌麻烦，不想每次都手写命令的话，可以按下以操作去停止：
1.在nginx目录下新建文本文件

2.打开此文本文件，填写内容为: nginx –s stop,保存

3.修改此文件的文件名为stop.bat

4.双击stop.bat停止nginx

六.同理配置restart.bat

七、配置nginx
1.Nginx配置文件为nginx/conf目录下的nginx.conf文件，可用记事本打开编辑：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200324131826520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F5ODg2NjY=,size_16,color_FFFFFF,t_70
2.http默认配置
server {
listen 80; # 监听端口
server_name localhost; # ip,主机名，域名
location / {
root html; # web应用的根目录
index index.html index.htm; # web应用的首页
}
#error_page 404 /404.html; #错误码与对应的页面
error_page 500 502 503 504 /50x.html; #错误码与对应的页面
location = /50x.html {
root html;
}
}

3使用nginx代理服务器做负载均衡

(1)平均分配( 轮询)
#负载均衡配置上游服务流

upstream tomcatserver{

     server localhost:81; #tomcat1
     server localhost:82; #tomcat2

}

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://tomcatserver; #填写代理访问的目标
    }
}

(2)带权重分配(权重)
#负载均衡配置上游服务流

upstream tomcatserver{

     server localhost:81 weight=1 max_fails=1 fail_timeout=30s; #tomcat1 权重为1，失败次数为2次 超时时间为30s 
        server localhost:82 weight=2 max_fails=2 fail_timeout=30s; #tomcat2权重为2，权重值越高被访问到的几率越大。失败次数为2次 超时时间为30s  超过了超时时间为失败，超过了失败次数，则认为服务器down掉，自动剔除,将不再转发到该服务。
}

server {
    listen       80;
    server_name  localhost;

    location / {
    proxy_pass http://tomcatserver; #填写代理访问的目标
    }
}

}

(3)根据ip分配(ip_hash)
上面的2种方式都有一个问题，那就是下一个请求来的时候请求可能分发到另外一个服务器，当我们的程序不是无状态的时候（采用了session保存数据），这时候就有一个很大的很问题了，比如把登录信息保存到了session中，那么跳转到另外一台服务器的时候就需要重新登录了，所以很多时候我们需要一个客户只访问一个服务器，那么就需要用iphash了，iphash的每个请求按访问ip的hash结果分配，这样每个访客固定访问一个后端服务器，可以解决session的问题。

Ip_hash的缺点: 如果这台服务器down掉了，用户的状态将会永久丢失。

#负载均衡配置上游服务流

upstream tomcatserver{
     ip_hash;  #按ip分配
     server localhost:81; #tomcat1
     server localhost:82; #tomcat2
 }

八、项目演练（idea+webstorm,前端由ng路由，后端代码发布两份由ng进行负载）
1.前端打包
在terminal里输入 npm run build，目录结构中出现dist
在这里插入图片描述

2.后端代码第二份发布（第一份直接启动即可）
（1）使用如图所示的package打包在这里插入图片描述
（2）项目目录中的target目录如图所示

（3）右键target点击 Open in Terminal

(4)输入 java -jar target目录中的jar包名 --端口号配置（不能使用被占用的端口号）
如： java -jar test-0.0.1-SNAPSHOT.jar --server.port=8084 （对应上图）

3.nginx配置

 #配置上游服务流     test为上游服务流名
upstream test{

       server localhost:8081 weight=2;      #两个后端服务器
       server localhost:8084 weight=1;

}

server {
    listen       8082;   #监听端口号
    server_name  localhost;   

    location / {
        root   html;      #dist文件夹绝对路径，当前为nginx中的html文件夹（把dist文件夹中的内容复制到html文件夹）
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

    location /report{      #report为后端接口（api）
   proxy_pass http://test;   #上游服务流名
    }

}

4.前端中的访问地址改为nginx监听地址
5.浏览器中输入监听地址测试，然后关闭一份后端代码，刷新浏览器，测试负载均衡