在Ubuntu系统上搭建Node.js前后端分离项目并不复杂，它更像一套标准的搭建流程。只要明确了前后端各自的职责，按照步骤配置环境、编写代码并启动服务，即可顺利完成。接下来详细拆解具体操作步骤。
1. 安装Node.js及npm组件
首先需要搭建基础环境。在终端中执行以下命令即可完成Node.js和npm的安装。
sudo apt update
sudo apt install nodejs npm安装后建议验证版本，确保环境配置正确再进入下一步。
2. 规划项目目录结构
前后端分离的核心在于各模块独立管理代码。因此需要分别为前端和后端创建独立的项目目录。名称可自由设定，但应保持逻辑清晰，例如使用backend和frontend。
构建后端项目目录
mkdir backend
cd backend
npm init -y
npm install express body-parser cors此处选用Express框架作为后端服务基础，它是一个轻量灵活且高效的Node.js Web框架，非常适合快速构建API接口。
构建前端项目目录
mkdir frontend
cd frontend
npm init -y
npm install react react-dom axios前端采用React框架，并搭配axios库处理HTTP请求。当然，也可根据实际需求替换为Vue或Angular，整体架构类似。
3. 实现后端API接口
后端项目的核心职责是提供API接口。以下示例创建了一个简单的GET接口，返回JSON数据。若熟悉Express，代码逻辑一目了然。
// backend/index.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors());
app.use(bodyParser.json());
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from backend!' });
});
app.listen(port, () => {
console.log(`Server running on https://localhost:${port}`);
});关键在于前端发送请求后，后端需正确解析并返回数据。后续可根据业务需要添加更多路由及数据库操作。
4. 开发前端展示层
前端部分使用React编写一个简单页面，通过axios从后端获取数据并渲染展示。这是典型的数据获取与渲染流程。
// frontend/src/App.js
import React from 'react';
import axios from 'axios';
function App() {
const [message, setMessage] = React.useState('');
React.useEffect(() => {
axios.get('https://localhost:3000/api/data')
.then(response => {
setMessage(response.data.message);
})
.catch(error => {
console.error('There was an error!', error);
});
}, []);
return (
{message}
);
}
export default App;注意请求地址需匹配后端服务地址（https://localhost:3000/api/data）。端口或路径不一致会导致请求失败，这是前后端联调时常见问题。
5. 启动并运行项目
完成开发与配置后，即可启动项目。需要分别启动后端和前端服务，建议先启动后端。
启动后端服务
cd backend
node index.js启动前端服务
cd frontend
npm start后端默认监听3000端口，前端开发服务器通常使用3001端口（若3000被占用则自动切换）。两者都启动后，访问前端地址即可看到后端返回的消息。
6. 跨域配置（可选）
若前后端部署在不同域名或端口，浏览器同源策略会阻止跨域请求。此时需在后端配置CORS中间件，放行前端地址的请求。
// backend/index.js
const cors = require('cors');
app.use(cors({
origin: 'https://localhost:3001', // 前端应用的地址
}));开发阶段可放宽限制，生产环境则需严格指定允许跨域的来源。
7. 项目部署上线
开发结束后，需将项目部署到服务器以供外部访问。前后端可部署在同一台或不同服务器，常见方案是使用Nginx托管前端静态资源，后端则通过PM2进程管理器守护Node.js服务。
部署后端
将后端代码上传至服务器，使用PM2启动并保持进程持续运行。
npm install -g pm2
pm2 start index.js --name backend部署前端
前端需执行构建命令生成静态文件（通常位于build目录），上传至服务器后，使用Nginx配置站点根目录指向该文件夹。
server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/frontend/build;
index index.html;
try_files $uri /index.html;
}
}try_files指令至关重要，它确保单页应用路由正确运行——用户刷新或直接访问子路径时，Nginx始终返回index.html，由前端路由处理。
从环境搭建、代码开发到最终部署，完成以上流程即掌握了一套完整的Node.js前后端分离方案。后续还可集成数据库、用户认证、API版本管理等，进一步完善项目。
