使用FileZilla部署React项目：build文件夹位置及后续步骤疑问

一、定位build文件夹 #

• 用Create React App初始化的项目，npm run build执行完后，build文件夹默认就在项目根目录下，和src、public是同级的
• 要是你改过webpack配置（比如自定义了输出路径），可以打开项目根目录的package.json看scripts里的build命令关联的配置，或者搜项目里的webpack.config.js，找output.path字段确认具体位置

二、后续部署步骤 #

1. 本地先测一测（可选） #

先确认build包没问题：

• 装个静态文件服务器serve：npm install -g serve
• 进到项目根目录，跑serve -s build，然后访问命令里给的本地地址（一般是http://localhost:3000），看页面能不能正常打开

2. 部署到Nginx服务器 #

• 把build文件夹里所有文件传到服务器的指定目录，比如/usr/share/nginx/html
• 打开Nginx配置文件（通常在/etc/nginx/nginx.conf或者/etc/nginx/sites-available/default），把root字段改成你上传的build目录，再加个路由重写解决刷新404：

location / {
  root /usr/share/nginx/html;
  try_files $uri $uri/ /index.html;
}

• 重启Nginx：sudo systemctl restart nginx

3. 部署到静态托管平台 #

• 直接上传build文件夹到平台的静态托管服务，或者关联你的Git仓库，平台会自动跑npm run build并部署生成的build内容
• 记得配置平台的SPA路由规则，确保单页应用的路由跳转正常（大部分平台都有现成的SPA配置选项）

内容的提问来源于stack exchange，提问作者crvxッ