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

0. 本地项目添加配置

1. 在本地 VS Code 打开项目。

2. 打开根目录下的 vite.config.js 文件。

3. 在 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 ，就可以访问到项目了