FOSS4G KYUSHU 2025

asdf

Transcript

1. FOSS4GKYUSHU 2025 Supabaseを使って高速に WebGISを構築する 佐々木　遥人
2. ©Project PLATEAU / MLIT Japan 株式会社MIERUEでWebGISを作っていま す。元々は土木業界で建設コンサルをやってい たのですが、ITが面白すぎて転職しました。 IT業界3年目！位置情報1年目！ 自己紹介 佐々木 遥人 SASAKI Haruto WebGISエンジニア
3. ©Project PLATEAU / MLIT Japan 自己紹介 •普段はTSでフロントバックを書い ています。趣味でRustも時々。 •土、ボーリングデータに関心があ り、柱状図を3Dで可視化したり、 土の色を判別しやすくしたりして います
4. ©OpenStreetMap contributors 01　Supabaseとは 02　高速にWebGISを構築する 03　その他ヨサミ・ツラミ 04　まとめ・宣伝 目次
5. ©OpenStreetMap contributors 01 Supabaseとは
6. ©Project PLATEAU / MLIT Japan Supabaseとは •Backend as a service •IaaSよりもさらに抽象度の高いも のを提供している。 •サービスをSQLで管理する •「すーぱーべーす」がよりネイティ ブに近い発音らしい What is Supabase ? https://x.com/kiwicopple/status/191 6813407350911292
7. ©Project PLATEAU / MLIT Japan Supabaseとは • DB、ストレージ、静的ファイルのキャッシュ、認証、定期実行、などの一般的な Web開発に利用されるコンポーネントが高い抽象度で提供されている • それらを繋ぎこみが容易。直接的な価値を提供することのないインフラを高速 で構築することができる。 • それらは(ほぼ)SQLで記述されており、サービスを構築する上ではSQLをか ければ良い。 Why use Supabase ?
8. ©Project PLATEAU / MLIT Japan Supabaseとは •ストレージを作成するSQL SQLでサービスを記述する例
9. ©OpenStreetMap contributors 02 高速にWebGISを構築する
10. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •WebGISでタイル配信をする時は主に動的タイル、静的タイルの2つの 配信方式が存在する •今回は以下の場合を考える ◦ 動的タイル: DBからMVTをリクエスト毎に生成して配信 ◦ 静的タイル: ストレージにPMTilesを配置して配信 Supabase ✖ WebGIS
11. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する • Supabaseの裏側で動作しているのはPostgreSQL • なので、MVTを返すことができるPostGIS拡張機能を利用できる ◦ 他にも日本語検索で便利なPGroongaなど、様々なものが利用可能で ある • また、SupabaseではPostgRESTという拡張機能を用いることで、DBの関 数を作成し、それをSupabaseのクライアントから呼び出すことができる 動的タイル
12. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •PostgreSQLに関数を定義する
13. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •Supabaseのクライアントから呼 び出せる
14. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •定期的に実行する処理を PostgreSQLの関数に定義して、 定期的に実行させる
15. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •PMTilesが配置されるサーバーはHTTP Range Requestに対応し ている必要がある ◦ Supabase Storageは上記に対応しているので、問題なく利用 できる •さらに、Storageの設定さえしてしまえばCDNでキャッシュされる 静的タイル
16. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •ストレージを作成するSQL
17. ©Project PLATEAU / MLIT Japan 高速にWebGISを構築する •Supabaseのクライアントから署 名付きURLを生成 •MaplibreでPMTilesを読み込む
18. ©OpenStreetMap contributors 03 その他ヨサミ・ツラミ
19. ©Project PLATEAU / MLIT Japan その他ヨサミ・ツラミ •特にTypeScriptとの相性がよく、DBから型を自動生成してくれる •上記の型とSupabase クライアントを利用することで、Prismaなどの ORMを利用することなくフロントエンドとバックエンドとの通信をより近 い距離感で行うことができる •工数の削減が実現でき、より良い成果物を提供することができる ヨサミ
20. ©Project PLATEAU / MLIT Japan その他ヨサミ・ツラミ • DBのブランチング機能がある ◦ アプリに破壊的な変更を加える時、ブランチングされているとレビュー がしやすい ◦ フロントをVercel、AWS Amplify、Cloudflareにデプロイするとフ ロントもバックもPRごとにブランチングされた環境が構築できる ◦ 💰はみないことにする ヨサミ
21. ©Project PLATEAU / MLIT Japan その他ヨサミ・ツラミ •IaCが辛い ◦ DBの設定以外の部分(SSOの設定や、JWTの有効期限)は Terraformで設定することができる、対応していない部分がある ◦ 直接APIを叩けば解決するものもある ツラミ
22. ©Project PLATEAU / MLIT Japan その他ヨサミ・ツラミ •Supabaseで対応できない要件が出てきた時にどうするか問題 ◦ 管理するコンポーネントが増えてしまい、2つのインフラ間で連携 を取らなければいけないシチュエーションが出てくると本末転倒感 がある •ただ、成長中のサービスなのでもっと機能が補強されていくはず ツラミ
23. ©OpenStreetMap contributors 04 まとめ・宣伝
24. ©Project PLATEAU / MLIT Japan まとめ・宣伝 •Supabaseを使って動的タイル、静的タイルは簡単に配信できる！ •説明だけではわかりづらいことがたくさんあったと思います。すみません いかがだったでしょうか？
25. ©Project PLATEAU / MLIT Japan ヨサミ・ツラミ •FOSS4G Hokkaido 2025で 「SupabaseでWebGISを構築す る」というタイトルでハンズオンをや ります •今回の内容をやるつもりなので、ご 興味があればぜひ来て下さい ハンズオンやります！