六维教程

EdgeOne Makers 后端与全栈框架

上一篇 EdgeOne Makers 前端框架部署 讲的是部署纯前端项目,比如 Vue、React、Next.js 的静态导出模式。这些项目构建完就是一堆 HTML、CSS、JS 文件,不需要后端服务。

但实际开发中,很多项目需要后端能力,比如处理表单提交、调用第三方 API、操作数据库等。EdgeOne Makers 也支持部署后端项目和全栈框架,这篇就来讲讲怎么部署 Node.js、Python 后端,以及 Next.js 的全栈模式。

部署 Node.js 后端

假设你有一个简单的 Express 后端项目,结构是这样的:

my-node-backend/
├── src/
│   └── index.js
├── package.json
└── node_modules/

package.json 里是这样:

{
  "name": "my-node-backend",
  "version": "1.0.0",
  "scripts": {
    "start": "node src/index.js"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

src/index.js 里写了一个简单的 API:

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.get('/', (req, res) => {
  res.json({ message: 'Hello from EdgeOne Makers' });
});

app.post('/api/data', (req, res) => {
  const data = req.body;
  res.json({ received: data });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

部署步骤

把这个项目推送到 GitHub,在 EdgeOne Makers 控制台导入项目。

平台会检测到这是一个 Node.js 项目,但不是前端框架,所以会问你要部署成什么类型。选择”后端服务”或者”Node.js 应用”。

然后配置启动命令,这里填 npm start 或者 node src/index.js

点击部署,等构建完成后就能访问了。

访问方式

部署完成后,平台会分配一个域名,比如 https://my-backend.edgeone.app

访问 https://my-backend.edgeone.app/ 会返回:

{
  "message": "Hello from EdgeOne Makers"
}

访问 POST 接口 https://my-backend.edgeone.app/api/data,带上 JSON 数据,也能正常处理。

部署 Python 后端

Python 后端也支持。假设你有一个 Flask 项目:

my-python-backend/
├── app.py
└── requirements.txt

requirements.txt:

flask==2.3.0

app.py:

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/')
def home():
    return jsonify({'message': 'Hello from EdgeOne Makers'})

@app.route('/api/data', methods=['POST'])
def handle_data():
    data = request.get_json()
    return jsonify({'received': data})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 5000)))

部署步骤

推送到 GitHub,导入项目。平台检测到 requirements.txt,知道是 Python 项目。

配置启动命令为 python app.py 或者 gunicorn app:app(推荐用 gunicorn 生产环境)。

点击部署,等待完成。

注意事项

Python 项目部署时,平台会自动安装 requirements.txt 里的依赖。如果你的项目用的是 pipenv 或者 poetry,需要在设置里调整安装命令。

部署 Next.js 全栈模式

Next.js 最强大的地方在于它既是前端框架,也是全栈框架。你可以在一个项目里同时写前端页面和后端 API。

项目结构

一个典型的 Next.js 全栈项目:

my-nextjs-fullstack/
├── pages/
│   ├── index.js
│   ├── api/
│   │   └── hello.js
│   └── _app.js
├── package.json
└── next.config.js

pages/index.js 是前端页面:

export default function Home() {
  return (
    <div>
      <h1>Next.js Fullstack</h1>
      <button onClick={fetchData}>调用 API</button>
      <div id="result"></div>
    </div>
  );
}

async function fetchData() {
  const res = await fetch('/api/hello');
  const data = await res.json();
  document.getElementById('result').textContent = JSON.stringify(data);
}

pages/api/hello.js 是后端 API:

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello from API route' });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

部署步骤

推送到 GitHub,导入项目。

平台会自动检测到 Next.js 项目,并且识别出这是全栈模式(因为有 API 路由)。构建配置会自动设置好,不用手动改。

点击部署,等待完成。

访问方式

部署完成后,访问首页 https://my-nextjs.edgeone.app/ 会看到前端页面。

点击按钮调用 /api/hello 接口,会返回:

{
  "message": "Hello from API route"
}

前端页面和后端 API 都在同一个项目里,部署后也在一起,不用分开管理。

API 路由详解

Next.js 的 API 路由非常灵活,可以处理各种后端逻辑。

基本用法

在 pages/api 目录下创建文件,每个文件就是一个 API 端点。

比如 pages/api/users.js:

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      // 获取用户列表
      res.status(200).json([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]);
      break;
    case 'POST':
      // 创建用户
      const newUser = req.body;
      res.status(201).json({ id: 3, ...newUser });
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

动态路由

支持动态路由参数,比如 pages/api/users/[id].js:

export default function handler(req, res) {
  const { id } = req.query;
  
  // 根据 id 查询用户
  res.status(200).json({ id, name: 'Alice' });
}

访问 /api/users/123,id 就是 123。

中间件

Next.js 13+ 支持中间件,可以在请求到达页面前执行一些逻辑,比如鉴权、重定向等。

在根目录创建 middleware.js:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token');
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*'],
};

这个中间件会检查访问 /dashboard 路径的请求是否携带 token,没有就重定向到登录页。

Edge Functions 和 Cloud Functions

除了部署完整的后端项目,EdgeOne Makers 还提供了 Serverless 函数能力。

详细的介绍在 EdgeOne Makers Functions 概览 里有讲,这里简单提一下。

函数类型 适用场景 示例
Edge Functions 轻量逻辑,跟请求强相关 请求改写、鉴权、A/B 分流
Cloud Functions 复杂计算,需要完整运行时 图片处理、数据库操作、文件上传

如果你只需要实现一些简单的后端功能,不想部署完整的后端项目,可以用 Serverless 函数。

速查卡片

要点 说明
Node.js 部署 配置启动命令 npm start 或 node xxx.js
Python 部署 自动安装 requirements.txt,配置启动命令
Next.js 全栈 平台自动识别,支持前端页面 + API 路由
API 路由 在 pages/api 目录下创建文件,每个文件是一个端点
动态路由 支持 [id] 这种动态参数
中间件 可以在请求到达前执行鉴权、重定向等逻辑
Serverless 函数 轻量后端逻辑用 Edge Functions,复杂计算用 Cloud Functions
环境变量 后端项目常用,比如数据库连接信息、API 密钥
上一篇
EdgeOne Makers 前端框架部署
下一篇
EdgeOne Makers 项目管理