记录自己第一次将React 编写的前端部署到服务器，实现外网访问
0. 本地项目添加配置
- 在本地 VS Code 打开项目。
- 打开根目录下的
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 build2. 在服务器上安装 Nginx
在远程桌面的那个 Windows 里操作（就像操作你自己的电脑一样）：
- 下载 Nginx：
- 打开服务器里的 Edge 浏览器（或者你在本地下载好，复制粘贴进去）。
- 访问：
http://nginx.org/en/download.html - 下载 Stable version 下面的
nginx/Windows-1.xx.x(zip格式)。
- 解压：
- 将下载的压缩包解压到 C 盘根目录，例如：
C: ginx。 - 打开这个文件夹，你会看到
nginx.exe和conf,html等文件夹。
- 将下载的压缩包解压到 C 盘根目录，例如：
3 . 上传你的项目代码
- 回到远程桌面（服务器）。
- 进入
C: ginx-1.28.1html文件夹。 - 新建一个文件夹，命名为
delayed-coking-demo。 - 把你刚刚重新打包生成的本地
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
- 在服务器文件夹里，双击
nginx.exe。- 注意：双击后屏幕会闪一下黑框然后消失，这是正常的！它已经在后台运行了。
- 如果有防火墙弹窗，请点击“允许访问”。
- 验证是否运行：打开服务器里的 Edge 浏览器，访问
http://localhost。如果能看到你的延迟焦化系统，说明服务器内部部署成功了
6 . 最关键的一步 —— 阿里云安全组配置
这是新手最容易卡住的地方。即使服务器里配置好了，阿里云的外部防火墙如果不放行，外网还是进不去。
- 回到你的阿里云网页控制台（就是你截图的那个页面）。
- 点击页面中间的选项卡 “网络与安全组”。
- 找到 “安全组配置” 或 “配置规则” 链接点击进入。
- 点击右上角的 “添加安全组规则”（或手动添加）：
- 端口范围：输入
80/80(或者是 HTTP 80)。 - 授权对象 (源 IP)：输入
0.0.0.0/0(表示允许全世界访问)。 - 协议类型：TCP。
- 策略：允许。
- 端口范围：输入
- 保存规则。
