用 Supabase CLI 進行本地開發環境搭建

文章目錄

  • （零）前言
  • （一）Supabase CLI
    • （1.1）安裝 Scoop
    • （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 = 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=zzzzzzzzzzToken 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 pullConnecting 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:54321GraphQL URL: http://127.0.0.1:54321/graphql/v1S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgresStudio URL: http://127.0.0.1:54323Inbucket URL: http://127.0.0.1:54324JWT secret: super-secret-jwt-token-with-at-least-32-characters-longanon key: xxxxxxxx
service_role key: xxxxxxxxxxxxS3 Access Key: yyyyyyyyyyyyyyyyyyyS3 Secret Key: yyyyyyyyyyyyyyyyyyyyyyyyyS3 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值就可以了。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/11091.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/11091.shtml
英文地址，請注明出處：http://en.pswp.cn/web/11091.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

基于gin框架的文件上傳(逐行解析)

基于gin框架的文件上傳(逐行解析)

基于gin框架的文件上傳(逐行解析)記錄一下使用gin框架完成一個文件上傳的功能，一下是實現該功能的代碼，適合小白，代碼都有逐行解釋！ app.go: package routerimport ("chat/service""github.com/gin-gonic/gin&qu…
閱讀更多...
網絡工程師練習題

網絡工程師練習題

網絡工程師練習題 網橋怎樣知道網絡端口連接了那些網站？如果從端口收到一個數據幀，則將其源地址記入該端口的數據庫當網橋連接的局域網出現環路時怎么辦？運行生成樹協議阻塞一部分端口。使用IEEE 802.1q協議，最多可以配置4094個VLAN。VLAN中繼協議（VTP）有不同的工作模式，…
閱讀更多...
C++異常詳解

C++異常詳解

文章目錄 前言一、回顧C語言二、異常的概念三、異常的使用1.異常的拋出和捕獲2.異常的重新捕獲 三.異常安全與異常規范1.異常安全2.異常規范 四.自定義異常體系五.C標準庫的異常體系六.異常優缺點練習題總結 前言 在本篇文章中，我們將會詳細介紹一下有關C異常的講解…
閱讀更多...
微服務架構：注冊中心 Eureka、ZooKeeper、Consul、Nacos的選型對比詳解

微服務架構：注冊中心 Eureka、ZooKeeper、Consul、Nacos的選型對比詳解

微服務架構（Microservices Architecture）是一種基于服務拆分的分布式架構模式，旨在將復雜的單體應用程序拆分為一組更小、更獨立的服務單元。這些服務單元可以獨立開發、測試、部署，并使用不同的技術棧和編程語言。它們通過輕量級…
閱讀更多...
[華為OD] C卷 dfs 特殊加密算法 100

[華為OD] C卷 dfs 特殊加密算法 100

題目： 有一種特殊的加密算法，明文為一段數字串，經過密碼本查找轉換，生成另一段密文數字串。 規則如下 1?明文為一段數字串由0-9組成 2.密碼本為數字0-9組成的二維數組 3?需要按明文串的數字順序在密碼本里找到同樣的數字串…
閱讀更多...
PUBG非升級實用槍皮-部分盤點

PUBG非升級實用槍皮-部分盤點

藏匿處的黑貨箱武器需要耗費高額成本才能升級 對于像我這樣的日常休閑玩家來說是一筆不小的（巨大的！）負擔 其實有許多普通非升級槍皮也是不錯的選擇 今天就來盤點一下我自己日常在用的普通皮 來看看你是不是也在用一樣的 （僅是盤點…
閱讀更多...
【OceanBase診斷調優】—— 租戶資源統計項及其查詢方法

【OceanBase診斷調優】—— 租戶資源統計項及其查詢方法

本文主要介紹 OceanBase 數據庫中租戶資源統計項及其查詢方法。 適用版本 OceanBase 數據庫 V4.1.x、V4.2.x 版本。 CPU 資源統計項 邏輯 CPU 使用率（線程處理請求的時間占比）。 通過虛擬表 __all_virtual_sysstat 在 SYS 系統租戶下，查看…
閱讀更多...
AtCoder Beginner Contest 308 A題 New Scheme

AtCoder Beginner Contest 308 A題 New Scheme

A題：New Scheme 標簽：模擬 題意：給定 8 8 8個數的序列，詢問這些數是否滿足以下條件： 在 100 100 100到 675 675 675之間且能被 25 25 25整除序列是單調非遞減的 題解：按題意模擬判斷就好了。 代碼&#…
閱讀更多...
09.zabbix自定義模塊并使用

09.zabbix自定義模塊并使用

zabbix自定義模塊并使用 根據tcp的11中狀態獲取值，進行批量配置監控項 [rootyunlong66 ~]# cat /etc/zabbix/zabbix_agentd.d/tcp.conf UserParameterESTABLISHED,netstat -antp |grep -c ESTABLISHED UserParameterSYN_SENT,netstat -antp |grep -c SYN_SENT Use…
閱讀更多...
Obsidian/Typora設置圖床

Obsidian/Typora設置圖床

在obsidian中默認圖片是保存在本地的，但是在要導出文檔上傳到網上時，由于圖片保存在本地，會出現無法加載圖片的問題。 這里引用的一段話： 這里使用picgo-core和gitee實現圖床功能， 參考1： Ubuntu下PicGO配…
閱讀更多...
Github學習

Github學習

1.Git與Github 區別: Git是一個分布式版本控制系統，簡單的說就是一個軟件，用于記錄一個或若干個文件內容變化，以便將來查閱特點版本修訂情況的軟件。 Github是一個為用戶提高Git服務的網站，簡單說就是一個可以放代碼的地方。Gi…
閱讀更多...
C語言 | Leetcode C語言題解之第85題最大矩形

C語言 | Leetcode C語言題解之第85題最大矩形

題目&#xff1a; 題解&#xff1a; int maximalRectangle(char** matrix, int matrixSize, int* matrixColSize) {int m matrixSize;if (m 0) {return 0;}int n matrixColSize[0];int left[m][n];memset(left, 0, sizeof(left));for (int i 0; i < m; i) {for (int j …
閱讀更多...
SeetaFace6人臉活體檢測C++代碼實現Demo

SeetaFace6人臉活體檢測C++代碼實現Demo

SeetaFace6包含人臉識別的基本能力&#xff1a;人臉檢測、關鍵點定位、人臉識別&#xff0c;同時增加了活體檢測、質量評估、年齡性別估計&#xff0c;并且順應實際應用需求&#xff0c;開放口罩檢測以及口罩佩戴場景下的人臉識別模型。 官網地址&#xff1a;https://github.co…
閱讀更多...
【補充】圖神經網絡前傳——DeepWalk

【補充】圖神經網絡前傳——DeepWalk

論文閱讀 論文&#xff1a;https://arxiv.org/pdf/1403.6652 參考&#xff1a;【論文逐句精讀】DeepWalk&#xff0c;隨機游走實現圖向量嵌入&#xff0c;自然語言處理與圖的首次融合_隨機游走圖嵌入-CSDN博客 abstract DeepWalk是干什么的&#xff1a;在一個網絡中學習頂點…
閱讀更多...
【Mac】Ghost Buster Pro（蘋果電腦內存清理專家） v3.2.5安裝教程

【Mac】Ghost Buster Pro（蘋果電腦內存清理專家） v3.2.5安裝教程

軟件介紹 Ghost Buster pro是一款針對Mac系統的電腦清理和優化工具&#xff0c;可以幫助用戶清理系統垃圾、修復注冊表錯誤、卸載不需要的軟件、管理啟動項等&#xff0c;從而提高系統性能和穩定性。 安裝教程 1.打開鏡像包&#xff0c;拖動「Ghost Buster Pro」到應用程序中…
閱讀更多...
GIT SSL certificate problem

GIT SSL certificate problem

簡單來說&#xff0c;SSL 協議可以為你的 Web 瀏覽器或其他進程提供一種安全的通道&#xff0c;使服務器和客戶端之間的數據傳輸過程不被第三方竊取或篡改。這非常重要&#xff0c;特別是在處理敏感數據&#xff0c;比如信用卡信息、用戶名和密碼等情況下。 現在&#xff0c;S…
閱讀更多...
Flutter 中的 Row 小部件：全面指南

Flutter 中的 Row 小部件：全面指南

Flutter 中的 Row 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;Row 是一個水平布局的小部件&#xff0c;用于將子控件沿著水平軸排列。Row 類似于 HTML 中的 div 標簽&#xff0c;但僅限于水平布局。它非常適合用來創建行式布局&#xff0c;如表單輸入、按鈕組、標簽…
閱讀更多...
【linux軟件基礎知識】完全公平調度

【linux軟件基礎知識】完全公平調度

完全公平調度&#xff08;CFS&#xff09; CFS根據每個進程相對于所有可運行線程總權重的權重為每個進程分配一個“時間片”。 CFS 的目標是近似“無限小”的調度持續時間&#xff0c;稱為目標延遲。 較小的目標延遲可以提高交互性并接近完美的多任務處理&#xff0c;但其代價…
閱讀更多...
【Linux網絡】Https【下】{CA認證/證書的簽發與認證/安全性/總結}

【Linux網絡】Https【下】{CA認證/證書的簽發與認證/安全性/總結}

文章目錄 1.引入證書【為方案五鋪墊】1.1再談https1.2SSL/TLS1.3CA機構1.4理解數字簽名1.4繼續鋪墊1.5方案五服務端申請證書回顧一二三回顧方案四方案五過程尋找方案五的漏洞客?端對證書進?認證 2.查看證書2.1查看瀏覽器的受信任證書發布機構2.2中間?有沒有可能篡改該證書2.…
閱讀更多...
差分約束 C++ 算法例題

差分約束 C++ 算法例題

差分約束 差分約束 是一種特殊的 n 元一次不等式組&#xff0c;m 個約束條件&#xff0c;可以組成形如下的格式&#xff1a; { x 1 ? x 1 ′ ≤ y 1 x 2 ? x 2 ′ ≤ y 2 ? x m ? x m ′ ≤ y m \begin{cases} x_1-x_1^{} \le y_1 \\ x_2-x_2^{} \le y_2 \\ \cdots \\ x_…
閱讀更多...
最新文章

Copyright @ 2022~2023