1. 从本地跑通到公网可访问中间差的不只是上传很多人第一次把前后端项目在本地跑通之后都会产生一种错觉既然localhost:3000和localhost:8080都能正常访问那把它放到服务器上应该也就是复制粘贴的事。我当初也是这么想的结果第一次部署折腾了整整一个周末踩的坑从端口没放行、到前端请求后端跨域、再到静态资源 404几乎把能犯的错都犯了一遍。这篇内容就是把我自己反复部署前后端项目的过程完整梳理出来。核心思路是用宝塔面板作为服务器运维的可视化入口把环境安装、站点配置、反向代理、进程守护这几件事串成一条线。适合两类人看一类是刚买完服务器、手里有一个前端加一个后端项目、想让别人通过域名访问的新手另一类是用过命令行但觉得每次配 Nginx 都要查文档、想找个更省心方式的开发者。需要先明确一个前提宝塔面板本质上是一个服务器管理面板它帮你把 Linux 命令行里那些繁琐的操作装 Nginx、装数据库、配 SSL、看日志变成了图形界面点击。它不改变底层逻辑所以理解它背后做了什么比记住点哪个按钮更重要。下面我会把每一步为什么这么做讲清楚这样你换一台服务器、换一个项目照样能自己搞定。在正式开始之前先看一下整个部署链路涉及的核心组件心里有个全局图组件作用常见选择Web 服务器接收 HTTP 请求、分发静态文件、转发动态请求Nginx后端运行时执行后端代码Node.js / Python / Java / PHP进程守护保证后端挂了能自动拉起PM2 / Supervisor / systemd数据库存储业务数据MySQL / PostgreSQL / Redis面板可视化管理以上所有宝塔面板这张表建议先记住后面每一步操作其实都是在配置其中某一项。2. 服务器与面板的准备工作别急着装环境2.1 服务器选型与系统版本的一个小取舍部署前后端项目服务器配置不用一上来就拉满。一个普通的前后端分离项目2 核 2G 内存起步基本够用如果后端是 Java 或者要跑数据库加缓存建议 2 核 4G 更稳。系统方面我实测下来Ubuntu 22.04和CentOS 7.x是宝塔兼容性最好的两个选择新手优先选 Ubuntu软件源更新、依赖冲突少。这里有个容易被忽略的点服务器地域和你的目标用户越近越好。如果你只是自己测试或者给身边人用选一个延迟低的节点就行如果是正式对外尽量选靠近主要访问群体的区域。这个决定会影响后面所有访问体验值得花五分钟想清楚。买完服务器后你会拿到公网 IP、root 密码或密钥。先用 SSH 工具连上去确认能正常登录。这一步如果卡住后面全都免谈所以务必先跑通。2.2 宝塔面板安装一行命令背后的东西宝塔的安装本质上就是执行一段官方提供的脚本。以 Ubuntu 为例登录服务器后执行对应的安装命令具体命令以宝塔官网当前版本为准因为脚本地址会随版本更新。执行过程中它会问你确认输入y回车然后等待几分钟。安装完成后终端会输出面板的访问地址、用户名和密码这三样东西一定要立刻复制保存下来尤其是初始密码关掉终端就找不回来了虽然可以重置但麻烦。提示安装脚本会顺带装好面板运行所需的基础依赖但不会自动帮你装 Nginx、数据库这些那些要在面板里手动选。所以别以为装完面板就万事大吉。装完之后还有一步必须做在服务器的安全组或防火墙里放行面板端口。默认是8888但很多云服务商默认只开放 22、80、443。如果没放行你在浏览器里根本打不开面板。这一步是新手第一个高频卡点我见过太多人卡在这里以为面板装失败了。放行之后浏览器输入http://你的服务器IP:8888用刚才的用户名密码登录第一次进去会让你绑定账号并选择要安装的软件套件。这里推荐选LNMPNginx MySQL PHP或者如果你后端是 Node.js就选 Nginx MySQL 即可PHP 可以不装。安装过程比较久泡杯茶等着。2.3 安全组端口规划一次配好省得反复折腾在正式部署前把需要用的端口一次性规划清楚能省掉后面反复改配置的麻烦。我一般会这样安排80HTTP 默认端口必须开443HTTPS 端口配 SSL 后要用建议提前开8888宝塔面板端口开后端服务端口如 3000、8080不要对公网开放只让 Nginx 在本机转发访问3306数据库端口绝对不要对公网开放只允许本机连接最后两条是安全底线。很多新手图省事把数据库端口开到公网结果没几天就被扫描到、被尝试爆破。数据库只在本机用就只监听127.0.0.1这是最基本的安全习惯。3. 前端项目的部署静态文件到底该放哪3.1 打包产物与站点根目录的对应关系前端项目无论是 Vue、React 还是纯静态页面部署的核心就一句话把打包后的静态文件放到一个目录然后让 Nginx 指向这个目录。以常见的 Vue/React 项目为例先在本地执行打包命令npm run build执行完会生成一个dist目录有的脚手架是build里面是index.html加一堆 js、css、图片。这个dist目录里的全部内容就是要上传到服务器的东西。在宝塔面板里进入网站菜单点击添加站点。域名填你的域名没有域名就填服务器 IP根目录它会自动生成一个路径比如/www/wwwroot/你的域名。创建完成后把dist里的文件全部上传到这个根目录下。这里有个细节上传的是 dist 里面的内容不是 dist 这个文件夹本身。也就是说根目录下应该直接能看到index.html而不是dist/index.html。这个层级搞错访问就会 404是新手非常容易犯的错。3.2 单页应用刷新 404 的根因与修复前端如果是单页应用SPA路由是前端控制的。你在首页点来点去没问题但一旦在某个子路由页面按 F5 刷新Nginx 会真的去服务器上找那个路径对应的文件找不到就返回 404。解决办法是配置一条回退规则所有找不到的路径都返回index.html交给前端路由处理。在宝塔站点设置里找到配置文件在server块里加上location / { try_files $uri $uri/ /index.html; }这行的意思是先找对应的文件再找目录都没有就返回index.html。加完保存Nginx 会自动重载刷新 404 的问题就解决了。注意如果你的项目不是 SPA而是多页面那这条规则要慎用否则真实存在的 404 也会被吞掉。判断标准很简单路由是不是前端控制的。3.3 前端请求后端的地址该怎么写这是前后端分离部署里最容易出问题的一环。前端代码里请求后端的地址在本地开发时可能是http://localhost:8080但部署到服务器后这个地址对用户浏览器来说是无效的——因为localhost指的是用户自己的电脑。正确做法有两种第一种前端请求走相对路径比如/api/user然后由 Nginx 把/api开头的请求转发到后端。这种方式最干净也最推荐因为它天然避开了跨域问题。第二种前端写完整的后端域名比如https://api.你的域名.com然后后端配置 CORS 允许跨域。这种方式配置更繁琐还容易出安全漏洞。我一般用第一种。具体就是在 Nginx 配置里加一段反向代理location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; }这样浏览器请求你的域名/api/userNginx 在服务器内部转发给127.0.0.1:8080用户完全感知不到后端端口跨域问题也不存在。4. 后端项目的运行与守护让它一直活着4.1 后端代码上传与依赖安装后端项目上传的位置我习惯单独放一个目录比如/www/wwwroot/backend和前端站点目录分开避免混淆。上传方式可以用宝塔的文件管理器直接拖拽也可以用 Git 拉取。上传后要装依赖。以 Node.js 项目为例先在宝塔的软件商店里安装 Node.js 版本管理器选一个和你项目匹配的版本看package.json里的engines字段或本地开发用的版本。装好后进入项目目录执行npm install --production--production表示只装生产依赖跳过测试和构建工具能减小体积、加快安装。如果是 Python 项目就是pip install -r requirements.txtJava 项目则是打包成 jar 后直接运行。4.2 用 PM2 守护 Node 进程的完整配置后端进程如果直接用node app.js启动一旦你关掉 SSH 窗口进程就没了就算用nohup挂后台进程崩了也不会自动重启。所以需要一个进程守护工具Node.js 生态里最常用的就是 PM2。先全局安装npm install -g pm2然后在项目目录下用 PM2 启动pm2 start app.js --name my-backend--name给进程起个名字方便后面管理。启动后可以用pm2 list查看状态pm2 logs my-backend看实时日志pm2 restart my-backend重启。关键的一步是设置开机自启否则服务器重启后后端不会自动起来pm2 startup pm2 savepm2 startup会输出一条命令复制执行它然后pm2 save保存当前进程列表。这样服务器重启后 PM2 会自动拉起你的后端。提示PM2 默认的日志文件会一直增长时间长了可能把磁盘占满。建议在 PM2 配置里加上日志轮转或者定期清理~/.pm2/logs目录。这个坑我是被磁盘告警教育过之后才记住的。4.3 后端端口只监听本机的重要性后端服务启动时尽量让它只监听127.0.0.1而不是0.0.0.0。区别在于监听0.0.0.0意味着公网可以直接访问这个端口监听127.0.0.1则只有本机的 Nginx 能转发过去。以 Node.js 为例app.listen(8080, 127.0.0.1, () { console.log(server running); });这样即使安全组不小心开了 8080外部也连不上多一层保护。所有外部请求统一从 Nginx 的 80/443 进来再由 Nginx 转发流量入口收敛安全性和可维护性都更好。5. 反向代理与域名访问的打通5.1 反向代理配置的逐行解读前面提到前端请求/api要转发到后端这段配置值得展开讲清楚因为它是整个部署的关节。location /api/ { proxy_pass http://127.0.0.1:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }逐行看proxy_pass是转发目标注意结尾的斜杠——/api/配http://127.0.0.1:8080/请求/api/user会被转发成/user如果目标不写结尾斜杠就会变成/api/user。这个斜杠的有无会导致后端收到的路径不同是高频踩坑点。Host头保留原始域名后端如果根据域名做逻辑会用到。X-Real-IP和X-Forwarded-For把真实客户端 IP 传给后端否则后端日志里看到的全是127.0.0.1排查问题时很抓瞎。X-Forwarded-Proto告诉后端原始请求是 http 还是 https后端生成回调地址时会用到。5.2 域名解析与访问验证的顺序配置好之后把域名解析到服务器 IP。在域名服务商那里添加一条 A 记录主机记录填主域名或www记录值填服务器公网 IP。解析生效一般几分钟到几小时不等可以用ping 你的域名看是否指向了正确 IP。解析生效后浏览器访问域名应该能看到前端页面。然后打开浏览器开发者工具的 Network 面板触发一个后端请求看/api请求是否返回 200。如果返回 502说明 Nginx 连不上后端检查后端进程是否在跑、端口是否对如果返回 404检查proxy_pass的路径拼接如果前端页面白屏检查静态资源路径和try_files配置。这个看 Network 面板的习惯非常重要它能让你快速定位问题出在前端、Nginx 还是后端而不是盲目猜测。5.3 一个请求的完整旅程把上面这些串起来一个用户访问你项目的完整链路是这样的用户在浏览器输入域名DNS 解析到服务器 IP请求到达服务器的 80 端口Nginx 接收如果请求的是页面路径Nginx 返回index.html和静态资源如果请求的是/api/xxxNginx 转发给127.0.0.1:8080后端处理请求可能查数据库返回 JSONNginx 把 JSON 回给浏览器前端渲染理解这条链路出问题时你就能顺着链路一段段排查而不是干瞪眼。6. 上线前必须处理的几件事6.1 配置 HTTPS 与证书自动续期现在浏览器对 HTTP 站点会标记不安全正式项目建议上 HTTPS。宝塔面板里配置 SSL 非常方便进入站点设置找到 SSL 选项可以一键申请免费证书Lets Encrypt也可以上传自己买的证书。申请免费证书时记得勾选自动续期。免费证书有效期一般是 90 天不自动续期的话到期站点就打不开了而且往往是你最忙的时候出问题。我吃过这个亏后来所有站点都开了自动续期。配好 HTTPS 后建议再加一条 HTTP 跳转 HTTPS 的规则让所有访问都走加密通道if ($scheme http) { return 301 https://$host$request_uri; }6.2 数据库的备份与只读账号数据库是项目里最不能丢的东西。宝塔面板自带计划任务功能可以设置每天定时备份数据库到指定目录。建议同时开启备份到云存储如果面板支持这样即使服务器本身出问题数据还在。另外后端连接数据库不要用 root 账号。给项目单独建一个数据库用户只授予它需要的库的权限比如只给SELECT、INSERT、UPDATE、DELETE不给DROP、GRANT。这样即使代码有漏洞被利用损失也能控制在一定范围内。6.3 日志查看与常见故障速查部署完成后日常运维最常用的就是看日志。宝塔面板里每个站点都有日志入口Nginx 的错误日志在/www/wwwlogs/目录下后端日志用pm2 logs看。我整理了一个常见故障对照表遇到问题可以先查这个现象可能原因排查方向页面 404静态文件路径不对检查站点根目录是否有 index.html刷新 404SPA 未配回退加 try_files 规则接口 502后端没起来pm2 list 看进程状态接口 404代理路径拼接错检查 proxy_pass 结尾斜杠跨域报错未走代理或 CORS 没配前端改相对路径走 Nginx数据库连不上端口/账号/权限检查监听地址和用户权限磁盘满日志堆积清理日志、配轮转这张表基本覆盖了我部署过程中遇到过的绝大多数问题建议收藏。7. 我踩过的几个坑和对应的经验7.1 前端打包后接口地址写死的坑有一次我前端代码里把后端地址写死成了http://localhost:8080本地测试一切正常部署上去接口全挂。原因是用户浏览器里的localhost是用户自己的电脑不是服务器。后来我改成用环境变量区分开发和生产生产环境用相对路径/api问题彻底解决。经验就是前端代码里永远不要出现 localhost 作为生产环境的接口地址。用构建时的环境变量来切换是最稳妥的做法。7.2 后端进程莫名消失的排查过程有段时间后端服务隔几天就挂一次PM2 显示进程是errored状态。看日志发现是内存溢出。原因是后端有个定时任务处理大量数据时没做分批一次性把数据全读进内存。后来改成流式处理内存占用稳定了进程再没挂过。这件事让我意识到PM2 能帮你自动重启但不能帮你解决代码本身的问题。进程反复重启一定要去看日志找根因而不是重启了事。7.3 端口冲突导致的启动失败还有一次后端启动报EADDRINUSE意思是端口被占用。用lsof -i:8080一查发现是之前手动启动的一个进程没关干净。杀掉旧进程再启动就好了。所以每次改配置重启前先确认旧进程真的退出了不然会莫名其妙启动失败。7.4 关于面板安全的一点提醒宝塔面板本身也是一个对外服务面板端口暴露在公网是有风险的。建议做两件事一是把面板默认端口8888改成一个不常见的端口二是开启面板的访问限制比如只允许特定 IP 访问或者开启二次验证。这些在面板设置里都能找到花两分钟配一下安全性提升明显。8. 后续可以继续优化的方向项目跑起来只是第一步后面还有不少可以打磨的地方。比如给 Nginx 开启gzip 压缩能明显减小传输体积、加快页面加载给静态资源配置缓存策略让浏览器缓存 js、css、图片减少重复请求后端接口加限流防止被恶意刷数据库加索引提升查询速度。这些优化不需要一次做完可以等项目稳定运行后根据实际访问情况逐步加。我的习惯是先用最简配置把项目跑通然后观察一段时间哪里慢就优化哪里避免过度设计。部署这件事说到底就是把本地能跑翻译成公网能访问中间每一步都有它存在的理由。理解了这些理由你就不只是会点按钮而是真正掌握了把一个项目送上线的能力。这套流程我用了很多次换项目、换服务器都能复用希望对你也有用。
