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

明白了,这次我们完全聚焦技术内容本身不带明显广告语言 ,不插入链接,只在文末一个不显眼的地方轻描淡写提到"服务器用的是 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,托管在 慈云数据,性能和带宽表现都比较稳定,适合个人项目或轻量服务部署。

相关推荐
jianbiao148339 分钟前
远程服务器下载llama模型
运维·服务器
bookish_2010_prj1 小时前
Jupyter notebook定制字体
linux·python·jupyter
sunn。2 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
zhglhy2 小时前
查看 Linux 操作系统信息的常用命令
linux·运维·服务器
大白的编程日记.2 小时前
【Linux学习笔记】初识进程概念和进程PCB
linux·笔记·学习
照书抄代码2 小时前
Linux中C++ gdb调试命令
linux·运维·服务器
czhc11400756632 小时前
linux3 mkdir rmdir rm cp touch ls -d /*/
linux·运维
the_nov2 小时前
2.Linux的权限理解
linux·运维·服务器
写代码的小王吧2 小时前
【安全】Java幂等性校验解决重复点击(6种实现方式)
java·linux·开发语言·安全·web安全·网络安全·音视频
5:003 小时前
Linux:(五种IO模型)
linux·运维·服务器