一台电脑上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

五、其它命令:
nginx -s reload|reopen|stop|quit #重新加载配置|重启|停止|退出 nginx
nginx -t #测试配置是否有语法错误
当我们修改了nginx的配置文件nginx.conf 时,不需要关闭后重新启动,只需要执行命令 nginx -s reload 即可让改动生效

六.同理配置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.浏览器中输入监听地址测试,然后关闭一份后端代码,刷新浏览器,测试负载均衡

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: WebStorm和IntelliJ IDEA都是由JetBrains公司开发的IDE(集成开发环境),它们都可以用于前端和后端开发。在这两个IDE中,前端代码和后端代码可以轻松地连接起来。 要在WebStorm和IntelliJ IDEA连接前后端,可以按照以下步骤操作: 1. 创建一个新项目,选择你要使用的前端框架和后端框架。 2. 在WebStorm或IntelliJ IDEA中打开该项目,然后创建一个新的JavaScript或TypeScript文件。 3. 在文件中编写前端代码,并将其保存到项目的前端文件夹中。 4. 创建一个新的Java或Node.js文件,并将其保存到项目的后端文件夹中。 5. 在后端文件中编写后端代码,并在前端代码中使用Ajax或其他HTTP请求方式来调用后端API。 6. 运行应用程序并测试连接是否成功。 使用WebStorm和IntelliJ IDEA可以方便地连接前端和后端代码,并提高开发效率。 ### 回答2: WebStorm和IntelliJ IDEA都是用于开发Web应用程序的流行IDE(集成开发环境),由JetBrains公司开发。它们都提供了很多强大的功能和插件,而且很容易集成到前端和后端开发环境中。 首先,需要确保WebStorm和IntelliJ IDEA都已正确安装,并且安装了适当的插件。对于前端开发,WebStorm提供了很多有用的插件,包括Live Editing、JS Debugger、TypeScript、AngularJS等。而对于后端开发,IntelliJ IDEA则提供了很多有用的插件,包括Spring、Java EE、Hibernate等。 要连接前后端,首先需要确保允许跨域访问。对于后端应用程序,可以使用Spring框架的配置来允许跨域访问。对象为org.springframework.web.servlet.config.annotation.WebMvcConfigurer的类,有一个addCorsMappings()方法,使用该方法可以配置跨域,从而使前端应用程序可以与后端应用程序进行通信。 在WebStorm中,可以通过设置Http请求和响应头来设置跨域。在请求头中,需要设置Access-Control-Allow-Origin为要允许访问的域名。在响应头中,需要设置Access-Control-Allow-Origin,Access-Control-Allow-Methods和Access-Control-Allow-Headers。这些设置允许客户端发送跨域AJAX请求。 在WebStorm连接后端应用程序需要进行以下步骤: 1.在WebStorm中导入后端应用程序的代码。 2.配置应用程序,然后启动。 3.在WebStorm中创建前端应用程序,并使用Ajax访问后端应用程序。 4.允许跨域请求,以避免跨域访问问题。 在IntelliJ IDEA连接前端应用程序需要进行以下步骤: 1.在IntelliJ IDEA中导入前端应用程序的代码。 2.配置应用程序,然后启动。 3.在IntelliJ IDEA中创建后端应用程序,并提供RESTful服务以与前端应用程序通信。 4.允许跨域请求,以避免跨域访问问题。 综上所述,连接WebStorm和IntelliJ IDEA前后端应用程序可以通过一系列的设置和配置来实现。通过使用正确的插件和遵循最佳实践,可以轻松地完成前后端应用程序开发和调试。 ### 回答3: WebStormIDEA都是由JetBrains公司开发的IDE(集成开发环境)软件,其主要是服务于前端和后端开发人员的。那么,如何连接前后端呢?它们可以通过以下方式进行连接: 1. 首先我们需要创建一个新的项目,选择我们需要的模板,如JavaScript,Node.js等。 2. 在WebStormIDEA中打开项目后,我们可以在编辑器中创建一个HTML文件来作为前端页面。 3. 接下来,我们需要创建一个服务器来处理后端逻辑。我们可以使用Node.js并安装Express框架,或使用其他语言和框架,如Java和Spring。 4. 登录到我们的服务器后,我们需要在WebStormIDEA的设置中配置远程服务器的信息,如IP地址和端口号。 5. 我们还需要安装远程调试插件和设置调试环境,以便能够调试远程服务器上的代码。 6. 启动服务器后,我们可以在WebStormIDEA中打开浏览器,按F12打开开发者工具,并尝试连接到服务器,以确保前后端连接已成功建立。 总的来说,WebStormIDEA连接前后端的过程需要一些配置和设置,但一旦成功建立连接,我们可以更加方便地进行前后端开发和调试,并加快开发流程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值