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 密钥 |