SvelteKit + Vercel + SupabaseでWebアプリ開発
ゆるWeb勉強会@札幌 Advent Calendar 2021 21日目の記事です。
前置き
おはようございます。DE-TEIUです。
今回はSvelteKitとSupabaseとVercelでWebアプリを開発した話をします。
成果物
秘密結社のボスの方などいらっしゃいましたら是非ご利用ください。
構成
フロントエンド・サーバサイド(一部)実装：SvelteKit
データベース：Supabase経由でPostgreSQL
デプロイ先：Vercel
解説
SvelteKit
SvelteKitとは、JSフレームワークの一種であるSvelteの機能を拡張したものです。
(ReactにおけるNext.js、Vue.jsにおけるNuxt.jsみたいなもの)
Svelteにルーティング機能やサーバサイドレンダリング機能等が追加された構成になっており、本格的なWebアプリが開発できるようになっています。
これとは別に、SapperというSvelteベースのフレームワークもあります。しかしこちらはSvelteKitの前身のようなもので既に開発も止まっているため、これから新たにSvelteでWebアプリを開発する場合はSvelteKitを使用する方が良いでしょう。
(Sapper用のライブラリを使いたい場合等はそちらでも良いと思います)
Vercel
Vercelとは、Webアプリのデプロイ作業をほぼ自動でやってくれるWebサービスです。
GitHub、GitLab、Bitbucketのリポジトリとブランチを指定すると、ブランチの変更を検知して自動デプロイが実行されます。
無料プランでも機能の制限やプロジェクト数の制限はありません。(ただし個人で非営利な目的の場合のみ)
ビルド時に何のコマンドを実行するかとか、どのディレクトリを公開対象にするか、等の設定もできます。
とは言えSvelteやSvelteKitはVercelでサポートされてるので基本的にデフォルトの設定で良いです。
ちなみにVercelでサポートしている言語はNode.js、Python、Go、Rubyです。
ホスティングの機能もあります。
デプロイ後のアプリのURLはデフォルトで https://[プロジェクト名].vercel.app/ になります。独自ドメインの設定も可能。
SvelteKit製WebアプリをVercelでリリースする際の注意
Vercelに連携する前に、公式ドキュメントの手順を確認し、
npmから @sveltejs/adapter-vercel または @sveltejs/adapter-auto をインストールしてください。その後は必要に応じてsvelte.config.jsに設定を追加してください。
Supabase
Supabaseとは、Webアプリのバックエンドの機能をAPIとして提供してくれるBaaS（Backend As A Service）です。
このサービスはGoogleのFirebaseの代替品を目指しており、使える機能も結構似ています。
(JavaScriptのモジュール経由でAPIにアクセスできたり、ストレージが利用可能だったり、ユーザー認証機能があったり等)
SupabaseとFirebaseの大きな違いは、データベースです。FirebaseではNoSQL（Not Only SQL）と呼ばれるデータベースシステムが採用されています。
特徴として、データの構成がKey-Value型である事（が多い）、データへのアクセスにSQLを使用しない事、等が挙げられます。
それに対してSupabaseでは、RDBMSの一種であるPostgreSQLが採用されています。
Supabaseのデータベースについて
Supabaseは無料でも使う事ができ、Webアプリを最大4つまで作れます（正確には2つの組織と、それぞれの組織内で2つのアプリ）。データベースの容量は500MBと小さいですが、
ちょっとしたアプリを作るだけなら十分でしょう。
ちなみに月額25$の有料プランだと、データベースの容量が8GBまで増え、バックアップも自動でとってくれるようになります。
また、Supabaseが提供するデータベース管理画面は結構優秀で、ブラウザ上でテーブルの作成やレコードの編集ができるようになっています。
SQLの実行もできます。
JavaScriptでSupabaseのデータベースにアクセスしたい場合は、Supabaseモジュールを使います。
例えばselect文を実行するなら、こんな感じです。
import { supabase } from '../../supabaseClient'; //supabaseモジュールをインポート
//...
//...
//...
const key = "1"; //そのレコードのIDとする
try {
const { data, error } = await supabase.from('message').select('*').eq('key', key).single();
//データ取得成功時の処理
if (error) throw error;
return data;
} catch (error) {
//エラー時の処理
}
これで、messageテーブルのkeyカラムの値が1のレコードを1件抽出する、というような処理になります。
他、詳しくは公式ドキュメントがかなりわかりやすくまとまっているので、こちらをご参照ください。
ちなみに、工夫すればテーブルの結合を含む処理も実装できますが、多少ややこしくなるので個人的にはPostgreSQL側でビューを作ってそれをselectする方法をおすすめします。
Supabaseの弱点
Supabaseの弱点としては、Webアプリのデプロイとホスティングを行うサービスが提供されない点が挙げられます。
（提供されるのはデータベースやストレージにアクセスするためのAPIだけ）
そのため、SupabaseのAPIを呼び出すWebアプリ(HTML、CSS、JavaScript等のWebアプリを構成するファイル)はどこか別のサーバーに置く必要があります。
自分でWebサーバーを建てても良いですし、この記事で紹介したVercel等のクラウドサービスを使うのもアリです。
まとめ
小規模なWebアプリを短時間でサッと作りたい場合は、
- バックエンドをSupabaseで用意
- フロントエンドのコードを適当なJSフレームワークで作成
- コードをVercelにデプロイ
という構成がわりと良い感じでした。
Discussion