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

文章目录

• （零）前言
• [（一）Supabase CLI](#（一）Supabase CLI)
• • [（1.1）安装 Scoop](#（1.1）安装 Scoop)
  • [（1.2）用 Scoop 安装 Supabase CLI](#（1.2）用 Scoop 安装 Supabase CLI)
• （二）本地项目环境
• • （2.1）初始化项目
  • （2.2）登录
  • （2.3）关联本地/远程项目
  • （2.4）拉远程项目
  • （2.5）本地项目启停
• （三）本地和远程的区别
• • （3.1）限制和注意事项
  • （3.2）Next.js应用的Supabase配置

（零）前言

在《用 Next.js 和 Supabase 进行"全栈"开发的入门》中，我搭(抄)建(袭)了一个类似论坛雏形的东西。

后端用了Supabase官方提供的托管服务，免费的那种方案。

虽然仅仅是学习，但由于它提供的服务基于AWS，没有可选中国的（近点的有：孟买，新加坡，东京，首尔）。

所以每次后台操作都会很慢，执行个查询SQL大概3-5秒，最不能忍受的是，时不时的断线几分钟无法访问。

搞得我不知道是js的问题，还是网络慢。所以想在本地弄套环境，省心。

（一）Supabase CLI

概念：

• 💡CLI = C ommand L ine 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值就可以了。