当前位置：首页 > news >正文

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

news 2026/5/11 21:37:52

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 build

2. 在服务器上安装 Nginx

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

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

3 . 上传你的项目代码

回到远程桌面（服务器）。
进入 C:\nginx-1.28.1\html 文件夹。
新建一个文件夹，命名为 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。
- 策略：允许。
保存规则。