两个React项目部署在同一个域名,一个主地址,一个子地址,二级白屏等问题

主域名配置的那个项目正常配置就可以了,但是对于子地址的项目,需要做很多的配置的。

注意

子地址的那个项目在配置中需要配置为子地址:

base: '/subpk'

在vite.config.ts中修改:

如果这里没有配置正确,会导致白屏或者加载静态资源地址不对!假设你配置的子地址是subpk,那么你的静态资源应该也要是这个地址加载的。但是如果白屏的时候,可能就不是这个地址加载了。

配置Nginx

先创建一个静态的html文件,然后放到服务器的/var/www/subpk目录下

1. 确保你的 HTML 项目存放在服务器上

假设你的 subpk 项目存放在服务器的 /var/www/subpk/ 目录下。

如果没有该目录,可以执行:

mkdir -p /var/www/subpk/

然后将你的 HTML 文件上传到该目录。


2. 修改 Nginx 配置

打开你的 Nginx 配置文件(通常位于 /etc/nginx/sites-available/default/etc/nginx/nginx.conf,也可能是 /etc/nginx/conf.d/dev.fai-link.com.conf,具体路径取决于你的服务器环境),然后添加如下配置:

server {
    listen 80;
    server_name 你的域名;

    location / {
        root /var/www/react_project/;  # 你的 React 项目路径
        index index.html;
        try_files $uri /index.html;
    }

    location /subpk {
        # 注意这里不要写/var/www/subpk!!!!,而是/var/www/
        root /var/www/;
        index index.html;
    }
}

说明:

  • server_name 域名; 指定你的主域名。
  • location / 配置 React 项目路径。
  • location /subpk 指定 http://域名/subpk 访问 /var/www/subpk/ 目录下的 index.html

3. 检查 Nginx 配置并重启

执行以下命令检查 Nginx 配置是否正确:

nginx -t

如果没有错误,重启 Nginx 使配置生效:

sudo nginx -s reload 

4. 访问测试

在浏览器输入 http://域名/subpk,检查你的 HTML 页面是否正常加载。

这样就成功地在 http://域名/subpk 下配置了你的 HTML 项目。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

管理口令安全和资源(二)

DBMS_METADATA DBMS_METADATA 是 Oracle 数据库中的一个包,它提供了用于管理数据库元数据的工具和过程。元数据是关于数据的数据,它描述了数据库的结构,包括表、视图、索引、存储过程、用户和其他数据库对象的信息。DBMS_METADATA 包允许用户…

【狂热算法篇】探秘图论之 Floyd 算法:解锁最短路径的神秘密码(通俗易懂版)

: 羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C/C题海汇总,AI学习,c的不归之路,等方面的知识,羑悻的小杀马特.关注算法,c,c语言,青少年编程领域.https://blog.csdn.net/2401_82648291?spm1010.2135.3001.5343 在本篇文章中,博主将带大家去学习所谓的…

Kotlin Bytedeco OpenCV 图像图像57 图像ROI

Kotlin Bytedeco OpenCV 图像图像57 图像ROI 1 添加依赖2 测试代码3 测试结果 1 添加依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns"http://maven.apache.o…

Linux手写FrameBuffer任意引脚驱动spi屏幕

一、硬件设备 开发板&#xff1a;香橙派 5Plus&#xff0c;cpu&#xff1a;RK3588&#xff0c;带有 40pin 外接引脚。 屏幕&#xff1a;SPI 协议 0.96 寸 OLED。 二、需求 主要是想给板子增加一个可视化的监视器&#xff0c;并且主页面可调。 平时跑个模型或者服务&#xff0c;…

【Linux】gdb_进程概念

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

【k8s面试题2025】3、练气中期

体内灵气的量和纯度在逐渐增加。 文章目录 在 Kubernetes 中自定义 Service端口报错常用控制器Kubernetes 中拉伸收缩副本失效设置节点容忍异常时间Deployment 控制器的升级和回滚日志收集资源监控监控 Docker将 Master 节点设置为可调度 在 Kubernetes 中自定义 Service端口报…

飞牛 使用docker部署Watchtower 自动更新 Docker 容器

Watchtower是一款开源的Docker容器管理工具&#xff0c;其主要功能在于自动更新运行中的Docker容器 Watchtower 支持以下功能&#xff1a; 自动拉取镜像并更新容器。 配置邮件通知。 定时执行容器更新任务。 compose搭建Watchtower 1、新建文件夹 先在任意位置创建一个 w…

使用NetLimiter限制指定应用的网速

NetLimiter是一款用于网络流量监控和控制的软件&#xff0c;适合需要管理网络带宽的用户。在项目测试中&#xff0c;它帮助我对特定应用进行限速&#xff0c;合理分配网络资源&#xff0c;避免了因单一应用过度占用带宽而引发的网络问题。通过NetLimiter&#xff0c;我可以为每…

Python根据图片生成学生excel成绩表

学习笔记&#xff1a; 上完整代码 import os import re from openpyxl import Workbook, load_workbook from openpyxl.drawing.image import Image as ExcelImage from PIL import Image as PilImage# 定义图片路径和Excel文件路径 image_dir ./resources/stupics # 图片所…

56_多级缓存实现

1.查询Tomcat 拿到商品id后,本应去缓存中查询商品信息,不过目前我们还未建立Nginx、Redis缓存。因此,这里我们先根据商品id去Tomcat查询商品信息。此时商品查询功能的架构如下图所示。 需要注意的是,我们的OpenResty是在虚拟机,Tomcat是在macOS系统(或Windows系统)上,…

【Linux系统】Ext系列磁盘文件系统二:引入文件系统(续篇)

inode 和 block 的映射 该博文中有详细解释&#xff1a;【Linux系统】inode 和 block 的映射原理 目录与文件名 这里有几个问题&#xff1a; 问题一&#xff1a; 我们访问文件&#xff0c;都是用的文件名&#xff0c;没用过 inode 号啊&#xff1f; 之前总是说可以通过一个…

2024年博客之星年度评选—创作影响力评审入围名单公布

2024年博客之星活动地址https://www.csdn.net/blogstar2024 TOP 300 榜单排名 用户昵称博客主页 身份 认证 评分 原创 博文 评分 平均 质量分评分 互动数据评分 总分排名三掌柜666三掌柜666-CSDN博客1001002001005001wkd_007wkd_007-CSDN博客1001002001005002栗筝ihttps:/…

基于高光谱数据的叶片水分估测方法研究 【Matlab Python Origin】

相关代码和结果在这里&#xff1a;基于高光谱数据的叶片水分估测方法研究 【Matlab Python Origin】文章中的代码和结果 第1章 研究内容和技术路线 1.1 研究内容 在本文研究中&#xff0c;我们致力于充分利用LOPEX’93数据集&#xff0c;并通过深入分析高光谱数据&#xff0c;…

windows下安装并使用node.js

一、下载Node.js 选择对应你系统的Node.js版本下载 Node.js官网下载地址 Node.js中文网下载地址??? 这里我选择的是Windows64位系统的Node.js20.18.0&#xff08;LTS长期支持版本&#xff09;版本的.msi安装包程序 官网下载&#xff1a; 中文网下载&#xff1a; 二、安…

西门子PLC读取梅安森风速传感器数据

西门子PLC读取梅安森风速传感器数据 读取数据前期准备&#xff1a;西门子PLC读取数据 设备型号为&#xff1a;GFY15 到货开盒的设备有&#xff1a;风速传感器、485线及设置遥控器 读取数据前期准备&#xff1a; 将设备的私有485协议改为modbus公有协议 刚上电的轮询显示时间同时…

麒麟操作系统服务架构保姆级教程(十一)https配置

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 在运维工作中&#xff0c;加密和安全的作用是十分重要的&#xff0c;如果仅仅用http协议来对外展示我们的网站&#xff0c;过一段时间就会发现网站首页被人奇奇怪怪的篡改了&#xff0c;本来好好的博…

TiDB 的高可用实践:一文了解代理组件 TiProxy 的原理与应用

导读 TiProxy 是 TiDB 官方推出的高可用代理组件&#xff0c;旨在替代传统的负载均衡工具如 HAProxy 和 KeepAlived&#xff0c;为 TiDB 提供连接迁移、故障转移、服务发现等核心能力。 本文全面解析了 TiProxy 的设计理念、主要功能及适用场景&#xff0c;并通过实际案例展示…

Redisson发布订阅学习

介绍 Redisson 的消息订阅功能遵循 Redis 的发布/订阅模式&#xff0c;该模式包括以下几个核心概念&#xff1a; 发布者&#xff08;Publisher&#xff09;&#xff1a;发送消息到特定频道的客户端。在 Redis 中&#xff0c;这通过 PUBLISH 命令实现。 订阅者&#xff08;Sub…

Github 2025-01-17 Java开源项目日报 Top8

根据Github Trendings的统计,今日(2025-01-17统计)共有8个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Java项目8TypeScript项目1Python项目1OpenAPI 生成器:基于规范自动生成API工具 创建周期:2155 天开发语言:Java协议类型:Apache License 2.0…

基于docker微服务日志ELK+Kafka搭建

ELK 是 Elasticsearch 、 Logstash 、 Kibana 的简称 Elasticsearch 是实时全文搜索和分析引擎&#xff0c;提供搜集、分析、存储数据三大功能&#xff1b;是一套开放 REST 和 JAVA API 等结构提供高效搜索功能&#xff0c;可扩展的分布式系统。它构建于 Apache Lucene 搜索引…