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,一经查实,立即删除!

相关文章

thinkphp8.0 likeadmin 框架添加API 文档自动生成工具 apidoc支持

Apidoc 是一个便捷的 API 文档自动生成工具,它能帮助开发者快速生成和管理 API 文档。以下是 Apidoc 的主要特点和功能: 主要特点 开箱即用 安装后,无需繁杂配置,直接按照文档编写注释,即可自动生成 API 文档。 轻松编…

leetcode 面试经典 150 题:快乐数

链接快乐数题序号202题型数组解题方法哈希表难度简单熟练度✅✅✅✅ 题目 编写一个算法来判断一个数 n 是不是快乐数。 [快乐数] 定义为: 对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0…

每天一篇逻辑漏洞

前言: 不赶进度了,学习并运用吧 内容: 该文章有bili赞助发布摆烂哥如何从0开始到年入20w 到多家SRC TOP10白帽的心路历程分享_哔哩哔哩_bilibili 逻辑漏洞 验证码回显 //一般站没有,边缘资产有 用户名枚举 …

Ruby语言的数据结构

Ruby语言的数据结构详解 Ruby是一种动态、面向对象的编程语言,因其简洁优雅的语法而受到开发者的喜爱。在Ruby中,数据结构是构建和管理数据的一种方式,不同的数据结构适用于不同的场景。本文将详细探讨Ruby中的几种主要数据结构,…

【向量数据库 Milvus】linux 源码安装 Milvus 2.5.3

在 Linux 系统(如 ai 5.10.134-16.2.an8.x86_64)上通过源码安装 Milvus 2.5.3 的步骤如下。该指南适用于 x86_64 架构的系统。 1. 环境准备 确保系统满足以下要求: 操作系统: Linux(x86_64 架构)Go: 1.21 或更高版本…

imbinarize函数用法详解与示例

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

centos使用dpdk库

yum -y install dpdk dpdk-devel 在 C 中使用 DPDK(Data Plane Development Kit)库通常涉及到以下几个步骤:安装 DPDK、配置编译环境、编写 C 代码并链接 DPDK 库。以下是如何在 C 中引用和使用 DPDK 的详细步骤。 1. 安装 DPDK 首先&#…

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

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

【postgres】sqlite格式如何导入postgres数据库

step1 在ubuntu系统安装pgloader(centos系统难以直接通过yum安装,如果源码安装的话,会比较费劲) step2,执行如下python脚本 from pathlib import Path import subprocess dataset_dir Path(/app/sqlite_to_pg/chas…

【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…

45_Lua模块与包

Lua中的模块系统是该语言的一个重要特性,它允许开发者将代码分割成更小、更易于管理的部分。通过使用模块,你可以创建可重用的代码片段,并且可以降低代码间的耦合度。下面我将详细介绍Lua模块的基本概念、语法以及一些实际案例。 1.Lua模块 1.1 模块的基本概念 从Lua 5.1…

学习华为熵减:激发组织活力(系列之三)

目录 为什么学习华为? 学习华为什么? 一、势:顺势而为,在风口上猪都会飞起来。 二、道:就是认识和利用规律层面,文化和制度创新就是企业经营之道。 三、法:就是一套价值管理的变革方法论。…

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 来实现…

亲测解决CUDA error: device-side assert triggered

这个问题小虎今天刚刚遇到,问题原因有很多。但是由于使用了cuda运行,报错看不出来。解决方法是用cpu运行来看错误出在哪里。 环境 Python version is: 3.10.13 | packaged by Anaconda, Inc. | (main, Sep 11 2023, 13:24:38) [MSC v.1916 64 bit (AMD…

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

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