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.rhkb.cn/news/3073.html

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

相关文章

Java设计模式——单例模式(特性、各种实现、懒汉式、饿汉式、内部类实现、枚举方式、双重校验+锁)

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫(刚保研) 记录每天学习过程(主要学习Java、python、人工智能),总结知识点(内容来自:自我总结网上借鉴&#xff0…

Web3与加密技术的结合:增强个人隐私保护的未来趋势

随着互联网的快速发展,个人隐私和数据安全问题越来越受到关注。Web3作为新一代互联网架构,凭借其去中心化的特性,为个人隐私保护提供了全新的解决方案。而加密技术则是Web3的重要组成部分,进一步增强了隐私保护的能力。本文将探讨…

ElasticSearch下

DSL查询 叶子查询:在特定字段里查询特定值,属于简单查询,很少单独使用复合查询:以逻辑方式组合多个叶子查询或更改叶子查询的行为方式 在查询后还可以对查询结果做处理: 排序:按照1个或多个字段做排序分页…

HarmonyOS NEXT应用开发边学边玩系列:从零实现一影视APP (二、首页轮播图懒加载的实现)

在开发一款影视APP时,首页的轮播图是一个非常重要的部分。它不仅能够吸引用户的注意力,还能有效地推广重点内容。为了提升应用的性能和用户体验,可以实现轮播图的懒加载功能。本文将详细介绍如何在HarmonyOS NEXT应用开发中实现这一功能。 1.…

GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库

使用GraphRAG踩坑无数 在GraphRAG的使用过程中将需要踩的坑都踩了一遍(不得不吐槽下,官方代码有很多遗留问题,他们自己也承认工作重心在算法的优化而不是各种模型和框架的兼容性适配性上),经过了大量的查阅各种资料以…

Jupyter notebook中运行dos指令运行方法

Jupyter notebook中运行dos指令运行方法 目录 Jupyter notebook中运行dos指令运行方法一、DOS(磁盘操作系统)指令介绍1.1 DOS介绍1.2 DOS指令1.2.1 DIR - 显示当前目录下的文件和子目录列表。1.2.2 CD 或 CHDIR - 改变当前目录1.2.3 使用 CD .. 可以返回上一级目录1…

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…

AAPM:基于大型语言模型代理的资产定价模型,夏普比率提高9.6%

“AAPM: Large Language Model Agent-based Asset Pricing Models” 论文地址:https://arxiv.org/pdf/2409.17266v1 Github地址:https://github.com/chengjunyan1/AAPM 摘要 这篇文章介绍了一种利用LLM代理的资产定价模型(AAPM)…

大疆发布可折叠航拍无人机,仅重249g,支持 4800 万像素拍摄

在以往的无人机使用经历中,携带不便一直是个让人头疼不已的问题。那些体积硕大的无人机,每次出行都像是一场艰难的搬运,塞进车里都费劲,更别提轻松地穿梭在城市街头或是户外探险中了。但就在大家对这些问题习以为常、感到无奈时&a…

无公网IP 实现外网访问本地 Docker 部署 Navidrome

Navidrome 是一款可以在 macOS、Linux、Windows以及 Docker 等平台上运行的跨平台开源音乐服务器应用,它支持传输常见的 MP3、FLAC、WAV等音频格式。允许用户通过 Web 界面或 API 进行音乐库的管理和访问。本文就介绍如何快速在 Linux 系统使用 Docker 进行本地部署…

从 SQL 语句到数据库操作

1. SQL 语句分类 数据定义语言 DDL : 用于定义或修改数据库中的结构,如:创建、修改、删除数据库对象。create、drop alter 数据操作语言 DML : 用于添加、删除、更新数据库中的数据。select、insert alter、drop 数据控制语言 D…

leetcode hot100(2)

11.200.岛屿数量 本题是图论中经典的连通分量问题,可以用bfs/dfs解决。 class Solution {int[][] directions new int[][]{{-1,0},{0,-1},{1,0},{0,1}};public int numIslands(char[][] grid) {boolean visited[][] new boolean[grid.length][grid[0].length];i…

Kafka权威指南(第2版)读书笔记

目录 Kafka生产者——向Kafka写入数据生产者概览创建Kafka生产者bootstrap.serverskey.serializervalue.serializer 发送消息到Kafka同步发送消息异步发送消息 生产者配置client.idacks消息传递时间max.block.msdelivery.timeout.msrequest.timeout.msretries 和retry.backoff.…

虚拟拨号技术(GOIP|VOIP)【基于IP的语音传输转换给不法分子的境外来电披上一层外衣】: Voice over Internet Protocol

文章目录 引言I 虚拟拨号技术(GOIP|VOIP)原理特性:隐蔽性和欺骗性II “GOIP”设备原理主要功能III 基于IP的语音传输 “VOIP” (Voice over Internet Protocol)IV “断卡行动”“断卡行动”目的电信运营商为打击电诈的工作V 知识扩展虚拟号保护隐私虚拟运营商被用于拨打骚扰…

MySQL 事务

目录 一、什么是事务 二、事务的特性 三、事务使用案例 四、事务并发问题 五、设置事务的隔离级别(解决读的问题) 一、什么是事务 MySQL 事务主要用于处理操作量大,复杂度高的数据。比如说,在人员管理系统中,你删除…

基于Oracle与PyQt6的电子病历多模态大模型图形化查询系统编程构建

一、引言 1.1 研究背景阐述 在当今数字化时代,医疗行业正经历着深刻的变革,数字化转型的需求日益迫切。电子病历(EMR)作为医疗信息化的核心,其管理的高效性和数据利用的深度对于提升医疗服务质量、优化临床决策以及推动医学研究具有至关重要的意义。传统的电子病历管理系…

强化学习-蒙特卡洛方法

强化学习-数学理论 强化学习-基本概念强化学习-贝尔曼公式强化学习-贝尔曼最优公式强化学习-值迭代与策略迭代强化学习-蒙特卡洛方法 文章目录 强化学习-数学理论一、蒙特卡洛方法理论(Monte Carlo, MC)二、MC Basic2.1 算法拆解2.2 MC Basic算法 三、MC Exploring Starts3.1 …

Harmony面试模版

1. 自我介绍 看表达能力、沟通能力 面试记录: 2. 进一步挖掘 2.1. 现状 目前是在职还是离职,如果离职,从上一家公司离职的原因 2.2. 项目经验 如果自我介绍工作项目经验讲的不够清楚,可以根据简历上的信息再进一步了解 面试记…

eBay账号安全攻略:巧妙应对风险

在跨境电商的浪潮中,eBay宛如一座璀璨的灯塔,照亮了无数买卖双方的交易之路。但别忘了,网络安全的阴霾也在悄然蔓延,让eBay账号时刻处于黑客攻击、数据泄露、钓鱼诈骗等风险的阴影之下。别担心,今天就来为你支支招&…

浅谈云计算19 | OpenStack管理模块 (上)

OpenStack管理模块(上) 一、操作界面管理架构二、认证管理2.1 定义与作用2.2 认证原理与流程2.2.1 认证机制原理2.2.2 用户认证流程 三、镜像管理3.1 定义与功能3.2 镜像服务架构3.3 工作原理与流程3.3.1 镜像存储原理3.3.2 镜像检索流程 四、计算管理4.…