springboot2.x整合react部署到nginx完美结合

本文介绍了如何将Springboot2.x微服务与React前端进行整合,并通过Nginx进行部署。在Springboot中,A服务作为前端交互接口,调用B和C服务实现功能。前端React应用通过打包设置,确保所有路由请求指向A服务端口。Nginx配置文件中添加server块,指定前端端口,将打包后的应用放入Nginx的html目录,最后启动Nginx服务器完成部署。
摘要由CSDN通过智能技术生成

1. 思路

1.1 springboot微服务相关

  1. 比如我sprinboot总共有3个微服务ABC ,
    A:A服务负责和前端交互,端口为8080
    B: A服务所生产的发邮件、信息等都是去访问B服务,这个时候A跨服务调用B,B的端口是8081
    C:A服务接口的搜索比如elasticsearch等相关的都在C服务上,这个时候A跨服务调用C,C的端口是:8082
  2. 但是和前端页面交互的只有A服务的8080端口,相信A端口怎么去调用BC大家都知道,也有很多方式,这里主要说一下,前端怎么去和后端的8080整合

1.2 前端react、VUE相关打包部署

  1. 一般来说,前端开发是VUE和react,开发的时候步骤无非是下面三个:

  2. . 安装相关依赖命令是:npm install

  3. . 使用命令启动命令是:npm run dev
    一般来说,前端的开发人员都会用一个3000的端口启动,比如http://localhost:3000,然后在里面测试开发,但是真正部署到线上还是要打包的,就是下面的第四步

  4. 打包,会出现一个dist文件夹,里面会有html和一些静态文件,命令是npm run build

  5. 但是我要说重点了,你用react或者vue开发的时候,打包发布的时候,一定要把所有的路由请求(AJAX请求)发到8080端口上,比如下面两个配置,分别是前端开发环境和线上环境

'use strict'
const me
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用React部署Nginx时,如果直接访问页面出现404错误,可能是由于配置问题引起的。以下是一些可能的解决方案: 1. 检查Nginx配置文件:确保在Nginx的配置文件中设置了正确的根目录,并且指向React项目的构建文件夹。例如,如果项目构建后生成的文件夹名为“build”,则Nginx配置文件中的根目录应该是指向这个文件夹的路径。 2. 配置路由规则:当使用React路由时,需要在Nginx配置文件中设置一些路由规则,以便正确地处理页面间的导航。这通常涉及使用try_files指令。例如,将下面的代码段添加到Nginx配置文件的服务器块中: ``` location / { try_files $uri /index.html; } ``` 这将确保无论访问的是哪个URL,Nginx都会返回index.html文件,然后React路由器将负责渲染正确的页面。 3. 确保React项目已正确构建:在部署Nginx之前,确保React项目已经正确地构建。使用`npm run build`命令来生成构建文件夹,并确保在Nginx配置中指向了正确的构建文件夹。 4. 重启Nginx服务:在修改Nginx配置文件后,需要重启Nginx服务以使更改生效。使用`sudo service nginx restart`命令来重新启动Nginx。 如果以上解决方案都没有解决问题,还可以检查Nginx的错误日志,以了解详细的错误信息。日志文件通常位于`/var/log/nginx/error.log`。检查错误日志可能有助于进一步诊断并解决404错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值