使用supabase和netlify部署你的小规模程序

微信小程序

微信小程序的微信小程序号申请，开发者平台怎么搞就不说了

项目介绍

我们会以一个以 nodejs 的为基础构建的，后端使用 express + nodejs，非前后端分离的小型项目页面为例子，最后部署到 netlify 上，因为 github page 因为某些不可名状的原因被 ban 了

https://github.com/ergou10086/ErgouSampleBlogFrame 这是示例的仓库地址

预览：https://keen-licorice-1a4ade.netlify.app/

项目结构如下

ErgouSampleBlogFrame/
├── src/
│   ├── config/
│   │   └── supabase.js          # Supabase 配置
│   ├── controllers/
│   │   ├── authController.js    # 认证控制器
│   │   ├── postController.js    # 文章控制器
│   │   └── userController.js    # 用户控制器
│   ├── middlewares/
│   │   ├── auth.js              # 认证中间件
│   │   └── errorHandler.js      # 错误处理中间件
│   ├── routes/
│   │   ├── auth.js              # 认证路由
│   │   ├── posts.js             # 文章路由
│   │   └── index.js             # 首页路由
│   └── views/
│       ├── layouts/
│       │   └── main.ejs         # 主布局模板
│       ├── partials/
│       │   ├── header.ejs       # 头部组件
│       │   └── footer.ejs       # 底部组件
│       ├── index.ejs            # 首页
│       ├── login.ejs            # 登录页
│       ├── register.ejs         # 注册页
│       ├── post-detail.ejs      # 文章详情页
│       ├── post-edit.ejs        # 编辑文章页
│       ├── post-create.ejs      # 创建文章页
│       └── error.ejs            # 错误页
├── public/                      # 静态资源目录
│   ├── css/
│   ├── js/
│   └── images/
├── sql/                         # 数据库脚本
│   ├── supabase.sql            # 数据库表结构
│   ├── complete_setup.sql      # 完整设置脚本（推荐）
│   ├── create_user_profile_trigger.sql  # 用户资料触发器
│   └── fix_user_profiles_insert.sql     # 修复脚本
├── .env                        # 环境变量（需要创建）
├── .env.example                # 环境变量示例
├── app.js                      # 应用入口文件
├── package.json
└── README.md

Supabase

注册后会让你创建一个项目，就按常规的创建就可以了

可以使用 New Table 输入表的结构来创建表

也可以使用控制台输入查询语句来建表，因为 supabase 是基于 postgresql 来实现的

那么以 JavaScript 项目为例，安装 Supabase 客户端库：

1	npm install @supabase/supabase-js

在项目中可以这样初始化 Supabase 客户端：

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_PROJECT_URL';
const supabaseAnonKey = 'YOUR_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

可以在控制面板的 Project Settings/API 里面找到 supabaseUrl 和 supabaseKey：

这些都是要作为环境变量，放到你前端的项目的，所以需要新建一个env文件下来

SUPABASE_URL=
SUPABASE_ANON_KEY=
SESSION_SECRET=
PORT=3000
NODE_ENV=development

注意，在 Supabase Dashboard 的 Authentication > Sign in 中要确保 Email 认证已启用，这是根据需要配置邮箱确认（建议开发环境关闭，生产环境开启）的相关内容

netlify部署

输入完个人信息之后就会然你选择从哪里导入项目，我们需要选择 github，他会让你选择你的一个仓库进行构建

我这里有了就没法演示了，注意 netlify 只支持一种构建方式

在这里添加环境变量

把我们之前的那个环境变量的五条都加进去

虽然你也可以在代码中通过 process.env 读取 Netlify 配置的环境变量（如 Supabase 密钥、API 地址等）

要完善 Netlify 静态网站的部署，除了界面操作外，还需要在代码层面配置构建逻辑、静态资源路径、函数规则等。

所以这还没有完成

在项目根目录创建 netlify.toml 文件，定义构建命令、静态资源目录、函数路径等规则：

[build]
  # 构建命令（根据项目技术栈调整，如前端构建、依赖安装）
  command = "npm run build"  
  # 静态资源输出目录（需与项目构建产物目录一致，如 React 的 build、Vue 的 dist）
  publish = "public"         

[functions]
  # 后端函数目录（若有 Netlify Functions，需指定存放路径）
  directory = "netlify/functions"  
  # 函数构建工具（可选，提升构建效率）
  node_bundler = "esbuild"

如果你的静态网站基于前端框架（如 React、Vue、Astro 等），需确保构建配置输出到 publish 目录：

React 项目：在package.json中配置build脚本，确保产物输出到public目录（或修改netlify.toml的publish为build
1
2
3
4
5
{
"scripts": {
"build": "react-scripts build"
}
}
Vue 项目：修改vue.config.js中的outputDir为public

（或同步netlify.toml的publish路径）：
1
2
3
module.exports = {
outputDir: 'public'
}

如果项目包含 Netlify Functions（后端逻辑），需按以下规范编写函数文件（以 Node.js 为例）：

在 netlify/functions 目录下创建函数文件（如 api.js）：

// 处理 HTTP 请求的函数逻辑
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Hello from Netlify Function!" })
  };
};