本地Nginx部署React前端项目浅尝_nginx react-优快云博客

文章介绍了如何在Windows上下载并配置Nginx，包括启动、关闭和重启命令。接着讲解了如何将React打包后的文件放入Nginx的HTML目录，并调整Nginx配置文件以支持前端路由。在配置中，强调了正确设置根目录以避免404错误的重要性，并给出了处理路由和后台API代理的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nginx 下载

在这里插入图片描述
根据上面的版本找到适合自己的 nginx版本，我目前是环境是 windows，所以下载 稳定版本。

nginx命令

在下载的nginx目录下打开以管理员身份打开命令控制面板。

# nginx启动
nginx.exe

# nginx关闭
nginx.exe -s stop

# nginx重启
nginx.exe -s reload

注意：特别说明的是nginx启动后不能再里面运行其他命令，需要新开一个命令窗口输入。

示例：

项目启动
项目重启
项目停止

react打包文件放置

将 Vue 或者 React 打包后的 dist (根据自己的需求) 文件拷贝到 nginx -> html 目录下。

nginx 配置

打开 nginx 根目录下的 conf -> nginx.conf 文件（打开方式不限）
具体配置

server {
	# 配置端口号
    listen       8888;
    
    # 配置服务名称
    server_name  localhost;

	# 配置路由
    location / {
        # 配置根目录
        root   D:/My_TEST/nginx-1.24.0/html/dist;
        
        # 配置访问入口文件
        index  index.html index.htm;
        
        # 配置Vue或者React路由，如果不配置，不能匹配到前端项目中的路由，可能会报404
        try_files $uri $uri/ /index.html;
        
        # 如果想要在端口号后面配置前缀名称, 例：pc, 访问路径为：www.xxxx.com/pc/aaa(aaa为前端路由)
        try_files $uri $uri/ /pc/index.html;
    }
    
    # 调用了多少个后台地址，就配置多少
    location ^~ /api/ {
  		proxy_pass   '接口请求后端地址';
    }

}