Turso 資料庫本地端開發與遷移

返回列表

影片介紹

哈囉大家好，我是 JK！今天我們要來測試一個名為 Turso 的資料庫平台。Turso 是一個資料庫平台，可以讓我們很方便地在本地端進行開發，並能部署到雲端服務，而且它的免費額度足夠一個人完成一個簡單的專案。

本集重點與使用的技術棧：

  1. 專案初始化：我們使用 Nuxt 來開啟一個全端專案，Nuxt 能夠同時處理後端與前端，並進行資料庫連線。
  2. 程式碼撰寫輔助：我們利用 Cloud Code 協助撰寫後端的 API 程式碼。
  3. ORM 連線：為了最方便地進行 DB 連線，我們採用 ORM 的方式，Turso 的資料庫支援 Drizzle 這個 ORM 套件。
  4. 資料庫與 Migration：
    • 影片示範了建立 Schema 欄位內容，以及如何產生 LocalDB。
    • 我們展示了兩種產生資料庫的方式：直接使用 DB Push，以及更標準的 Migration（版控）流程，即使用 Generator 產生 .SQL 檔案來進行版本控制。
  5. Web 介面管理：我們使用 DB Studio 指令開啟了 Web 介面，方便管理資料庫內容，並查看建立好的 Todo 資料表（包含 ID、Title、完成度、時間等欄位）。
  6. 全端 CRUD Demo：我們展示了簡單的 Todo List 前端介面，並實際操作了新增、更新、刪除資料，並在資料庫中驗證了操作結果。
  7. 資料庫版控實戰：我們實戰了資料庫版控流程，透過 Cloud Code 在 DB Schema 中新增了一個名為 Due Date 的欄位，並透過 Generator 與 Migrate 更新了資料庫結構和前端介面。

本集主要展示了使用 Turso 資料庫在本地端進行全端開發的過程，以及如何執行 Migration 步驟。

下一集，我們將會進行簡單的部署測試！

時間軸

開場問候

大家好我是JK

介紹 Turso 資料庫平台

今天來介紹Turso的一個資料庫平台

Turso 平台優勢

它可以幫我們把資料庫部署到全球的一個節點，可以有一個比較低延遲性的連線方式，讓我們可以快速的取得資料庫的內容

建立全新 Nuxt 專案

一開始先啟動一個全新的Nuxt專案，新增一個Nuxt的專案叫Demo

npx nuxi init demo

開啟專案

專案建立好之後，直接用VS Code來開啟這個專案

使用 Claude Code

接下來撰寫程式碼的方式是使用Claude Code，開啟終端機然後登入Claude Code

選擇 ORM 連線方式

要用這個專案去連線Turso資料庫，最方便的方式是使用ORM的一個方式。ORM有非常多的套件，這邊是使用Drizzle

Drizzle ORM 介紹

Drizzle這個套件可以讓我們很方便去連線Turso這個資料庫，然後也可以很方便的做本地的開發

下指令給 Claude Code

ORM使用Drizzle，資料庫是使用Turso，會有這些指令去做Migration跟Push的方式，做一個簡單的Todo List範例

ORM使用Drizzle
資料庫是使用Turso
會有這些指令去做Migration跟Push的方式
可以使用一個簡單的Todo List來做範例

等待程式碼撰寫

等待它去把這個內容以及程式碼撰寫完畢

檢視 Claude Code 生成結果

Claude Code執行完畢，來看一下它做了哪些事情

環境變數與設定檔

它幫我們做了一個環境變數的設定，以及Drizzle的一些設定檔

Server API 與資料庫連線

跟Server它做了四支API，這邊也做了資料庫的一個連線方式

Schema 資料表定義

也幫我做了一個Schema，這個Schema就是我要建立資料庫的一個資料表的內容

前端頁面展示

在前端這邊也幫我做了一個前端頁面的展示

查看 package.json

要來怎麼樣做使用我們可以先看一下package.json，這邊有這四個指令

db:push 新增資料庫

這四個指令要先下db:push就可以去新增一個資料庫

npm run db:push

產生本地資料庫

執行完畢它就會幫我把這個Schema的內容去產生一個本地的資料庫

生成 local.db

可以發現這邊產生一個local.db，這個就是資料庫

開啟 DB Studio

要怎麼去看這個資料庫的內容，可以去執行npm run db:studio

npm run db:studio

DB Studio Web 介面

這個指令在package.json這邊有去撰寫，這個指令它會開啟一個本地的web的介面

查看本地資料庫

這邊開啟之後會開啟我這個本地的資料庫

檢視 Todo 資料表

確實有一個todo的一個資料表

確認資料表欄位

這邊有這四個欄位ID、title跟完成跟這個時間

前端頁面展示

來做一個簡單的前端頁面的展示，開啟這個前端的localhost 3000 port

UI 介面測試

一個簡單的UI介面這邊也是它幫我生成的，然後我們來做一個測試

新增測試資料

輸入aa，這邊新增一筆aa了

驗證新增結果

我們看一下資料表這邊確實也新增一筆aa，ID是1

修改資料測試

然後我做一個修改

驗證修改結果

這邊確實也變成1了

刪除資料測試

那我把它刪除掉

驗證刪除結果

這邊資料表刪除了，所以我就完成一個本地端開發這個Turso的一個資料庫的方式了

介紹 Migration 方式

但是在這邊我們一般在做資料庫的迭代的時候，會使用migrate的方式去做迭代，譬如說我們有新增欄位或修改欄位

Generate 與 Migrate 指令

我們來看一下指令會有兩個指令，一個是generate跟migrate

執行 db:generate

一開始我們如果有新增欄位的話，我們就去執行npm run然後db

npm run db:generate

產生 Migration SQL 檔

它就幫我產生一個migration裡面會有一個sql檔，這邊確實有這四個欄位，所以這是一開始資料庫的內容

執行 db:migrate

我就可以去做migrate了，所以我這邊去執行migrate

npm run db:migrate

透過 SQL 建立資料庫

它就會用這個.sql檔去幫我們去開啟一個新的資料庫了，這個local.db就建立好了

新增欄位示範

接下來如果有新增欄位的話一樣用一樣的方式，所以我這邊去新增欄位

Claude Code 新增時間欄位

我請Claude Code去幫我新增一個時間的欄位，然後API跟前端也同步新增

程式碼完成與自動 Generate

這邊Claude Code已經把程式碼做完了，那它也自動幫我跑了這一個generate

檢視新增的欄位

所以我們可以看一下這邊在generate確實新增一個全新的欄位

Migrate 匯入新欄位

然後再去做migrate的話，它就會幫我把這個.sql檔把它匯入到這個local.db了

開啟前端查看更新

那接下來我們就可以來開啟前端的畫面看長什麼樣子

確認 Due Date 欄位

我們先來看一下資料表的部分，這邊確實新增一個due date的一個新的欄位

前端時間欄位

然後在前端這邊也做了一個時間的欄位，所以我們可以來做一個簡單的測試

測試加入時間

加入時間，這邊新增一個時間然後看一下資料庫這邊

驗證 Due Date 資料

確實也新增一筆有due date的時間了

完成 Migration 示範

那這樣子就做完一個資料庫的migrate了

總結

那以上就是簡單示範使用Turso的一個本地端開發模式，然後並且介紹如何去做資料庫的migration