使用 Nginx 部署 React 前端项目并实现外网访问

1. 本地项目配置

在本地开发环境中打开项目，编辑根目录下的 vite.config.js 文件。 在 plugins 同级位置添加 base 配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/delayed-coking-demo/', // 注意前后都有斜杠
})

2. 本地打包项目

在 VS Code 终端运行以下命令，确保根目录下生成 dist 文件夹：

npm run build

3. 服务器安装 Nginx

在 Windows 服务器环境下操作：

1. 下载 Nginx：访问官网下载 Stable version 的 zip 格式压缩包。
2. 解压：将压缩包解压到 C 盘根目录，例如 C:\nginx。
3. 确认目录结构：包含 nginx.exe 以及 conf, html 等文件夹。

4. 上传项目代码

1. 进入 C:\nginx\html 文件夹。
2. 新建文件夹，命名为 delayed-coking-demo。
3. 将本地生成的 dist 文件夹内的所有内容复制粘贴到服务器的新文件夹中。

5. 修改 Nginx 配置

编辑 nginx.conf 文件，解决路由刷新 404 问题。配置如下：

worker_processes 1;
events {
    worker_connections 1024;
}
http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name localhost;

        # 默认根目录
        location / {
            root html;
            index index.html index.htm;
        }

        # 新项目配置
        location /delayed-coking-demo {
            root html;
            index index.html;
            try_files $uri $uri/ /delayed-coking-demo/index.html;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }
}

6. 启动 Nginx

1. 在服务器文件夹中双击 。