nginx如何部署web项目：分两类配置落地

nginx如何部署web项目分为静态文件直接托管、反向代理转发后端服务两种方案，纯前端Vue/React打包产物选用静态托管，SpringBoot、Node.js后端项目选用反向代理；部署前要先完成nginx安装、开放服务器80端口、关闭防火墙，仅适用于LinuxCentOS7、Ubuntu20.04主流服务器环境，Windows桌面版nginx配置路径不一致，不能直接套用这套配置。

nginx如何部署web项目：前期准备

你先执行安装命令，CentOS系统用yuminstallnginx，Ubuntu系统用aptinstallnginx；安装完成后输入nginx-t校验配置语法，避免配置出错导致服务启动失败；接着把项目文件上传到服务器自定义目录，例如/data/www，同时修改目录权限，执行chown-Rnginx:nginx/data/www，防止出现文件无权限访问的403报错。

配置文件默认存放于/etc/nginx/conf.d/目录，新建独立配置文件，不要直接修改nginx主配置文件，方便后续多站点维护。

nginx如何部署web项目：静态前端项目配置

静态项目包含HTML、JS、CSS、图片资源，nginx直接读取本地文件返回给浏览器，不需要启动后端服务。

在配置文件内写入server监听端口、网站根目录、首页文件；单页前端项目必须增加try_files规则，避免刷新页面出现404错误。

完整配置示例：server{listen80;server_name你的域名;root/data/www/dist;indexindex.html;location/{try_files$uri$uri//index.html;}}

nginx如何部署web项目：后端动态项目反向代理配置

SpringBoot、Node这类项目会先在服务器启动端口服务，nginx接收外网请求后转发给本地端口，对外只暴露80端口，提升安全性。

核心指令为proxy_pass，后面填写本地服务地址；同时补充请求头参数，保证后端可以获取到客户端真实IP地址。

完整配置示例：server{listen80;server_name你的域名;location/{proxy_passhttp://127.0.0.1:8080;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;}}

两种部署方案对比

nginx如何部署web项目：启动与排错

保存配置后执行systemctlreloadnginx平滑重启服务，不用中断现有访问；打开浏览器输入域名或者服务器公网IP即可访问项目。

最常见故障：出现403大概率是文件夹权限不足；出现502代表后端服务没有正常启动或者端口填写错误；出现404是网站根目录路径填写有误。

Windows系统下nginx不支持systemctl命令，只能用exe程序启停，这是本条方案的适用边界，不要把Linux配置直接复制到Windows环境运行。