适用人群
这篇教程,不是写给那些已经在代码海里扑腾多年的老鸟看的，它适合你——一个刚把React官方文档啃完，能写出useState和useEffect，但看着“部署”“服务器”“域名”这些词就头皮发麻的准前端，也适合那些被“Next.js”和“Vite”搞晕，只想快速上线一个产品展示页的独立开发者，如果你还没装Node.js，先花十分钟装好LTS版本，我们接着往下走。
第一步：从“本地跑通”到“可部署的构建产物”
你现在的npm run dev启动的开发服务器，只属于你的电脑，建站第一步，是生成生产环境构建，在项目根目录打开终端，敲下：
从零到一，用React从白纸到上线，手把手搭一个能扛住流量的企业官网
npm run build
这段命令会调起React的打包工具（通常是Craco或Vite），把JSX、ES6甚至CSS压缩成几个静态文件，完成后，你会看到一个build（或dist）文件夹，里面是index.html、static/js/和static/css/。这个文件夹就是你的整个网站，之后我们所有操作，都是围绕如何让全世界访问到这几个文件。
你可能会踩到第一个坑：路由消失，如果你用了React Router的BrowserRouter，直接打开build/index.html会发现白屏或404，因为/about这个路径在真实服务器上并不存在，你需要一个后端路由重定向，解决方法是：要么改用HashRouter（URL里带，丑但省事），要么我们在服务器软件里配置“所有请求都指向index.html”，我会在第三步教后者，这是专业做法。
第二步：买域名与挑一台“不折腾”的服务器
域名：去阿里云或Cloudflare买一个.com，别贪便宜选小众后缀，搜索引擎不认。解析：在域名控制台加一条A记录，主机记录填，记录值填你服务器的公网IP（下一步会拿到），设TTL为600秒，方便改错后快速生效。
服务器：新手绝不要去碰“虚拟主机”，它跑不了Node服务，选一台云服务器（VPS），配置2核2G起步，带宽3M就够，系统镜像优先选Ubuntu 22.04 LTS——因为它自带apt包管理器，装软件最稳，拿到服务器后，先做一件事：改SSH默认端口和禁止root密码登录，用密钥登录，别嫌麻烦——你的服务器只要暴露公网，三小时内就会有爆破脚本在扫描22端口。
第三步：选对“面板”，别自己敲nginx命令
虽然我是老派运维,但我建议你用宝塔面板（BT Panel），别鄙视它，它能让你少掉一半头发，安装命令（Ubuntu）在官网复制粘贴执行，大概等两分钟，装好后，登录面板，你看到的是图形化界面——这就是你的“方向盘”。
配置要点：
- 在“软件商店”安装：Nginx（不用Apache）、PM2管理器（用来守护你的Node进程）、MySQL（如果你有表单提交，先装上）。
- 添加站点：在“网站”->“添加站点”里，填你的域名（注意不带
www，先只配裸域），PHP版本选择“纯静态”，因为React就是纯静态文件。 - 上传代码：点击该站点的“根目录”，把
build文件夹里的所有内容（注意是内部内容，不是build文件夹本身）拖拽上传到/www/wwwroot/你的域名/下。 - 关键一步：站点设置 -> “配置文件”，找到
location /这个大括号块，把里面的try_files行改成：
try_files $uri $uri/ /index.html;
这行代码就是解决第一步说的404问题,它告诉Nginx：如果找不到真实文件，就返回index.html，让前端路由接管。
第四步：用PM2跑一个“后台服务”（如果你有API）
如果你的React站里有登录、留言等需要动态数据的操作，那就不能只放静态文件，你还需要一个Node后端（比如Express），本地写好服务后，上传到服务器任意目录（比如/root/api），然后在宝塔里找到“PM2管理器”，点击“添加项目”，启动文件选择server.js，启动参数留空，点击确定。注意：服务端口别用80，用3001，然后在Nginx站点配置里加一条反向代理：
location /api/ {
proxy_pass http://127.0.0.1:3001;
}
这样,前端请求/api/login，Nginx会转给Node处理，而浏览器地址栏还是你的域名，不会暴露内网端口。
第五步：上线前的最后防线
HTTPS：在宝塔站点设置里，点击“SSL”，选择“Let's Encrypt”，勾选你的域名，自动签发证书，务必开启“强制HTTPS”，这不仅是安全，更是Google排名的加分项。
缓存：在站点设置 -> “性能调优”中，开启“Nginx缓存”和“浏览器缓存”里的“Expires”，但注意：缓存时间别设太长，index.html设30秒，JS/CSS文件设置7天，否则你以后改代码用户看不到更新。
踩坑提醒：
- 域名解析改了,但怎么等都不生效？去本地
ping 你的域名，如果IP不对，多半是你本地DNS缓存，直接ipconfig/flushdns。 - 上传了很久,访问还是宝塔默认页？99%是
build文件没放到根目录，或者放成了子文件夹。 - 白屏,F12看到
Failed to load module script？这是路径问题，检查index.html里的<script src="/static/js/main.js">，如果打包配置里publicPath是，你需要把Nginx的root路径指到build的上一级，或重新打包时设置"homepage": "."（此招在Vite里有效）。
不要怕“线上崩溃”
上线后第一个晚上,你可能会失眠，反复刷新看有没有报错。网站崩了不可怕，可怕的是你不会看日志，宝塔面板的“日志”选项卡里，有Nginx错误日志，看见connect() failed (111: Connection refused)，就是Node服务挂了，去PM2重启；看见404 Not Found，就是你的路由写错了。
从今天起,你不再只是一个写组件的开发者，当你在手机浏览器里，用4G网络敲下自己的域名，看到那熟悉的界面毫秒级弹出时，你会明白：React键站，建的不是代码，是打通虚拟与现实的自信。
去把你的作品昭告天下吧,有问题，回来翻这篇，或者直接打我一顿——反正你手里的键盘已经启动了。
发表评论