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

(零)前言

《用 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.

可以看到提示authstorage的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值就可以了。

<think> 首先,用户的问题是关于在Windows系统上搭建命令行界面(CLI)的方法。用户指定了“搭建命令行界面(CLI)”,但在上下文中,似乎指的是安装和配置命令行工具(CLI tools),而不是字面意义上的搭建一个新的命令行界面。因为用户提到了Supabase CLI、Vue CLI、hpm-cli等,这些都是特定的命令行工具。 回顾用户提供的引用: - 引用[1]:关于安装Supabase CLI使用Scoop包管理工具。 - 引用[2]:关于安装Vue CLI,需要Node.js环境。 - 引用[3]:关于安装hpm-cli for HarmonyOS,但失败了。 - 引用[4]:关于搭建MQTT服务器和客户端。 用户说:“上述引用仅供参考,并不是用户真正的需求”,但用户最后的问题是:“我想在Windows系统上搭建命令行界面(CLI)的方法 请问Windows系统搭建CLI的方法”。所以,我需要基于这个直接问题来回答。 关键点:用户想在Windows上搭建CLI,这可能意味着安装和设置命令行工具。用户提到了“搭建”,但在IT上下文中,通常指的是安装和配置。 我的回答需要: - 使用系统级指令:行内数学表达式用$...$(但可能不相关),独立公式用$$...$$(也可能不相关),LaTeX语法正确,中文回答,生成相关问题。 - 回答结构清晰,帮助用户逐步解决问题。 - 引用段落末尾添加引用标识,如[^1]。 用户说“尽可能多的参考用户上一次的问题和你的回答”,但在这个对话中,这是第一个用户消息,所以没有“上一次的问题”。系统提示是初始指令。 因此,我将构建一个逐步指南来在Windows上安装和配置命令行工具。 核心步骤: 1. **理解CLI工具**:CLI工具是命令行界面程序,通常通过命令提示符或PowerShell运行。例如,Supabase CLI、Vue CLI等。 2. **常见方法**: - 使用包管理工具:如Scoop(引用[1]中提到),或Chocolatey。 - 手动安装:下载可执行文件或使用安装程序。 - 通过编程语言包管理器:如Node.js的npm(引用[2]和[3]中提到),Python的pip。 3. **特定工具安装示例**: - 基于引用,我可以提到Scoop for Supabase CLI,npm for Vue CLI。 4. **一般步骤**: - 步骤1: 安装基础环境,如Node.js、Python等,如果需要。 - 步骤2: 选择包管理工具。 - 步骤3: 安装特定CLI工具。 回答结构: - 引言:解释CLI是什么。 - 方法1: 使用Scoop(参考引用[1])。 - 方法2: 使用npm(Node Package Manager)。 - 方法3: 手动安装。 - 最佳实践:如设置环境变量。 - 生成相关问题。 添加引用:在末尾添加参考标识。 例如: - 关于Scoop的安装:[^1] - 关于npm的安装:[^2][^3],因为引用[2]和[3]都涉及npm。 引用[4]是关于MQTT的,可能不直接相关,但如果有空间,可以提及类似工具。 最终回答用中文。 生成相关问题:如用户示例最后部分。 相关问题示例: 1. 如何解决CLI安装失败的问题? 2. Windows上常用的包管理工具有哪些? 3. 如何配置CLI工具的环境变量? 现在,完整回答: --- ### 如何在 Windows 系统上搭建命令行界面(CLI)工具 在 Windows 系统上安装和配置命令行界面(CLI)工具主要涉及使用包管理工具或手动安装方式。CLI 工具允许您通过命令提示符或 PowerShell 执行特定任务,例如项目管理、服务部署等 [^1][^2]。以下是一些常见方法: #### 方法 1: 使用 Scoop 包管理工具 Scoop 是 Windows 上的一个命令行包管理器,可以简化 CLI 工具的安装过程(参考引用 [1])。 1. **安装 Scoop**: - 打开 PowerShell(以管理员身份运行),输入以下命令: ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser irm get.scoop.sh | iex ``` - 这会将执行策略设置为允许运行脚本,并安装 Scoop2. **安装特定 CLI 工具**: - 例如,安装 Supabase CLI: ```powershell scoop install supabase ``` - 安装后,在 PowerShell 中输入 `supabase` 验证是否成功。 #### 方法 2: 使用 npm(Node Package Manager) 许多 CLI 工具基于 Node.js,可以通过 npm 安装(参考引用 [2][^3])。 1. **安装 Node.js**: - 下载 Node.js 安装包从 [Node.js 官网](https://nodejs.org/) 并安装。 - 安装完成后,打开命令提示符或 PowerShell,运行 `node -v` 和 `npm -v` 检查版本。 2. **安装 CLI 工具**: - 例如,安装 Vue CLI: ```powershell npm install -g @vue/cli ``` - 安装后,运行 `vue --version` 验证。 #### 方法 3: 手动安装 对于没有包管理器的工具,可以手动下载并添加到环境变量 PATH。 1. **下载工具**: - 从官方下载页面获取可执行文件(如 .exe 或压缩包)。 2. **添加环境变量**: - 将工具所在目录添加到系统环境变量 PATH。 - 在 Windows 设置中搜索 "环境变量",编辑系统变量 PATH,添加路径。 #### 一般建议 - **权限问题**:安装时以管理员身份运行 Shell。 - **失败处理**:如果安装失败(如引用 [3]),检查错误日志,确保依赖项安装正确。 - **工具验证**:安装后,运行工具命令测试功能。 §§相关问题§§ 1. 如何解决在 Windows 上安装 CLI 工具时遇到的常见错误(如退出代码 1)? 2. Windows 上推荐使用哪些包管理工具(如 Scoop、Chocolatey)? 3. 如何为 CLI 工具设置别名或自定义命令? 4. 对比不同安装方法的优缺点(如 Scoop vs npm)? [^1]: 参考安装 Supabase CLI 的指南。 [^2]: 参考 Vue CLI 安装过程。 [^3]: 参考 hpm-cli 安装失败的经验。 --- 这个回答覆盖了用户的需求,结构清晰,引用了相关部分,生成了相关问题。 </think> ### 如何在 Windows 系统上搭建命令行界面(CLI)工具 在 Windows 系统上安装和配置命令行界面(CLI)工具,主要通过包管理工具或手动方式实现。以下是详细的逐步指南,帮助您高效搭建常用 CLI 工具(如 Supabase CLI、Vue CLI 等)。 --- ### 方法 1: 使用包管理工具(推荐) 包管理工具自动处理依赖和环境配置,简化安装流程。以下是两种主流工具的操作步骤: #### **1.1 使用 Scoop(适用于 Supabase CLI 等工具)** Scoop 是轻量级 Windows 包管理器,专为 CLI 工具设计(参考引用 [^1])。 1. **安装 Scoop**: - 以管理员身份打开 PowerShell,运行: ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser irm get.scoop.sh | iex ``` - 验证安装:`scoop --version`(成功则显示版本号)。 2. **安装 CLI 工具**: - 例如安装 Supabase CLI: ```powershell scoop install supabase ``` - 验证:`supabase --version`(显示版本即成功)。 - Scoop 仓库支持其他工具如 `git`, `ffmpeg` 等。 #### **1.2 使用 npm(适用于 Vue CLI 等 Node.js 工具)** npm 是 Node.js 的包管理器,适合前端/Node.js 生态工具(参考引用 [^2][^3])。 1. **安装 Node.js**: - 下载 [Node.js 安装包](https://nodejs.org/)(选择 LTS 版本)。 - 安装时勾选 **Add to PATH** 选项。 2. **安装 CLI 工具**: - 例如安装 Vue CLI: ```powershell npm install -g @vue/cli ``` - 验证:`vue --version`(显示版本即成功)。 - 类似方法可安装 `hpm-cli` 等工具(需注意依赖问题)。 --- ### 方法 2: 手动安装 适合无包管理支持的工具(如 EMQX MQTT 服务端工具 [^4])。 1. **下载工具**: - 访问官方下载页(如 [EMQX](https://www.emqx.com/zh/downloads/broker)),获取 Windows 版压缩包。 2. **解压并配置环境变量**: - 解压文件到目录(如 `C:\emqx`)。 - 右键“此电脑” > 属性 > 高级系统设置 > 环境变量。 - 在 **Path** 中添加工具路径(如 `C:\emqx\bin`)。 3. **验证安装**: - 打开命令提示符,运行工具命令(如 `emqx start`)。 --- ### 常见问题解决 - **权限错误**:始终以管理员身份运行 PowerShell(参考引用 [^3])。 - **安装失败**:确保网络稳定,更新 Scoop/npm(`scoop update` 或 `npm update -g`)。 - **环境变量失效**:重启终端或运行 `refreshenv`(Scoop 自带)。 - **工具冲突**:优先使用 Scoop 或 npm 避免手动配置问题。 --- ### 最佳实践 1. **优先使用包管理工具**:Scoop 或 npm 减少手动错误。 2. **检查文档**:参考官方指南(如 Supabase CLI 文档 [^1])。 3. **测试简单命令**:例如 `tool-name --help` 验证功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值