用 Supabase CLI 进行本地开发环境搭建

已于 2024-05-14 22:39:08 修改
阅读量3.4k 收藏 19
点赞数 20
分类专栏： Windows 虚拟机 数据库 文章标签： supabase CLI scoop WSL2
于 2024-05-12 09:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddrfan/article/details/138725438
版权

文章目录

（零）前言

在《用 Next.js 和 Supabase 进行“全栈”开发的入门》中，我搭(抄)建(袭)了一个类似论坛雏形的东西。
后端用了Supabase官方提供的托管服务，免费的那种方案。

虽然仅仅是学习，但由于它提供的服务基于AWS，没有可选中国的（近点的有：孟买，新加坡，东京，首尔）。
所以每次后台操作都会很慢，执行个查询SQL大概3-5秒，最不能忍受的是，时不时的断线几分钟无法访问。
搞得我不知道是js的问题，还是网络慢。所以想在本地弄套环境，省心。
在这里插入图片描述

（一）Supabase CLI

概念：

  • 💡CLI = Command Line Interface，就是命令行交互，与之对应有GUI图形界面交互。

官网文档关于CLI部分在这里。简单说它是提供了一系列工具，用于在本地开发项目、部署、处理数据库迁移以及直接从数据库架构生成类型等。

那么CLI和官网提到的Docker本地托管方式有啥区别呢？
其实CLI装的Supabase用的也是Docker，它不仅仅能管本地的部署，还能链接和管理官网的托管项目。当你需要项目迁移之类操作的时候，用起来就会非常方便，而且还可以进行分支管理（开发）。
而Docker本地托管似乎是一种实际部署的方式，全在本地（运维）。

安装Supabase CLI（在Windows下）需要Scoop，所以……

（1.1）安装 Scoop

根据Scoop项目的描述，需要用Powershell来安装。

> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
> Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression
Initializing...
Downloading...
Creating shim...
Adding ~\scoop\shims to your path.
Scoop was installed successfully!
Type 'scoop help' for instructions.

（1.2）用 Scoop 安装 Supabase CLI

只需要两步然后就全靠网速了。

> scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
Checking repo... OK
The supabase bucket was added successfully.

> scoop install supabase
Installing '7zip' (23.01) [64bit] from 'main' bucket
7z2301-x64.msi (1.8 MB) [======================================] 100%
Checking hash of 7z2301-x64.msi ... ok.
Extracting 7z2301-x64.msi ... done.
Linking ~\scoop\apps\7zip\current => ~\scoop\apps\7zip\23.01
Creating shim for '7z'.
Creating shim for '7zFM'.
Making C:\Users\Shion\scoop\shims\7zfm.exe a GUI binary.
Creating shim for '7zG'.
Making C:\Users\Shion\scoop\shims\7zg.exe a GUI binary.
Creating shortcut for 7-Zip (7zFM.exe)
Persisting Codecs
Persisting Formats
Running post_install script...
'7zip' (23.01) was installed successfully!

Installing 'supabase' (1.165.0) [64bit] from 'main' bucket
supabase_windows_amd64.tar.gz (11.6 MB) [=====================] 100%
Checking hash of supabase_windows_amd64.tar.gz ... ok.
Extracting supabase_windows_amd64.tar.gz ... done.
Linking ~\scoop\apps\supabase\current => ~\scoop\apps\supabase\1.165.0
Creating shim for 'supabase'.
'supabase' (1.165.0) was installed successfully!

（二）本地项目环境

（2.1）初始化项目

新建个目录，进到目录里面，执行：

> supabase init
Generate VS Code settings for Deno? [y/N] y
Generated VS Code settings in .vscode\settings.json. Please install the recommended extension!
Finished supabase init.

（2.2）登录

t> supabase login
Hello from Supabase! Press Enter to open browser and login automatically.

Here is your login link in case browser did not open 
https://supabase.com/dashboard/cli/login?session_id=xxxxxxxx&token_name=yyyyyyyy&public_key=zzzzzzzzzz

Token yyyyyyyy created successfully.

You are now logged in. Happy coding!

登录时会打开浏览器窗口，下面这个就是成功了，然后关闭这个页面。
如果没有自动打开浏览器，就用上面的那个URL吧（我这没出现这种情况）。
在这里插入图片描述

（2.3）关联本地/远程项目

从官网找到你的项目，然后设置里面看它的ID。
密码是创建项目时输入的，平时都没有用到，希望别忘了……

> supabase link --project-ref 你的项目ID
Enter your database password (or leave blank to skip):
Connecting to remote database...
Finished supabase link.
Local config differs from linked project. Try updating supabase\config.toml
[api]
enabled = true
port = 54321
schemas = ["public", "graphql_public"]
extra_search_path = ["public", "extensions"]
max_rows = 1000

（2.4）拉远程项目

💡这一步就需要用到docker了。

因为我之前的docker都是在linux下，所以现安装了个Windows下的docker desktop。
安装时默认选用WSL2，然后还需要重启系统。

装好后启动它，这样docker引擎就启动了，我们可以继续执行指令：

> supabase db pull

Connecting to remote database...
15.1.1.41: Pulling from supabase/postgres
17d0386c2fff: Pull complete
ec8061954605: Pull complete
e54d94900333: Pull complete
3be4d2664419: Pull complete
5d3911bdcee3: Pull complete
33719a05f4ef: Pull complete                                                                                                                                                                                       cd5341e6fcf9: Pull complete
083e9066a8a9: Pull complete
Pull complete ma from remote database...
c5573b8f6e79: Pull complete
8e4d4e9e7ffa: Pull complete
7819f3b4135b: Pull complete
bfb56fc535a5: Pull complete
8745eb852041: Pull complete
90bb658328ea: Pull complete
883d9b8ba5fc: Pull complete
de3891c7e975: Pull complete
4d1c60b79844: Pull complete
bc35e3236cd4: Pull complete
247f832137f9: Pull complete
f8853832fdf5: Pull complete
6e9addf2cb83: Pull complete
fcd0db09bbd6: Pull complete
8e2074a64d8c: Pull complete
Digest: sha256:b954155da45d6ac4cde6c9b681e9b4867eedec4c7b6944aca99828d7d8add095
Status: Downloaded newer image for public.ecr.aws/supabase/postgres:15.1.1.41
Schema written to supabase\migrations\20240511114033_remote_schema.sql
Update remote migration history table? [Y/n] y
Repaired migration history: [20240511114033] => applied
Finished supabase db pull.
The auth and storage schemas are excluded. Run supabase db pull --schema auth,storage again to diff them.

可以看到提示auth和storage的schema是被排除掉的。

（2.5）本地项目启停

首次启动又是考验网速的时候，需要pull很多东西（的docker镜像？）下来。
比如postgres,realtime,gotrue……等等。日志太长了就不写在下面啦。

当然，再次启动就会快很多（除了镜像升级的时候）。

> supabase start
......
......
......
Started supabase local development setup.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
  S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: xxxxxxxx
service_role key: xxxxxxxxxxxx
   S3 Access Key: yyyyyyyyyyyyyyyyyyy
   S3 Secret Key: yyyyyyyyyyyyyyyyyyyyyyyyy
       S3 Region: local

成功后就可以用了。
先进入Studio URL: http://127.0.0.1:54323看看本地项目情况。
在这里插入图片描述

还可以在docker desktop里看到启动的容器。
全部在我新建项目的目录Test里面呢。
在这里插入图片描述

用完后记得停止。
停止项目环境：

> supabase stop
Stopped supabase local development setup.
Local data are backed up to docker volume. Use docker to show them: docker volume ls --filter label=com.supabase.cli.project=Test

这时候再看docker里面的容器全都没了，是的容器都没了而不是停止了。
上面CMD里面也提示了使用了volume来保存数据，不用担心容器删了数据丢了。

（三）本地和远程的区别

（3.1）限制和注意事项

官方表示本地开发环境不如 Supabase 平台功能齐全。以下是一些区别：

  • 您无法在仪表板中更新项目设置。这必须使用本地配置文件来完成。
  • CLI 版本决定了使用的 Studio 的本地版本，因此请确保保留本地版本Supabase CLI 最新。

（3.2）Next.js应用的Supabase配置

还记得项目的根目录下.env.local文件内容么。

NEXT_PUBLIC_SUPABASE_URL= %YOUR_PROJECT_URL%
NEXT_PUBLIC_SUPABASE_ANON_KEY= %YOUR_PROJECT_API_KEY%

官网托管的URL：https://你的项目ID.supabase.co
需要改为本地的：http://127.0.0.1:54321

同时API_KEY改为：
本地项目启动时CMD里面打印的anon key: xxxxxxxx实际Key值就可以了。

Supabase 自托管部署实践
weixin_38255219的博客
06-28 2713
Supabase 是一个开源的后端即服务（BaaS）平台，提供了一系列工具和服务，帮助开发者快速构建和部署应用程序。实时数据同步和协作应用Supabase 提供了实时功能，可以让开发者轻松实现数据同步和实时更新，这对于需要协作和同步功能的应用程序非常有用。例如：聊天应用：用户之间的消息可以实时同步。协作编辑器：多个用户可以同时编辑文档，并实时看到对方的修改。实时仪表盘：数据变化可以即时反映在用户界面上。2. Web 和移动应用的后端。
将 Supabase 作为下一个后端服务
kuizuo12的博客
02-18 5175
本文介绍了如何使用 Supabase 作为后端服务，使开发人员可以更快地构建和部署应用程序，无需配置数据库或编写复杂的身份验证代码。将使用 Nuxt.js 和 Supabase，以实现一个图床网站为例，来演示如何在前端中使用 Supabase API 和 Storage 服务。
vue-supabase:Supabase.js周围的supa简单包装器，可在Vue中使用
05-05
Vue + Supabase Supabase.js周围的supa简单包装器，可在Vue中使用。 用法 yarn add vue-supabase import VueSupabase from 'vue-supabase' Vue . use ( VueSupabase , { supabaseUrl : "" , supabaseKey : "" , supabaseOptions : { } , } ) ; const { data , error } = await this . $supabase . from ( "events" ) . select ( "*" ) ;
supabase本地部署
Nile的专栏
11-26 3448
Supabase 是一款强大的开源后端服务，提供了数据库、身份验证、实时推送等功能。本文将详细介绍如何在本地环境中部署 Supabase，让开发者能够在自己的服务器上搭建一个高效且可扩展的后端解决方案。通过阐述部署过程和关键配置步骤，读者将能够轻松地利用 Supabase 构建自己的应用程序，享受到其强大功能和灵活性。无论是开发小型项目还是构建大规模应用，本文都将为您提供必要的指导，帮助您充分利用 Supabase 的优势，实现快速、稳定的应用开发。
Supabase安装保姆级教程：小微应用免费postgresql数据库最佳搭档！
最新发布
技术Z先生的博客
04-28 1271
使用supabase免费使用postgresql数据库及API查询数据库
docker部署Supabase
zsj777的专栏
04-24 579
1、是一个开源的后端即服务（Backend-as-a-Service，BaaS）平台，类似于 Firebase，但基于开源技术栈。它为开发者提供了实时数据库、身份验证、存储和 Edge 函数等功能。Supabase 的核心基于2、 启动 Supabase 服务， 此命令会启动所有服务，并在后台运行。
Supabase MCP 服务器安装与配置指南
gitblog_00829的博客
04-10 730
Supabase MCP 服务器安装与配置指南 supabase-mcp Connect Supabase to your AI assistants 项目地址: https://gitcode.com/gh_mirrors/su...
本地安装 Supabase 【AI版】
solocao的专栏
02-19 1608
或任何数据库管理工具（如 DBeaver、TablePlus）连接到本地数据库。这将停止所有 Supabase 相关的 Docker 容器。这样，你就可以在本地成功安装和运行 Supabase 了！可能会下载多个 Docker 镜像，可能需要一些时间。目录，其中包含 Supabase 需要的配置文件。Supabase 提供了一个命令行工具。，用于管理本地 Supabase 实例。
Supabase CLI 使用教程
gitblog_00021的博客
06-12 580
Supabase CLI 使用教程 cli Supabase CLI 项目地址: https://gitcode.com/gh_mirrors/cli23/cli 1. 项目介绍 Supabase CLI 是...
采用Supabase+Refine快速搭建管理后台
whdxlxl的专栏
03-20 1203
采用Supabase+Refine快速搭建管理后台
use-supabase：这是一个简单的零依赖包，可让您使用React钩子访问Supabase客户端！
03-04
使用Supabase 这是一个简单的零依赖包，可让您使用React钩子访问Supabase客户端！ 初始化Supabase 要获得对钩子的第一次访问，请在应用程序的根目录中使用SupabaseContextProvider。 Creat-React-App import React from 'react' import ReactDOM from 'react-dom' import App from './App' import { SupabaseContextProvider } from 'use-supabase' import reportWebVitals from './reportWebVitals' import { createClient } from '@supabase/supabase-js' const supabase = createClient
supabase-react-server-components:修改了React演示以与supabase一起使用，并添加了一些示例组件
05-27
React演示服务器组件已修改。 阅读服务器组件演示的官方文档。 在config.js文件中添加Supabase凭据。
详解Angular CLI + Electron 开发环境搭建
12-10
用 @angular/cli 配合 Electron 构建桌面软件开发环境，可以在 Electron 中使用 Angular 的各种特性，使开发桌面软件像开发网站一样简单、快捷，而且可以模块化，紧跟最新技术趋势。 安装 Angular CLI 和 Electron ...
shopify本地开发环境搭建
12-14
本文详细介绍了在本地计算机上搭建Shopify开发环境的步骤，帮助开发者快速配置出一个与Shopify云端工作环境相似的本地环境。 首先，需要安装Node.js，这是因为Shopify CLI工具是基于Node.js开发的。在安装Node.js的...
.Net Core+Angular Cli/Angular4开发环境搭建教程
01-03
一、基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源，修正为 淘宝的 NPM 镜像： npm install -g cnpm --registry=...
花半小时用豆包Marscode 和 Supabase免费部署了一个远程工作的导航站
DouBaoMarsCode的博客
09-24 956
IDE 可以后台直接用 AI 生成大部分的业务代码，也可以直接提问，大大缩短的一个项目上线的时间。最重要的是豆包Marscode和 supabase 都是免费的🤣，这个项目的目的只是测试搭建难度，希望这个想法对你有帮助。本文由博客一文多发平台OpenWrite发布！
supabase怎么创建数据库
02-05
### 使用 Supabase 创建数据库 #### 初始化项目与配置环境 为了使用 Supabase 创建和管理数据库，首先需要确保安装了必要的开发工具并进行了基本设置。这通常涉及创建一个新的应用程序实例以及获取访问凭证。 ```bash npm install -g supabase-cli ``` 接着，在终端中通过命令行工具登录到 Supabase： ```bash supabase login ``` 输入邮箱地址后会收到一封验证邮件，点击链接完成身份认证过程[^1]。 #### 设置新项目 一旦成功登录，就可以利用 `supabase init` 命令初始化本地工作区，并按照提示操作来启动新的Supabase项目。此过程中可以选择不同的模板或自定义选项以适应特定需求。 ```bash supabase init ``` 之后，根据指引填写相关信息（如项目名称），随后将自动部署基础设施资源至云端环境中。 #### 数据库表结构设计 进入SQL编辑器界面，可以通过编写SQL脚本来构建所需的表格架构。例如，要建立一个简单的用户信息存储表，可参照如下语句执行： ```sql CREATE TABLE users ( id SERIAL PRIMARY KEY, username VARCHAR NOT NULL UNIQUE, email TEXT NOT NULL UNIQUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` 对于更复杂的业务场景，则可能涉及到多个关联实体的设计；此时建议先绘制ER图辅助思考整体布局再逐步实施具体编码工作。 #### 导入初始数据集 除了手动录入记录外，还可以借助预置文件批量加载测试资料。比如提到的两个SQL脚本——`init_database.sql` 和 `init_demo_data.sql` ——分别用于搭建基础框架及填充样例条目。只需上传相应文档并通过SQL Editor运行即可生效。 #### 集成实时同步特性 得益于内置的支持机制，开发者能够轻松启用变更推送通知给前端页面或其他订阅者。当任意一处发生修改时，所有在线客户端几乎瞬间接获最新状态更新，从而保障用户体验的一致性和即时性[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值