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

一、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文件，可用记事本打开编辑：

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; #tomcat1server 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; #tomcat1server 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.浏览器中输入监听地址测试，然后关闭一份后端代码，刷新浏览器，测试负载均衡

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

京东上千页面搭建基石——CMS前后端分离演讲史读后感
阅读文章:京东上千页面搭建基石--CMS前后端分离演讲史文章网址:https://mp.weixin.qq.com/s?__biz=MzIwODA4NjMwNA==&mid=26528978 ...
Nginx实现前后端分离（springboot+vue）+双机互备
背景介绍项目采用springboot+vue开发,之前项目布署时,都是采用pom中配置,把vue打包的dist文件copy到springboot项目中resource/static下做的,这样每次 ...
京东上千页面搭建基石——CMS前后端分离演进史
声明:本文来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:于林坤,2012年加入京东,网站移动研发部频道业务技术负责人,先后多次主导京东商城首 ...
Nginx解决前后端分离（适用于传统项目改前后端分离）
最近写项目碰到个前后端分离的问题,踩了不少坑,给大家分享一些经验. 项目是传统的项目,没有做前后端分离,现在根据业务现状,需要改成前后端分离的形式去做开发,上来就碰到个头大的事,cookie没办法在前 ...
Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
centos7.9 配置nginx实现前后端分离
工作中经常会遇到需要部署前后端分离的项目,今天来给大家介绍一下. 实验目的: 实现前后端分离配置,即nginx做代理,前端需要跳转到本地目录访问,后端需要跳转到后端程序. 服务器:CentOS Lin ...
使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建我使用的是springboot1.5.10+jdk8+ide ...
nginx处理前后端分离跨域问题
在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...

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

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

最新文章

热门文章