在Ubuntu系统下使用Node.js实现前后端分离的详细步骤

在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 http://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('http://localhost:3000/api/data')
      .then(response => {
        setMessage(response.data.message);
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }, []);

  return (
    

      

        
{message}
      
    

  );
}

export default App;

注意请求地址需匹配后端服务地址（http://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: 'http://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版本管理等，进一步完善项目。