nginx 配置域名前缀访问 react 项目

说明一下:我是使用域名转发访问的,访问流程如下:

浏览器 =》 服务器1 =》 服务器2

由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置,然后转发到服务器2, 所以在服务器2中不需要再配置 ssl 证书相关的东西了,就和配置 http 的方式一样就行。

我使用 https://abc.tyler.com/xxx 访问前端项目, 我的 nginx 配置如下:

user  root;
worker_processes  auto;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        off;tcp_nopush     on;server_tokens   off;keepalive_timeout  65;client_max_body_size 1000m;client_header_buffer_size 512k;large_client_header_buffers 4 512k;server {listen       80;server_name  abc.tyler.com;# server_name  10.188.17.26;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 6;gzip_vary on;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;#charset koi8-r;#access_log  logs/host.access.log  main;location /xxx{add_header X-Frame-Options "SAMEORIGIN";add_header Cache-Control "no-cache";root    html/dist;index   index.html;try_files $uri $uri/ /index.html;}location /static/ {alias html/dist/static/;}# 后端接口以 /aaa/bbb/ 开头,代理到后端接口location /aaa/bbb/ {            proxy_pass http://10.188.17.26:8090;}}
}

注意这段配置:

location /static/ {alias html/dist/static/;}

一开始我没有配,然后在浏览器控制台查看到访问静态资源报 404,
在这里插入图片描述
后来才发现我在服务器1中配置了静态资源去掉了前缀 /xxx 访问,所以要在 nginx 配置中处理一下静态资源的访问。

不过这样配置是不够的,还需要看看代码中是否是相应的前缀才行。

首先这个 webpack 中的 publicPath 很关键,我这里直接配置的是 " / "
在这里插入图片描述

然后在 App.jsx 文件中的路由配置很重要:这里的 basename 一定要和nginx 配置中的 /xxx 匹配上,否则将加载页面失败。

在这里插入图片描述
最后就是代码中用到这个前缀的地方也需要确保是一样的,比如这里进行跳转,需要确保以 /xxx 开头

在这里插入图片描述

上面这些都正确的话,应该就能够通过域名前缀正确访问到前端项目了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/67265.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

imbinarize函数用法详解与示例

一、函数概述 众所周知,im2bw函数可以将灰度图像转换为二值图像。但MATLAB中还有一个imbinarize函数可以将灰度图像转换为二值图像。imbinarize函数是MATLAB图像处理工具箱中用于将灰度图像或体数据二值化的工具。它可以通过全局或自适应阈值方法将灰度图像转换为二…

数仓建模(三)建模三步走:需求分析、模型设计与数据加载

本文包含: 数据仓库的背景与重要性数据仓库建模的核心目标本文结构概览:需求分析、模型设计与数据加载 目录 第一部分:需求分析 1.1 需求分析的定义与目标 1.2 需求分析的步骤 1.2.1 业务需求收集 1.2.2 技术需求分析 1.2.3 成果输出…

【C++指南】类和对象(八):匿名对象

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《C指南》 期待您的关注 引言 在C编程中,匿名对象是一种特殊的对象,它在创建时没有被命名。 这种对象通常用…

编译pytorch——cuda-toolkit-nvcc

链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…

智汇云舟参编《城市轨道交通安全防范系统技术要求》国标正式发布

近日,根据国家标准化管理委员会官网,全国标准信息公共服务平台发布的公告,国家标准《城市轨道交通安全防范系统技术要求》(GB/T 26718-2024)已由全国城市轨道交通标准化技术委员会上报国家标准化管理委员会&#xff0c…

Unity解决滑动条的value值的滑动条消失问题

在这里我们看到原本的value的滑动条消失了 解决办法 把编辑器的边框往外面拉一下就可以了(之前遇到这个问题还重启了几次unity没想到居然是这个问题)

HarmonyOS应用开发者初级认证最新版– 2025/1/13号题库新版

1.欢迎各位读者,本文档来自鸿蒙开发学员亲测,最新版。(考试时直接Ctrlf进行搜索,一定要认真比对答案,有的答案相似度很高)!!!!!! 欢迎…

kubernetes v1.29.XX版本HPA、KPA、VPA并压力测试

序言: 在大型电商、购物、直播活动期间,对于火爆流量的激增,如何保障业务稳定并且做到资源不浪费,自动回收。 场景:kubernetes 原生容器化承载业务流量(非云环境) 方案:kubernetes自…

HarmonyOS NEXT应用开发边学边玩系列:从零实现一影视APP (五、电影详情页的设计实现)

在上一篇文章中,完成了电影列表页的开发。接下来,将进入电影详情页的设计实现阶段。这个页面将展示电影的详细信息,包括电影海报、评分、简介以及相关影人等。将使用 HarmonyOS 提供的常用组件,并结合第三方库 nutpi/axios 来实现…

Vulnhub DC-8靶机攻击实战(一)

导语   Vulnhub DC-8靶机教程来了,好久没有更新打靶的教程了,这次我们在来更新一期关于Vulnhub DC-8的打靶训练,如下所示。 安装并且启动靶机 安装并且启动靶机,如下所示。 开始信息采集 进入到Kali中,通过如下的命令来查找到靶机的IP地址。 arp-scan -l根据上面的结…

神经网络基础-正则化方法

文章目录 1. 什么是正则化2. 正则化方法2.1 Dropout正则化2.2 批量归一化(BN层) 学习目标: 知道正则化的作用掌握随机失活 DropOut 策略知道 BN 层的作用 1. 什么是正则化 在设计机器学习算法时希望在新样本上的泛化能力强。许多机器学习算法都采用相关的策略来减小…

【Linux】12.Linux进程概念(1)

文章目录 1. 冯诺依曼体系结构2. 操作系统(Operator System)概念设计OS的目的胆小的操作系统定位如何理解 "管理"总结 3. 进程基本概念task_struct-PCB的一种task_ struct内容分类组织进程查看进程通过系统调用获取进程标示符通过系统调用创建进程-fork初识 1. 冯诺依…

【Linux网络编程】序列化与反序列化

目录 一,序列化和反序列化的说明 二,Jsoncpp库的介绍 三,Jsoncpp库的使用 3-1,Json::Value类 3-2,Json::StreamWriter类 3-3,Json::CharReader类 一,序列化和反序列化的说明 序列化与反…

Oracle报错ORA-01078、LRM-00109

虚拟机异常关机后,rac数据库备机无法启动数据库,报错如下 解决方法: 找到如下路径文件 执行: cp init.ora.016202516818 /u01/app/oracle/product/19.3.0/db/dbs/ mv init.ora.016202516818 initplm2.ora 再次进入命令行sqlpl…

STM32-keil安装时遇到的一些问题以及解决方案

前言: 本人项目需要使用到STM32,故需配置keil 5,在配置时遇到了以下问题,并找到相应的解决方案,希望能够为遇到相同问题的道友提供一些解决思路 1、提示缺少(missing)version 5编译器 step1:找…

【Hive】海量数据存储利器之Hive库原理初探

文章目录 一、背景二、数据仓库2.1 数据仓库概念2.2 数据仓库分层架构2.2.1 数仓分层思想和标准2.2.2 阿里巴巴数仓3层架构2.2.3 ETL和ELT2.2.4 为什么要分层 2.3 数据仓库特征2.3.1 面向主题性2.3.2 集成性2.3.3 非易失性2.3.4 时变性 三、hive库3.1 hive概述3.2 hive架构3.2.…

mqtt详细介绍及集成到springboot

mqtt详细介绍及集成到springboot 1.mqtt发布/订阅消息参数详细介绍2. mqtt客户端连接参数介绍3. docker-compose搭建mqtt服务端4. springboot集成mqtt实现发布订阅5. 测试注意事项 1.mqtt发布/订阅消息参数详细介绍 1.1. qosQoS0 ,Sender 发送的一条消息&#xff0…

基于springboot的租房网站系统

作者:学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等 文末获取“源码数据库万字文档PPT”,支持远程部署调试、运行安装。 项目包含: 完整源码数据库功能演示视频万字文档PPT 项目编码&#xff1…

自动化办公|xlwings简介

xlwings 是一个开源的 Python 库,旨在实现 Python 与 Microsoft Excel 的无缝集成。它允许用户使用 Python 脚本自动化 Excel 操作,读取和写入数据,执行宏,甚至调用 VBA 脚本。这使得数据分析、报告生成和其他与 Excel 相关的任务…

概率函数,累计分布函数

四. 累计分布函数 1. 累计分布函数(CDF, Cumulative Distribution Function) 累计分布函数是用来描述随机变量取值小于或等于某个给定值的概率。它适用于离散型和连续型随机变量,并且能够通过概率质量函数(PMF)或概率…