React新手咨询：如何通过FTP完成React网站的部署上线

前置准备 #

• 本地可正常运行的React项目（Create React App、Vite等脚手架搭建的项目均适用）
• 已开通FTP服务的主机/服务器，提前获取FTP服务器地址、FTP账号、FTP密码，以及网站对应的服务器根目录路径（常见名称为public_html、wwwroot，可联系主机服务商确认）
• 本地已安装FTP客户端，可选择FileZilla等通用工具，也可使用代码编辑器自带的FTP插件

第一步：本地打包构建静态资源 #

React项目源码无法直接在服务器运行，需要先打包编译为浏览器可识别的静态文件：

• 若使用Create React App搭建项目：
  打开项目根目录的终端，执行命令：npm run build
  命令执行完成后，项目根目录会生成build文件夹，内部即为所有待部署的静态资源
• 若使用Vite搭建项目：
  先打开项目根目录的vite.config.js（或vite.config.ts），调整base配置项：如果部署到域名根目录，设置为base: '/'；如果部署到域名子目录（例如https://你的域名.com/demo），设置为base: '/demo/'
  配置完成后在项目根目录终端执行命令：npm run build
  命令执行完成后，项目根目录会生成dist文件夹，内部即为所有待部署的静态资源

注意：打包前请将所有本地调试用的接口地址替换为线上正式接口地址，避免部署后接口请求失败

第二步：通过FTP上传文件到服务器 #

1. 打开FTP客户端，填入FTP服务器地址、账号、密码，端口默认填21（如有特殊要求按主机商说明填写），点击连接服务器
2. 连接成功后，在FTP客户端的本地文件区域，找到刚才生成的build或dist文件夹
3. 进入该文件夹，全选文件夹内部的所有文件和子文件夹（不要直接上传build/dist文件夹本身）
4. 在FTP客户端的服务器文件区域，进入网站对应的根目录（例如public_html），将刚才选中的所有本地文件拖拽到服务器根目录中，等待全部文件上传完成即可

第三步：验证部署结果 #

文件上传完成后，直接在浏览器输入你的域名即可访问React站点；如果部署在子目录，输入域名/对应子目录路径访问即可。

常见问题排查 #

• 访问站点时刷新页面出现404：
  这是React单页应用的路由特性导致的，需要添加服务器重定向规则：
  • Nginx服务器：在站点配置文件中添加如下规则

    location / {
      try_files $uri $uri/ /index.html;
    }
    

  • Apache服务器：在网站根目录新建.htaccess文件，写入如下内容后上传到服务器即可

    <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteBase /
      RewriteRule ^index\.html$ - [L]
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule . /index.html [L]
    </IfModule>
    

• 访问站点显示空白，控制台提示静态资源404：
  先检查打包时的base配置是否和实际部署的路径匹配，再确认服务器根目录下存放的是build/dist文件夹内部的文件，没有多套一层build/dist目录。

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