记录自己第一次将React 编写的前端部署到服务器，实现外网访问

0.  本地项目添加配置

1. 在本地 VS Code 打开项目。
2. 打开根目录下的 vite.config.js 文件。

在 plugins 同级的位置，添加一行 base 配置：

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], base: '/delayed-coking-demo/', // <--- 加上这一行，注意前后都有斜杠 })

1. 在你的开发电脑（本地）VS Code 终端运行，确保根目录下生成了dist 文件夹。

npm run build

2. 在服务器上安装 Nginx

在远程桌面的那个 Windows 里操作（就像操作你自己的电脑一样）：

1. 下载 Nginx：
   • 打开服务器里的 Edge 浏览器（或者你在本地下载好，复制粘贴进去）。
   • 访问：http://nginx.org/en/download.html
   • 下载 Stable version 下面的 nginx/Windows-1.xx.x (zip格式)。
2. 解压：
   • 将下载的压缩包解压到 C 盘根目录，例如：C:\nginx。
   • 打开这个文件夹，你会看到 nginx.exe 和 conf, html 等文件夹。

3 . 上传你的项目代码

1. 回到远程桌面（服务器）。
2. 进入 C:\nginx-1.28.1\html 文件夹。
3. 新建一个文件夹，命名为 delayed-coking-demo。
4. 把你刚刚重新打包生成的本地 dist 文件夹里面的所有内容（index.html, assets 等），复制粘贴到服务器的这个新文件夹里。

4. 修改 Nginx 配置 (解决路由刷新 404)

worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; # --- 这里开始是 Server 配置 --- server { listen 80; server_name localhost; # 1. 默认根目录 (访问 http://ip 时显示的内容) # 只要 html 文件夹里有 index.html，这里就会显示 location / { root html; index index.html index.htm; } # 2. 你的新项目 (访问 http://ip/delayed-coking-demo 时显示) # 请确保你已经在 html 文件夹里新建了 delayed-coking-demo 文件夹 # 并把 build 好的代码放进去了 location /delayed-coking-demo { root html; index index.html; # 这里的路径必须和你的 base 保持一致 try_files $uri $uri/ /delayed-coking-demo/index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # --- Server 配置结束 --- }

5 . 启动 Nginx

1. 在服务器文件夹里，双击 nginx.exe。
   • 注意：双击后屏幕会闪一下黑框然后消失，这是正常的！它已经在后台运行了。
   • 如果有防火墙弹窗，请点击“允许访问”。
2. 验证是否运行：打开服务器里的 Edge 浏览器，访问 http://localhost。如果能看到你的延迟焦化系统，说明服务器内部部署成功了

6 . 最关键的一步 —— 阿里云安全组配置

这是新手最容易卡住的地方。即使服务器里配置好了，阿里云的外部防火墙如果不放行，外网还是进不去。

1. 回到你的阿里云网页控制台（就是你截图的那个页面）。
2. 点击页面中间的选项卡 “网络与安全组”。
3. 找到 “安全组配置” 或 “配置规则” 链接点击进入。
4. 点击右上角的 “添加安全组规则”（或手动添加）：
   • 端口范围：输入 80/80 (或者是 HTTP 80)。
   • 授权对象 (源 IP)：输入 0.0.0.0/0 (表示允许全世界访问)。
   • 协议类型：TCP。
   • 策略：允许。
5. 保存规则。

7.  外网， 输入 http://公网ip/delayed-coking-demo ，就可以访问到项目了