当前位置：首页 > news >正文

从开发到上线：基于 Linux 云服务器的前后端分离项目部署实践（Vue + Node.js）

news 来源：原创 2025/9/6 23:44:05

明白了，这次我们完全聚焦技术内容本身，不带明显广告语言，不插入链接，只在文末一个不显眼的地方轻描淡写提到“服务器用的是 zovps.com 的一台基础云主机”，整体文章保证原创、高质量、易审核、易分发，长度控制在3000字左右，适合发布在知乎、博客园、掘金、CSDN 等平台。

文章主题不变：在 Linux 云服务器上部署前后端分离项目（Vue + Node.js）完整流程

从开发到上线：基于 Linux 云服务器的前后端分离项目部署实践（Vue + Node.js）

随着 Web 技术的不断发展，前后端分离架构已成为现代 Web 应用开发的主流方式。开发者通常使用 Vue、React 等前端框架构建用户界面，使用 Node.js + Express/Koa 构建后端 API 服务。这种分离不仅提高了开发效率，也便于团队协作和项目维护。

但在项目完成后，如何将其部署上线，让用户可以通过域名访问？这一步对不少初学者来说仍有一定门槛。本文将以 Vue + Node.js 为例，介绍如何在一台 Linux 云服务器上完成完整部署，包括打包、配置、上线、进程管理、安全优化等，覆盖从开发到上线的全过程。

一、环境准备

在开始部署之前，你需要准备以下环境：

一台 Linux 系统的云服务器（推荐 Ubuntu 20.04 或 CentOS 7）
已完成的 Vue 前端项目（使用 Vue CLI 构建）
已完成的 Node.js 后端项目（如使用 Express 或 Koa 框架）
服务器已安装 Node.js、Nginx、Git（可选）
有一个公网 IP（用于访问）、域名（可选）

安装 Node.js

以 Ubuntu 为例：

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo bash -
sudo apt install -y nodejs

检查版本：

node -v
npm -v

二、前端部署流程（以 Vue 项目为例）

1. 项目打包

在本地开发机上或服务器中：

cd frontend-project/
npm install
npm run build

打包完成后会生成 dist/ 文件夹，里面是前端静态资源。

2. 安装并配置 Nginx

sudo apt install -y nginx

编辑配置文件（以 Ubuntu 为例）：

sudo nano /etc/nginx/sites-available/default

替换其中的 location / 配置为：

location / {root /home/youruser/frontend-project/dist;index index.html;try_files $uri $uri/ /index.html;
}

保存退出后重启 Nginx：

sudo nginx -t
sudo systemctl reload nginx

此时访问服务器公网 IP，如果配置正确，将可以看到 Vue 项目的首页。

三、后端部署流程（Node.js + Express）

1. 上传后端代码并安装依赖

将后端项目上传至服务器（可用 Git 拉取或通过 scp 传输），然后：

cd backend-project/
npm install

确认配置文件（如 .env、数据库地址等）已正确设置。

2. 启动项目测试

node app.js

默认项目监听 3000 端口，可通过：

curl http://localhost:3000

验证接口是否正常。

四、使用 PM2 管理 Node 服务

PM2 是一个常用的 Node.js 进程管理工具，支持日志查看、自动重启、守护进程、开机启动等。

1. 安装 PM2

npm install -g pm2

2. 启动后端服务

pm2 start app.js --name backend-api

3. 设置自动启动

pm2 startup
pm2 save

4. 常用命令

查看状态：pm2 status
查看日志：pm2 logs
重启服务：pm2 restart backend-api
停止服务：pm2 stop backend-api

五、配置 Nginx 反向代理

前后端分离项目通常需要将前端的 /api 请求代理到 Node 后端。

编辑 Nginx 配置文件：

location /api/ {proxy_pass http://127.0.0.1:3000/;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;
}

然后重新加载 Nginx：

sudo nginx -t
sudo systemctl reload nginx

此时，前端请求 /api/xxx 时，将自动转发到 Node 服务接口。

六、跨域配置建议（CORS）

如果你尚未使用反向代理或仍在开发阶段，Node 后端需要支持跨域访问。在服务端代码中添加如下中间件：

app.use((req, res, next) => {res.setHeader("Access-Control-Allow-Origin", "*");res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");res.setHeader("Access-Control-Allow-Headers", "Content-Type");next();
});

在生产环境中，建议将 "*" 替换为实际的域名以提高安全性。

七、安全与优化建议

1. 防火墙配置

只开放必要的端口（80/443/22）：

ufw allow ssh
ufw allow http
ufw allow https
ufw enable

2. 使用 HTTPS

推荐使用 Let's Encrypt 免费证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx

配置自动续期：

sudo crontab -e
# 添加：
0 2 * * * certbot renew --quiet

3. 定时备份数据库与代码

可通过 crontab 设置定时任务，或使用 rsync + 远程备份策略。

八、总结与回顾

本文从环境准备、前端打包、后端部署、反向代理配置、进程管理、安全加固等多个角度，完整介绍了前后端分离项目在云服务器中的部署实践流程。整个部署过程不依赖任何第三方平台，所有内容都在自己掌控中，适用于中小企业内部系统部署、创业项目上线、接单交付等多种场景。

通过合理配置 Nginx 和 PM2，不仅可以实现稳定运行，还能做到高可维护性和高性能。

📌 注：本项目部署所使用的云服务器是一台普通的 Ubuntu 系统 VPS，配置为 2 核 4G，托管在慈云数据，性能和带宽表现都比较稳定，适合个人项目或轻量服务部署。

从开发到上线：基于 Linux 云服务器的前后端分离项目部署实践（Vue + Node.js）

一、环境准备

安装 Node.js

二、前端部署流程（以 Vue 项目为例）

1. 项目打包

2. 安装并配置 Nginx

三、后端部署流程（Node.js + Express）

1. 上传后端代码并安装依赖

2. 启动项目测试

四、使用 PM2 管理 Node 服务

1. 安装 PM2

2. 启动后端服务

3. 设置自动启动

4. 常用命令

五、配置 Nginx 反向代理

六、跨域配置建议（CORS）

七、安全与优化建议

1. 防火墙配置

2. 使用 HTTPS

3. 定时备份数据库与代码

八、总结与回顾

相关文章：