react deploy in local net work

2B site！应用方向nich，同时有保密性需求

deploy 方式！

目标，在局域网内部选择一台pc做server！

结构：前段是React + Vite + TS，后端用django

local 测试，基本上可用！存在bug，但是可以边改变用！先上线再说！

logic

1. 前后端分别局域网可访问！

2. react改从ip 访问，不从local访问django

code：

第一步：配置 Django 后端

1. 修改 settings.py

# 允许所有 IP 访问（或者写具体的局域网 IP）
ALLOWED_HOSTS = ['*', '192.168.1.100', 'localhost', '127.0.0.1']
​
# 跨域配置也要增加局域网 IP
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "http://127.0.0.1:5173",
    "http://192.168.1.100:5173", # 允许前端局域网地址
]

2. 启动后端：必须指定 0.0.0.0，这样它才会监听局域网请求。

python manage.py runserver 0.0.0.0:8000

第二步：配置 React 前端

1. 修改 index.tsx 中的 API 地址： 你不能再用 localhost 了，因为当同事访问你的网页时，localhost 指的是他自己的电脑。必须改成你的局域网 IP。

   // index.tsx
   // 将原本的 localhost 改为你的局域网 IP
   const API_URL = 'http://192.168.1.100:8000/api/officers/';

2. 让前端开发服务器支持局域网访问： 修改 package.json 中的 scripts 部分，在 dev 后面加上 --host。

   codeJSON

   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   }

3. 更改api.tsx：

   const API_URL = 'http://192.168.1.100:8000/api'; // Django 地址
   从F12里看问题！

4. 启动前端：

   codeBash

   npm run dev

   启动后，命令行会显示类似 Network: http://192.168.1.100:5173/ 的地址。

第三步：开放防火墙（最重要）

1. 在 Windows 搜索框输入 “高级安全 Windows Defender 防火墙” 并打开。

2. 点击左侧的 “入站规则” (Inbound Rules)。

3. 点击右侧的 “新建规则...” (New Rule)。

4. 选择 “端口” (Port)，点击下一步。

5. 选择 TCP，在“特定本地端口”输入：8000, 3000, 5173（用逗号隔开），点击下一步。

6. 选择 “允许连接” (Allow the connection)，点击下一步。

7. 把 “域”、“专用”、“公用” 全部勾选上，点击下一步。

8. 名称随便起，比如 Police_System，点击完成。

潜在的问题：

用sqlite做db，多用户，数据误操作，更新不一致！