使用Nginx反向代理,将React项目打包后部署到服务器的二级子目录

这篇具有很好参考价值的文章主要介绍了使用Nginx反向代理,将React项目打包后部署到服务器的二级子目录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们上线一个项目的时候如果服务器上只有这一个项目的话可以直接将打包后的代码部署到服务器指定的根目录,然后直接上线看就可以看到,不用配置其他项。

但是,如果服务器有多个项目的话,我们就需要将代码部署到服务器根目录里边的子目录了,而放到子目录的话,想让页面顺利访问到文件,和我们使用的路由方式也有关系。

我们先了解下常用的这两个路由模式以及差别:

HashRouter路由模式

HashRouter相当于锚点定位,路径中会携带一个#字符,请求的链接为“ip地址:端口/#/xxxx”,不管#字符后边的路径如何变化,请求的都是#字符之前的地址,可以理解为请求的资源路径一直都是“/”,相当于/#/后边请求的路径都是虚拟路径,而不是服务器的真实路径。

缺点就是比较丑,路径中一直带个#,我们只需要再react的配置文件也就是package.json文件中加上一句:

nginx二级目录反向代理,nginx,服务器,后端,reactjs,前端

这样我们在访问前端路由的时候就可以直接匹配到页面了。

BrowserRouter路由模式

BrowserRouter模式下请求的链接都是”ip地址:端口/xxxx/xxxx“,因此每一个路径都会访问到不同的后端地址,相当于都是真实的服务器路径

这种写法在面向C端的时候看起来更优雅一些,但是这种方式不止前端要配置,后端也需要配置一下,我这里用的是nginx。

前端配置:

首先我们先配置前端部分,将package.json配置项中homepage改为域名+子目录文件夹,如下:

nginx二级目录反向代理,nginx,服务器,后端,reactjs,前端

然后配置路由部分,我们路由通常写为:

nginx二级目录反向代理,nginx,服务器,后端,reactjs,前端

然后在我们注册路由的地方添加:

nginx二级目录反向代理,nginx,服务器,后端,reactjs,前端

basename必须与服务器的二级子目录保持一致,这样我们定义的路由都挂载在basename之后。

后端配置:

接下来我们配置后端,确保服务器已经安装了nginx,然后我们找到nginx的配置文件,我这里服务器上的路径是/usr/local/nginx/conf,最后找到nginx.conf文件编辑

server {
        listen       80;
        server_name 域名;

        #我们指定的域名根目录
        root   /data/test/H5game;
        
        #根目录默认页面
        location / {
            index  index.html index.htm;

            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
            add_header Access-Control-Allow-Headers *;
        }
        #接下来我们配置子目录 我这里是放在了testModel文件夹下
        location /testModel/ {
            #在请求失败的时候尝试请求该资源对应目录下的index.html文件
            try_files $uri $uri/ testModel/index.html;
            index  index.html;
        }
}

这样确保我们在服务器访问前端路由路径时,总是以testModel文件下的index.html为入口,注意,路径访问或跳转必须使用useNavigate这个hook,直接url跳转会报错,因为服务器上是没有这个路径的,必须通过react-router-dom访问,如下:

// 文件进引入
import { useNavigate } from 'react-router-dom'


// 组件内使用
const navigate = useNavigate();

// 跳转事件 写入要跳转的路径
navigate('/testpage')

然后,然后就没有然后了,nicenice,接下来,原神!启动!搞错了,再来,nginx!启动!!!文章来源地址https://www.toymoban.com/news/detail-843595.html

到了这里,关于使用Nginx反向代理,将React项目打包后部署到服务器的二级子目录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/2202_75616310/article/details/134712251

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【云原生】使用nginx反向代理后台多服务器

    背景 随着业务发展, 用户访问量激增,单台服务器已经无法满足现有的访问压力,研究后需要将后台服务从原来的单台升级为多台服务器,那么原来的访问方式无法满足,所以引入 nginx 来代理多台服务器,统一请求入口。 什么是nginx Nginx[engine x]是一个免费开源Web服务器,是

    2024年02月04日
    浏览(19)
  • 【开发日记】换掉Nginx,使用HAProxy作为反向代理服务器

    HAProxy,全称为 \\\"High Availability Proxy\\\",是一款开源的、高性能的负载均衡器和代理服务器。主要用于改善应用程序的可用性、可靠性和性能。 与大众熟知的Nginx相比各有优缺点,如果你需要的是一个Web服务器,还是首选Nginx,虽然HAProxy也能实现相同效果,但却需要通过十分繁琐

    2024年01月25日
    浏览(13)
  • 使用Nginx作为反向代理服务器在Linux中的最佳实践

    在Linux环境下,Nginx因其高效性能、稳定性以及丰富的功能集而广泛用于作为反向代理服务器。以下是在Linux中使用Nginx作为反向代理服务器的最佳实践: 1. 安装与配置 首先,确保你的Linux发行版已经安装了Nginx。大多数Linux发行版都提供了Nginx的包管理工具。例如,在基于Deb

    2024年01月17日
    浏览(13)
  • 具有公网IP的服务器作为代理服务器,并使用Nginx将内网服务器反向代理

    在代理服务器上安装Nginx。如果您正在使用Linux操作系统,则可以使用包管理器来安装Nginx。例如,如果您使用的是Ubuntu,可以使用以下命令安装: 配置Nginx以将HTTP和HTTPS请求转发到内部服务器。打开Nginx的主配置文件/etc/nginx/nginx.conf,并在http块中添加以下代码: 注意: 将

    2024年01月25日
    浏览(16)
  • SpringBoot + Vue2项目打包部署到服务器后,使用Nginx配置SSL证书,配置访问HTTP协议转HTTPS协议

    配置nginx.conf文件,这个文件一般在/etc/nginx/...中,由于每个人的体质不一样,也有可能在别的路径里,自己找找... 证书存放位置,可自定义存放位置 两个文件 后端配置 把.pfx拷贝到resource下,然后配置一下yml

    2024年02月02日
    浏览(16)
  • 【代理服务器】Squid 反向代理与Nginx缓存代理

    如果 Squid 反向代理服务器中缓存了该请求的资源,则将该请求的资源直接返回给客户端;否则反向代理服务器将向后台的 Web 服务器请求资源,然后将请求的应答返回给客户端,同时也将该应答缓存在本地,供下一个请求者使用。 缓存网页对象,减少重复请求 将互联网请求

    2024年02月12日
    浏览(8)
  • 使用云服务器和Frp(快速反向代理)框架快速部署实现内网穿透

    现在有一台ubuntu云服务器,我想通过内网穿透将一台内网的主机当成云服务器来使用(包括但不限于ssh、http和https服务),比如我想在外地通过ssh远程连接到一台内网没有桌面的主机(可以是Ubuntu或者Windows,Windows配置类似),就可以使用frp内网穿透, 配置起来非常方便快捷

    2024年02月15日
    浏览(8)
  • nginx 反向代理服务器端口转发问题

    先介绍一下项目背景,公司里有个外包Saas项目,这里假设为A项目( 前后端不分离 );项目架构大概如下;但是项目部署到生产环境时,那台服务器80端口被其他应用占用了(我尼玛...),nginx监听端口那边只能监听其他端口了,比如监听:18000,通过nginx反向代理将18000端口转发到

    2024年02月04日
    浏览(12)
  • Nginx反向代理服务器简单配置案例

    --------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------

    2024年02月03日
    浏览(11)
  • Nginx HTTP和反向代理服务器

    1、概念: Nginx  (engine x) 是一个高性能的HTTP和反向代理web服务器。 2、什么是代理服务器: 概念: 代理服务器是介于客户端和Web服务器之间的另一台服务器,有了它之后,浏览器不是直接到Web服务器去取回网页信息,而是通过向代理服务器发送请求,信号会先送到代理服务

    2024年02月04日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包