代码编织梦想

我们用npm start项目以后一般端口都是3000或者其他,这个方法可以直接80端口跳3000.

Nginx的方法:
修改配置文件
在 Nginx 配置文件中,您需要找到默认的 server block,并将其配置为监听 80 端口,并将请求代理到 3000 端口。以下是您应该添加或修改的内容:
server {
    listen 80;

    server_name your_domain_or_ip;  # 可以是域名或服务器的 IP 地址

    location / {
        proxy_pass http://localhost:3000;  # 将请求转发到本地 3000 端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

方案一:使用 IIS URL 重写(推荐)

1. 安装必要的模块

1.1 安装 URL Rewrite 模块

1.2 安装 Application Request Routing (ARR)

2. 配置 IIS

2.1 打开 IIS 管理器

  • Windows + R,输入 inetmgr,然后回车。

2.2 启用代理功能

  • 在 IIS 管理器中点击左侧的服务器名称。
  • 双击中间窗格的 Application Request Routing Cache
  • 点击右侧的 Server Proxy Settings
  • 勾选 Enable proxy,然后点击 Apply 应用设置。

2.3 配置 URL 重写规则

  • 在 IIS 管理器中选择默认网站。
  • 双击中间窗格的 URL Rewrite
  • 在右侧点击 Add Rule(s),选择 Blank ruleInbound Rules 下。
  • 填写规则:
    • Name: ReverseProxyToNode
    • Pattern: (.*)
    • Rewrite URL: http://localhost:3000/{R:1}
    • 勾选 Stop processing of subsequent rules
    • 点击 Apply 保存规则。

上面的方法由cursor提供,我是直接用的宝塔软件商店安装的IIS.然后直接走下面的步骤。

3. 创建 web.config

在 IIS 默认网站根目录(通常是 C:\inetpub\wwwroot创建或编辑 web.config 文件:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="ReverseProxyToNode" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="http://localhost:3000/{R:1}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

4. 检查和测试

确保 React 应用正在运行
保持 React 应用在 3000 端口运行
检查防火墙设置
确保 80 端口已开放
Windows 防火墙允许 IIS 和 Node.js 的通信
测试访问
直接访问域名 xoxome.top
应该能够看到原本在 3000 端口的网站内容

4.1 确保 React 应用正在运行

  • 保持 React 应用在 3000 端口运行。

4.2 检查防火墙设置

  • 确保 80 端口已开放。
  • 确保 Windows 防火墙允许 IIS 和 Node.js 的通信。

4.3 测试访问

  • 直接访问域名 xoxome.top,应该能够看到原本在 3000 端口的网站内容。

5. 常见问题解决

5.1 如果出现 502.3 错误

  • 检查 React 应用是否正在运行。
  • 检查 3000 端口是否可访问。

5.2 如果出现权限问题

  • 确保 IIS 用户对网站目录有读写权限。
  • 检查应用程序池的身份设置。

5.3 如果规则不生效

  • 尝试重启 IIS。

这个格式已经简洁清晰,便于阅读。如果需要更详细的操作步骤或遇到具体问题,可以进一步讨论!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yangshuo1281/article/details/144062099

webpack-dev-server 设置反向代理解决跨域问题-爱代码爱编程

本文转载自: http://www.cnblogs.com/liuchuanfeng/p/6802598.html 作者:liuchuanfeng 转载请注明该声明。 一、设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行。后端只负责接口,前端负责数据展示、逻辑处理。但是前后端开发模式,有一个重要的

nginx反向代理非80端口-爱代码爱编程

公司项目原本保存在阿里云服务器上,因需要搬迁到华为云上,但是备案尚未通过,使用了二级域名,而阿里云的网址一个月不访问会作废,所以需要先访问阿里云,再反向代理到华为云,并且不能映射80端口。最后我选择使用nginx反向代理81端口。 1. 准备两台在公网环境下的云服务器 例:阿里云:1.1.1.1 华为云:2.2.2.2 2. 在服务器上安装

Nginx 反向代理的配置-爱代码爱编程

下载地址 https://nginx.org/ 热启动 Linux 下面 : # linux nginx -s reload # window nginx.exe -s reload 反向代理的配置 nginx 反向代理的配置文件 nginx.conf #运行用户 user www-data; #启动进程,通常设置成和cpu的数

nginx反向代理与正向代理配置-爱代码爱编程

一、Nginx主要功能 1、Nginx 简介 Nginx是一款轻量级的Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。主要有反向代理,负载均衡等功能。 官方网站:nginx news Nginx是一款免费开源的高性能 HTTP 代理服务器及反向代理服务器(Reverse Proxy)产品,它高并发性能很好,官方测试能够支

2024强网杯-爱代码爱编程

house of apple2 这次比赛看到这道题想到了用house of apple2,但是卡在了它把_IO_wfile_jumps给清零了,然后根据house of apple的调用链,我就以为做不了,其实是我对这个地方的理解不深刻。 利用_IO_wfile_overflow函数控制程序执行流 对fp的设置如下: _flags设置为~(2 |

java学习记录12-爱代码爱编程

ArrayList方法总结 构造方法 ArrayList()         构造一个初始容量为 10 的空列表。 ArrayList(int initialCapacity)  构造一个具有指定初始容量的空列表。 实例方法 add(int index, E element)  在此list中的指定位置插入指定元素。 ArrayLis

代码随想录算法训练营第十三天(递归遍历;迭代遍历;统一迭代;层序遍历)-爱代码爱编程

递归遍历 LeetCode 144. 二叉树的前序遍历 题目链接:二叉树的前序遍历题目链接 代码 /** * Definition for a binary tree node. * public class T

首发vm手眼标定xml文件点位取出以及转其他格式-爱代码爱编程

首先放出xml文件:"h15.8r1.xml" <?xml version="1.0" encoding="UTF-8"?> <CalibInfo> <CalibInputParam> <CalibParam ParamName="CreateCalibTime" DataType="st

[c++]深入剖析list类中迭代器的封装-爱代码爱编程

list迭代器的封装 由浅入深:从底层设计开始分析1. 设计一个list类list类包括:iterator类和node类(节点类)iterator类不具有const的性质 2.如何让迭代器具有const

freertos——列表及列表项-爱代码爱编程

目录 一、概念及其应用 1.1列表List_t 1.2列表项ListItem_t 1.3迷你列表项MiniListItem_t 二、相关API 三、实现原理 3.1列表初始化 3.2列表项初始化 3.3插入列表项 3.4尾插列表项 3.5列表项的删除 3.6列表的遍历 一、概念及其应用 作为多任务的核心,列表和列表项