做前端开发，写完一个 React 应用后最期待的就是让它跑在服务器上，让别人能访问。可一提到部署，不少人就开始犯怵——到底怎么把本地项目变成线上网页？其实没那么复杂，掌握几种常见方式，几分钟就能搞定。
先打包，再部署
React 项目开发时用 npm start 启动的是开发服务器，带热更新和调试功能，不能直接用于生产。正式部署前，得先把项目打包成静态文件。执行下面命令：
npm run build执行完后，项目根目录会生成一个 build 文件夹，里面包含了所有 HTML、CSS 和 JavaScript 文件，这些就是可以直接扔到服务器上的内容。
用 Vercel 快速部署
Vercel 是部署 React 应用最省事的方式之一，特别适合个人项目或小团队。注册账号后，关联 GitHub 仓库，新建项目时选中你的 React 仓库，Vercel 会自动运行 npm run build 并上传构建结果。
比如你做个简历页面或者作品集，代码推到 GitHub 后，Vercel 几分钟内就能给你一个类似 your-site.vercel.app 的地址，直接分享出去就行。
部署到 Netlify
Netlify 和 Vercel 类似，操作也简单。打开官网，拖拽 build 文件夹进去，或者连接 GitHub 自动部署。它会提示你设置构建命令和输出目录，填上 npm run build 和 build 就行。
有个小细节：如果用了 React Router 做前端路由，记得在项目根目录加个 _redirects 文件，内容写上：
/* /index.html 200这样刷新页面才不会出现 404。
自己买服务器？Nginx 部署也很常见
如果你有自己的云服务器，比如阿里云 ECS 或腾讯云 CVM，可以用 Nginx 托管静态文件。先把打包好的 build 文件夹传到服务器，比如放在 /var/www/react-app。
然后编辑 Nginx 配置文件：
server {
listen 80;
server_name your-domain.com;
root /var/www/react-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}保存后重启 Nginx：sudo systemctl restart nginx，打开浏览器输入域名，就能看到你的 React 页面了。
GitHub Pages 免费托管
适合学习项目或内部工具。先在项目中安装 gh-pages：
npm install gh-pages --save-dev然后在 package.json 里加两个字段：
"homepage": "https://your-username.github.io/your-repo-name",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}最后运行 npm run deploy，几秒钟后就能通过 GitHub 提供的地址访问了。
不同场景适合不同方法。想快就用 Vercel 或 Netlify，要控制权就上 Nginx，练手项目扔 GitHub Pages 完全够用。关键是动手试一遍，下次再部署心里就有底了。