Express与前端框架的集成

Express作为Node.js中最流行的后端框架之一，常与前端框架结合构建全栈应用。其轻量级、灵活的路由设计和中间件机制，使得与React、Vue、Angular等前端框架的集成变得高效且可扩展。

Express与前端框架的集成方式

Express与前端框架的集成主要分为两种模式：服务端渲染（SSR）和前后端分离。前者适合需要SEO优化的场景，后者更适合复杂交互的单页应用（SPA）。

服务端渲染（SSR）集成

通过模板引擎（如EJS、Pug）直接渲染前端框架组件。以React为例，可使用express-react-views实现：

const express = require('express');
const app = express();
const reactViews = require('express-react-views');

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());

app.get('/', (req, res) => {
  res.render('Index', { title: 'SSR with React' });
});

app.listen(3000);

对应的React组件文件views/Index.jsx：

const React = require('react');

class Index extends React.Component {
  render() {
    return <h1>{this.props.title}</h1>;
  }
}

module.exports = Index;

前后端分离架构

更常见的做法是将Express作为API服务器，前端框架独立部署。关键配置包括：

1. 静态文件托管：

app.use(express.static('client/dist')); // Vue/React打包后的目录

2. 跨域处理（开发阶段）：

const cors = require('cors');
app.use(cors({
  origin: 'http://localhost:8080' // Vue开发服务器地址
}));

3. 代理配置示例（Vue的vue.config.js）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
};

深度集成技巧

动态路由匹配

当使用React Router或Vue Router时，需配置Express通配路由确保直接访问子路由时能返回正确页面：

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist/index.html'));
});

状态共享

通过Express中间件将服务端数据注入到前端：

app.use((req, res, next) => {
  res.locals.user = req.user; // 认证信息
  next();
});

前端通过全局变量或接口获取：

// 在模板引擎中直接输出
<script>
  window.__INITIAL_STATE__ = <%- JSON.stringify(user) %>;
</script>

实时通信集成

结合Socket.io实现实时功能（以Vue为例）：

// Express服务端
const io = require('socket.io')(server);
io.on('connection', (socket) => {
  socket.emit('message', 'Welcome!');
});

// Vue客户端
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('message', (data) => {
  console.log(data); // 输出"Welcome!"
});

性能优化实践

静态资源缓存

app.use(express.static('public', {
  maxAge: '1y',
  etag: false
}));

代码分割配合

配合前端框架的懒加载，Express可做按需接口设计：

// 动态加载的组件对应接口
app.get('/api/module/:id', async (req, res) => {
  const data = await fetchModuleData(req.params.id);
  res.json(data);
});

服务端渲染缓存

对于高流量SSR应用，使用LRU缓存：

const LRU = require('lru-cache');
const ssrCache = new LRU({ max: 100 });

app.get('*', (req, res) => {
  const cached = ssrCache.get(req.url);
  if (cached) return res.send(cached);
  
  renderToString(app).then(html => {
    ssrCache.set(req.url, html);
    res.send(html);
  });
});

安全加固方案

CSRF防护

const csrf = require('csurf');
app.use(csrf({ cookie: true }));

// 前端获取token
app.get('/csrf-token', (req, res) => {
  res.json({ token: req.csrfToken() });
});

// Vue示例：axios拦截器
axios.get('/csrf-token').then(res => {
  axios.defaults.headers.common['X-CSRF-Token'] = res.data.token;
});

内容安全策略（CSP）

const helmet = require('helmet');
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'", 'cdn.example.com'],
      styleSrc: ["'self'", "'unsafe-inline'"]
    }
  }
}));

测试策略

端到端测试

使用Cypress测试Express+前端组合：

// cypress/integration/app.spec.js
describe('Fullstack Test', () => {
  it('loads main page', () => {
    cy.request('POST', '/api/login', { user: 'test' })
      .then(() => {
        cy.visit('/');
        cy.contains('Welcome test');
      });
  });
});

接口契约测试

使用Pact验证前后端接口约定：

// 前端契约定义
const { Pact } = require('@pact-foundation/pact');
const provider = new Pact({
  consumer: 'Frontend',
  provider: 'ExpressAPI'
});

describe('API Contract', () => {
  before(() => provider.setup());
  after(() => provider.finalize());

  it('matches /api/user', () => {
    return provider.addInteraction({
      request: { method: 'GET', path: '/api/user' },
      response: { status: 200, body: { name: String } }
    });
  });
});

部署配置示例

Docker多阶段构建

# 前端构建阶段
FROM node:16 as frontend
WORKDIR /app
COPY client/package*.json ./client/
RUN cd client && npm install
COPY client ./client
RUN cd client && npm run build

# Express服务端
FROM node:16
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY --from=frontend /app/client/dist ./public
COPY server ./
EXPOSE 3000
CMD ["node", "server.js"]

Nginx反向代理配置

server {
  listen 80;
  server_name example.com;

  location / {
    root /var/www/client;
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://express:3000;
    proxy_set_header Host $host;
  }
}