Supabase 是一个托管平台,无需管理任何基础架构即可轻松上手。

在这篇博客中,我们将开始使用 supabase 提供后端服务,它是 Firebase 的一个非常源代码替代品,并且将有大量的截图供参考,所以请做好准备!!!

Supabase 入门

Supabase 通常被描述为 Google 的 Firebase 的开源替代品,这是一个很好的说法,对于那些不知道 Firebase 是什么的人来说,它是一组工具,可以帮助开发人员通过自动更快地构建项目处理大量幕后工作和布线。

它具有所需数量的功能:

• 提供一个专用数据库。

• 身份验证和广泛的用户管理过程。

• 存储提供者

• 自动生成的 API 设置

我们可以在各种设置中开始使用它,但我们将主要在本博客中处理 react。对于其他语言,您可以获取目标到 Supabase 软件的官方页面,即check out

处理 React 部分

让我们使用 supbase 构建一个简单的用户管理应用程序

创建项目

• 转到app.supabase.com。

• 点击“新建项目”。

• 输入您的项目详细信息。等待新数据库启动。

为了设置项目并在此项目中使用,我们使用了预定义的用户管理入门模板::

• 选择仪表板选项。

• 转到仪表板中的 SQL 编辑器页面。

• 点击用户管理启动器。

• 点击运行。

由于您现在已经创建了数据库,因此 supabase 创建了一个 api 供其在下一部分工作

要找到访问数据库的 API 密钥和 URL 并在项目中使用它,请执行以下步骤:

• 进入仪表板中的设置页面。

• 点击侧边栏中的API。

• 在此页面上找到您的 API URL、anon 和 service_role 键。

服务角色,用于识别与其相关的服务,并为用户提供对 API 密钥的公共或私有访问权限。

现在我们已经有了所有有用的设置和访问参数,现在让我们开始项目

npx create-react-app supabase-react
cd supabase-react

现在我们可以使用以下命令下载 supabase 的依赖项

npm install @supabase/supabase-js@rc

让我们通过创建一个 .env 文件来存储 supabase 使用的变量,并将所有内容放在这个文件中

REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

要设置 supabase 客户端并在浏览器中使用它,我们将创建一个名为 src/supabaseClient.js 的帮助文件,因为启用了行级安全性。

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

您可以根据您的选择更新其他属性,例如 CSS 和内容。

在src/Auth.js中设置登录组件进行登录和注册。它还提供了魔术链接功能,使用户无需使用密码即可通过电子邮件签名

import { useState } from 'react'
import { supabase } from './supabaseClient'
import React from 'react';

export default function Auth() {
  const [loading, setLoading] = useState(false)
  const [email, setEmail] = useState('')

  const handleLogin = async (e) => {
    e.preventDefault()

    try {
      setLoading(true)
      const { error } = await supabase.auth.signInWithOtp({ email })
      if (error) throw error
      alert('Check your email for the login link!')
    } catch (error) {
      alert(error.error_description || error.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="row flex-center flex">
      <div className="col-6 form-widget" aria-live="polite">
        <h1 className="header">Supabase + React</h1>
        <p className="description">
          Sign in via magic link with your email below
        </p>
        {loading ? (
          'Sending magic link...'
        ) : (
          <form onSubmit={handleLogin}>
            <label htmlFor="email">Email</label>
            <input
              id="email"
              className="inputField"
              type="email"
              placeholder="Your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button className="button block" aria-live="polite">
              Send magic link
            </button>
          </form>
        )}
      </div>
    </div>
  )
}

在 src/Account.js 中设置一个页面来编辑个人资料详细信息并管理他们的帐户

import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import React from 'react';

const Account = ({ session }) => {
  const [loading, setLoading] = useState(true)
  const [username, setUsername] = useState(null)
  const [website, setWebsite] = useState(null)
  const [avatar_url, setAvatarUrl] = useState(null)

  useEffect(() => {
    getProfile()
  }, [session])

  const getProfile = async () => {
    try {
      setLoading(true)
      const { user } = session

      let { data, error, status } = await supabase
        .from('profiles')
        .select(`username, website, avatar_url`)
        .eq('id', user.id)
        .single()

      if (error && status !== 406) {
        throw error
      }

      if (data) {
        setUsername(data.username)
        setWebsite(data.website)
        setAvatarUrl(data.avatar_url)
      }
    } catch (error) {
      alert(error.message)
    } finally {
      setLoading(false)
    }
  }

  const updateProfile = async (e) => {
    e.preventDefault()

    try {
      setLoading(true)
      const { user } = session

      const updates = {
        id: user.id,
        username,
        website,
        avatar_url,
        updated_at: new Date(),
      }

      let { error } = await supabase.from('profiles').upsert(updates)

      if (error) {
        throw error
      }
    } catch (error) {
      alert(error.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div aria-live="polite">
      {loading ? (
        'Saving ...'
      ) : (
        <form onSubmit={updateProfile} className="form-widget">
          <div>Email: {session.user.email}</div>
          <div>
            <label htmlFor="username">Name</label>
            <input
              id="username"
              type="text"
              value={username || ''}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="website">Website</label>
            <input
              id="website"
              type="url"
              value={website || ''}
              onChange={(e) => setWebsite(e.target.value)}
            />
          </div>
          <div>
            <button className="button primary block" disabled={loading}>
              Update profile
            </button>
          </div>
        </form>
      )}
      <button
        type="button"
        className="button block"
        onClick={() => supabase.auth.signOut()}
      >
        Sign Out
      </button>
    </div>
  )
}

export default Account

所有的事情都差不多完成了。现在您必须更新 App.js 以实现 supbase 组件。

import './index.css'
import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import Auth from './Auth'
import Account from './Account'
import React from 'react';

export default function App() {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

  return (
    <div className="container" style={{ padding: '50px 0 100px 0' }}>
      {!session ? (
        <Auth />
      ) : (
        <Account key={session.user.id} session={session} />
      )}
    </div>
  )
}

现在只需启动应用程序,它会将您定向到端口 3000。

npm start

使用 CI/CD 工作流:

设置前包括以下几点-

• 安装 Supabase CLI

• 创建一个 Supabase 项目

• 初始化一个本地 Git 仓库

• 首先创建一个迁移。

• 然后部署迁移并使用 github 操作进行配置。

手动迁移

第一步是创建一个新的迁移脚本。您可以通过运行:

supabase migration new new_employee

您应该会看到创建了一个新文件 supbase/migrations/_new_employee.sql。

使用 GitHub 操作对其进行配置

Supabase CLI 需要一些环境变量才能在非交互模式下运行。

SUPABASE\ACCESS\TOKEN 是您的个人访问令牌 SUPABASE\DB_PASSWORD 是您的项目特定数据库密码

我们建议将这些作为加密机密添加到您的 GitHub Action 运行器中。

创建工作流文件,我们将用于本指南:.github/workflows/production.yml

将这些文件提交到 Git 并将它们推送到 GitHub 上的主分支。确保您已更新这些环境变量以匹配您的 Supbase 项目:

name: Deploy Migrations to Production

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-22.04

    env:
      SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
      SUPABASE_DB_PASSWORD: ${{ secrets.PRODUCTION_DB_PASSWORD }}
      PRODUCTION_PROJECT_ID: lxequlvtengsbqufyszw

    steps:
      - uses: actions/checkout@v3

      - uses: supabase/setup-cli@v1
        with:
          version: 1.0.0

      - run: |
          supabase link --project-ref $PRODUCTION_PROJECT_ID
          supabase db push

将这些参数相应地添加到 GitHub 操作中:

• SUPABASE_ACCESS_TOKEN

• 生产_项目_ID

• PRODUCTION_DB_PASSWORD

正确配置后,您的存储库应该具有将新提交推送到主分支时触发的将迁移部署到生产工作流。

Supbase 提供了日志浏览器,允许日志跟踪和调试。它为每个产品提供了一个日志接口。

您可以为项目使用多种类型的集成,包括 vercel、appsmith、Auth0 和其他几种。