从0到1部署前后端分离网站：小白也能看懂的保姆级指南
最近很多朋友私信问：“我写好了前后端代码，怎么放到服务器上让别人访问？”“Nginx、DNS这些词到底啥意思？”
作为过来人，特别懂这种“代码写完了，部署卡成狗”的痛。今天就用最直白的话，带小白们从头到尾走一遍前后端分离项目的部署全流程，从买服务器到上线访问，每个步骤都拆成“幼儿园级”操作，保证看完就能上手～
一、先搞懂3个“灵魂概念”
开始操作前，先记住这3个核心比喻，后面全程不迷路：
服务器：你租的“虚拟房子”，用来存放网站代码（相当于你家的物理空间）。
域名：你家的“门牌号”（比如 www.xxx.com ），方便别人记住，不用记复杂的服务器IP（类似不用记“XX街38号”，记“老王家”就行）。
Nginx：站在你家门口的“接待员”，负责把访客（用户）引导到正确的房间（前端页面或后端接口）。
二、准备工作
部署网站的第一步，是准备好存放代码的“硬件”，就像开店前要先租店面、挂招牌一样。
1. 买一台“虚拟房子”（服务器）
推荐新手用腾讯云轻量应用服务器（性价比高，操作简单）：
打开腾讯云官网，搜索“轻量应用服务器”，选1核2G内存的入门配置（足够新手练手），系统选“Linux（CentOS）”。
付款后，在“控制台”里能看到服务器的公网IP（比如 123.45.67.89 ，这是服务器的“数字门牌号”）。
2. 选一个“门牌号”（域名）
还是腾讯云，搜索“域名注册”，选一个好记的域名（比如 xxx.com ，每年几十块），记得完成实名认证（国内服务器必须）。
重点：域名和服务器要在同一家平台买，后面操作更方便
三、装一个“智能管家”（宝塔面板）
服务器买回来是“毛坯房”，需要一个工具帮我们可视化管理（不用敲复杂命令），宝塔面板就是这个“智能管家”。
1. 安装宝塔面板
登录腾讯云服务器控制台，找到你买的服务器，点击“登录”（用默认的“Webshell”就行）。
复制下面的命令，粘贴到命令行里，按回车（全程自动安装，大概5分钟）：
wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh
安装完成后，会显示宝塔的登录地址（比如 http://IP:8888 ）、账号和密码
2. 登录宝塔面板
打开浏览器，输入上面的登录地址，用账号密码登录。首次登录会提示安装“LNMP套件”，直接点“一键安装”（不用改配置，默认就行）。
四、部署前端
前端代码是用户看到的界面（比如页面按钮、图片），相当于你家的“客厅”，需要先“装修打包”再搬进去。
1. 打包前端代码（“装修打包”）
如果你用Vue/React开发，打开本地项目文件夹，在命令行里输入：
npm run build # Vue项目用这个
# 或
yarn build # React项目用这个
执行完会生成一个 dist 文件夹，里面就是“装修好的客厅”（能直接用的静态文件）。
2. 在宝塔里给前端“分配房间”
登录宝塔面板，左侧点“网站”→“添加站点”：
域名：填你的前端域名（比如 www.xxx.com ，测试时可以直接填服务器IP）。
根目录：默认路径不用改（比如 /www/wwwroot/www.xxx.com ）。
PHP版本：选“纯静态”（前端不需要动态功能）。
点“提交”，相当于给前端代码分配了一个“房间”。
3. 上传前端代码（“搬家具”）
宝塔左侧点“文件”，进入刚创建的前端目录（比如 /www/wwwroot/www.xxx.com ），删除默认文件（ index.html 等）。
点击“上传”，选择本地打包好的 dist.zip 压缩包，上传后右键“解压”，前端代码就放好了～
五、部署后端
后端代码是处理业务逻辑的（比如登录验证、存数据），相当于家里的“厨房”，负责给前端提供“食材”（数据）。
1. 安装后端“发动机”（Node.js）
- 宝塔左侧点“软件商店”，搜索“Node.js”，选 18.x 版本安装（后端代码需要这个环境才能运行）。
2. 给后端“分配房间”
- 还是在“网站”→“添加站点”：
- 域名：填后端专属域名（比如 api.xxx.com ，和前端域名区分开）。
- 根目录：默认路径（ /www/wwwroot/api.xxx.com ）。
- PHP版本：选“Node.js”，版本和刚安装的一致（ 18.x ）。
- 点“提交”，后端的“房间”就有了。
3. 上传后端代码并启动
- 把后端代码压缩成 backend.zip ，上传到后端目录并解压（和前端上传步骤一样）。
- 安装依赖：宝塔左侧点“终端”，输入命令进入后端目录，安装依赖：
cd /www/wwwroot/api.xxx.com # 进入后端目录
npm install # 安装依赖（等几分钟）
- 启动后端服务：安装“PM2管理器”（软件商店搜索安装），然后点“添加项目”：
- 项目名称：随便填（比如 my-backend ）。
- 项目目录：选后端目录（ /www/wwwroot/api.xxx.com ）。
- 启动文件：填后端入口文件（比如 app.js 或 server.js ）。
- 点“创建”→“启动”，后端就开始运行了～
六、关键一步：让“客厅”和“厨房”打通（反向代理）
现在前端和后端分别在两个“房间”，需要一个“通道”让它们通信，这就是Nginx的“反向代理”功能（前面说的“接待员”上线了）。
1. 配置反向代理
宝塔左侧点“网站”，找到前端站点（ www.xxx.com ），点“设置”→“反向代理”→“添加反向代理”：
目标URL：填后端服务地址（比如 http://127.0.0.1:3000 ，3000是后端端口，根据你的代码改）。
匹配路径：填 /api/ （必须和前端代码里的 baseURL 一致，比如前端请求写的是 /api/login ，这里就填 /api/ ）。
点“提交”。
2. 解决“跨域问题”（接待员的“工作手册”）
还是在反向代理页面，点“配置文件”，在 location /api/ 大括号里添加这段代码（复制粘贴）：
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
点“保存”→“重载Nginx”，这样前后端就能正常通信了～
七、让别人找到你家
现在网站已经部署好了，但别人还访问不了，需要把“门牌号”（域名）和“房子地址”（服务器IP）绑定，再挂个“安全门牌”（SSL证书）。
1. 域名解析（绑定门牌号）
登录腾讯云域名控制台，找到你的域名，点“解析”→“添加记录”：
前端域名（ www.xxx.com ）：记录类型选“A”，记录值填服务器IP，保存。
后端域名（ api.xxx.com ）：同样添加A记录，记录值填服务器IP，保存。
2. 申请SSL证书（安全门牌）
宝塔左侧点“网站”，找到前端站点，点“SSL”→“Let’s Encrypt”→输入域名→“申请”。
证书生成后，勾选“强制HTTPS”（地址栏会显示小锁，更安全），后端站点同样操作。
八、测试访问
打开浏览器，输入 https://www.xxx.com ，如果能看到前端页面，说明前端部署成功。
操作页面功能（比如登录、提交表单），按F12打开“开发者工具”，看“Network”标签，若后端接口返回 200 ，恭喜！整个部署流程完成～
常见问题“急救包”
1. 访问网站显示404？
检查前端目录是否有 index.html ，或后端接口路径是否写错。
2. 跨域报错？
回头看“反向代理”的配置，确保CORS代码正确添加。
3. 后端启动失败？
查看PM2日志（点“日志”标签），通常是依赖没装全或代码有错。
部署网站就像搭积木，一步步来其实不难。