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

news/2025/1/17 11:47:39/

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

浏览器 =》 服务器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.ppmy.cn/news/1563878.html

相关文章

什么是CDN,为什么他可以做缓存?

CDN是Content Delivery Network的缩写,翻译成内容分发网络(这个中文名我一直记不住),它主要是通过将内容存储在全球各地的边缘节点上,以就近原则向用户提供内容。 CDN可以做缓存是因为它在全球范围内部署了多个边缘节点,这些节点…

服务器宕机原因?该怎么处理?

在信息技术飞速发展的今天,服务器作为数据存储和处理的核心枢纽,其稳定性至关重要。一旦服务器宕机,可能会导致业务中断、数据丢失等严重后果,给企业和用户带来巨大损失。因此,了解服务器宕机的原因并掌握相应的处理方…

OpenAI函数调用迎来重大升级:引入「最小惊讶原则」等软件工程实践,开发体验更上一层楼!

想玩转各种AI模型?chatTools 帮你搞定!这里有o1、GPT4o、Claude和Gemini等等,一个平台就能满足你所有的AI需求。快来开始你的AI冒险吧! OpenAI的函数调用功能再次迎来重大更新!新版指南不仅大幅精简了文档,…

Spring Boot 统一返回数据格式

在构建 RESTful API 时,保持一致的返回数据格式至关重要。统一的返回格式不仅可以提高 API 的可读性,还能方便客户端解析和处理响应数据。Spring Boot 提供了多种方式来实现统一的返回数据格式,本文将深入探讨如何在 Spring Boot 项目中实现这…

Kafka客户端-“远程主机强迫关闭了一个现有的连接”故障排查及解决

Kafka客户端-“远程主机强迫关闭了一个现有的连接”故障排查及解决 1. 故障现象 Kafka客户端发送数据时,出现“远程主机强迫关闭了一个现有的连接”错误,导致数据发送失败。错误信息如下: 2. 故障排查 【1】. 查看服务网络状态 出现故障…

Subprocess check_output returned non-zero exit status 1

note: This error originates from a subprocess, and is likely not a problem with pip. python安装依赖的时候一直失败,提示: Subprocess check_output returned non-zero exit status 1 note: This error originates from a subprocess, and is …

WordPress内容保护策略:如何反击并利用被盗内容

当你的网站开始获得大量流量时,内容盗窃成为不可避免的问题。除了通过高级的保护措施防止内容被盗,你还可以采取一些策略来反击内容盗窃,并从中获益。 1. 识别并封锁恶意IP地址 当你发现某些IP地址频繁访问并抓取你的网站内容时&#xff0c…

一个超级简单的清晰的LSTM模型的例子

废话不多说,把代码贴上去,就可以运行。然后看注释,自己慢慢品,细细品。 import tensorflow as tf import numpy as np import matplotlib.pyplot as plt# 1. 生成时间序列数据,这里使用正弦函数模拟 def generate_tim…