Hasuraってナンダ！？

by ikuma-t

Slide 1

Slide 1 text

社内勉強会 Hasuraってナンダ!？〜なんとなくを脱却するためのHasura勉強会〜 2023/02/10 14:30~15:00 @ google meet

Slide 2

Slide 2 text

よくある光景よくある光景そうっすね、 Hasuraはフロントエンドとデータベースの中継役みたいなやつなので、関係ありますこの機能ってHasura関係あるんだっけ？ PM エンジニアよくある光景

Slide 3

Slide 3 text

空想上の生き物みたいなHasura 毎回同じようなやり取りしている... ここを共通認識にしてコミュニケーションコストを下げたい

Slide 4

Slide 4 text

この勉強会のゴール Hasuraが何をしているのか理解する！作業にHasuraが影響するのか判断できるようになる！

Slide 5

Slide 5 text

目次 A8 Hasuraの役0 &8 Hasuraのニガテなこ! 8 Hasura ConsoleとDB管 48 サービスとしてのHasur" É8 まとめ

Slide 6

Slide 6 text

1 Hasuraの役割

Slide 7

Slide 7 text

このChapterのゴールアプリケーションにおいて Hasuraがどういう役割を担っているのか理解しよう！

Slide 8

Slide 8 text

そもそもWebアプリってどうやって作るんだっけ？サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を実行する　ために必要・サービス運営側の管轄になるデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL いろいろあるけど、だいたいこんな感じ APIはお仕事を依頼するための窓口 SQLはデータを取得するための言語

Slide 9

Slide 9 text

Slide 10

Slide 10 text

実際にこの構成で作ってみると...？サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を実行する　ために必要・サービス運営側の管轄になるデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書くできたわバックエンドの人フロントエンドの人（だいたい）バックエンドの人 OK はあっ！

Slide 11

Slide 11 text

実際にこの構成で作ってみると...？サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を実行する　ために必要・サービス運営側の管轄になるデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書く 3 APIとしてフロントエンドに公開するできたわバックエンドの人フロントエンドの人（だいたい）バックエンドの人 OK

Slide 12

Slide 12 text

実際にこの構成で作ってみると...？サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を実行する　ために必要・サービス運営側の管轄になるデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書く 3 APIとしてフロントエンドに公開する 4 APIを利用してデータを取得・更新する画面を実装できたわバックエンドの人フロントエンドの人（だいたい）バックエンドの人 OK はあっ！

Slide 13

Slide 13 text

実際にこの構成で作ってみると...？サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を実行する　ために必要・サービス運営側の管轄になるデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書く 3 APIとしてフロントエンドに公開する 4 APIを利用してデータを取得・更新する画面を実装できたわバックエンドの人フロントエンドの人（だいたい）バックエンドの人 OK はあっ！テーブル変更のたびに毎回これやる必要がある APIができるまで、フロントエンドは待ちが発生する

Slide 14

Slide 14 text

最近はフロントエンドはPC・モバイルとかいろいろあったりするので、待ちが発生すると、それら全部の開発に影響出るね yb テーブルの変更のたびに、APIを実装する必要があるV Sb APIが実装できるまで、フロントエンドに待ちが発生する。 APIをバックエンド側で実装する場合の課題

Slide 15

Slide 15 text

やっと登場この課題を解消するのが『Hasura』

Slide 16

Slide 16 text

Hasuraで作ってみると...？ Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更するバックエンドの人フロントエンドの人（だいたい）バックエンドの人はあっ！

Slide 17

Slide 17 text

Hasuraで作ってみると...？ Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書く 3 APIとしてフロントエンドに公開するバックエンドの人フロントエンドの人（だいたい）バックエンドの人はあっ！ Hasuraが自動でやってくれる！

Slide 18

Slide 18 text

Hasuraで作ってみると...？ Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない API SQL 1 データベースのテーブルを追加・変更する 2 ロジックとデータベースへの接続処理を書く 3 APIとしてフロントエンドに公開する 4 APIを利用してデータを取得・更新する画面を実装バックエンドの人フロントエンドの人（だいたい）バックエンドの人はあっ！ Hasuraが自動でやってくれる！

Slide 19

Slide 19 text

Hasuraを使うと... データベースからAPIを自動生成するのでアプリがめちゃ速く作れる！

Slide 20

Slide 20 text

HasuraはGraphQL形式のAPIを提供する Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていない GraphQL SQL お願いします〜！かしこま！変換問い合わせ

Slide 21

Slide 21 text

GraphQLとSQL GraphQL SQL 参照（ EAD） R 更新（ PDATE） U 削除（ ELETE） D 登録（ REATE） C Mutation INSERT SELECT UPDATE DELETE Mutation Mutation Query ・GraphQLはHasura独自の仕組みではなく、一般的なAPIの様式の1つ・HasuraはGraphQLでリクエストを受け付けて、リクエストに合わせた形式のSQLに　変換してDBへアクセスしてくれている

Slide 22

Slide 22 text

2 Hasuraのニガテなこと

Slide 23

Slide 23 text

よくある光景 ...退職？全部やっといたるわ！ Hasura バックエンドバトンタッチ？

Slide 24

Slide 24 text

このChapterのゴールバックエンドはどこへ行った？ Hasuraがニガテなことを理解して、説明できるようになろう！

Slide 25

Slide 25 text

Hasuraのニガテなこと Hasuraは複雑なロジックに対応できない

Slide 26

Slide 26 text

単純なケース Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていないバックエンドの人フロントエンドの人はあっ！データこのデータ使って、ユーザー情報登録頼む！テーブル OK！ ...

Slide 27

Slide 27 text

複雑なケース Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成する・真ん中のアイコンはなぜか「Lambda」データベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時には翻訳が　必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や重たい処理には　向いていないバックエンドの人フロントエンドの人はあっ！データこのデータ使って、ユーザー情報登録頼む！もし名前が空欄だったらエラーで、あとフラグが立ってたら、追加で別のテーブルへも登録して！！テーブルむ〜り〜 ... ...!

Slide 28

Slide 28 text

詰んだ...？

Slide 29

Slide 29 text

...!

Slide 30

Slide 30 text

バックエンドエンジニア注：画面以外にもたくさんやることがあるので、バックエンドエンジニアが暇していることはないです。進行上の都合でこういう演技をしてもらっています。またせたなッ！

Slide 31

Slide 31 text

Hasura Actionsとは複雑な処理を「Hasura Actions」として定義しておくことで、別の人に処理を移譲できる仕組み

Slide 32

Slide 32 text

これがだ！ Hasura Actions Hasura ・フロントエンドとデータベースの仲介役・データベースの情報から自動でAPIを生成　するデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時　には翻訳が必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や　重たい処理には向いていないバックエンドの人フロントエンドの人はあっ！データこのデータ使って、ユーザー情報登録頼む！もし名前が空欄だったらエラーで、あとフラグが立ってたら、追加で別のテーブルへも登録して！！サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を　行するために必要・サービス運営側の管轄になるまかせた！！（Hasura Actions）登録処理等々

Slide 33

Slide 33 text

Hasuraが対応できる操作 Hasura GraphQL GraphQL SQL 参照（ EAD） R 更新（ PDATE） U 削除（ ELETE） D 複雑な処理登録（ REATE） C Mutation GraphQL Mutation GraphQL Mutation INSERT SELECT UPDATE DELETE - Hasura Actions Query

Slide 34

Slide 34 text

3 Hasura ConsoleとDB管理

Slide 35

Slide 35 text

このChapterのゴール Hasuraで行うことができるDB操作とその仕組みを理解しよう！

Slide 36

Slide 36 text

Hasura Console Console コア部分 API生成とかの処理を行うデータ管理やGraphQL操作のための画面を提供する・GraphiQL 　（GraphQLの試し打ち）・テーブルの追加・変更・データ修正・SQL実行・Hasura Actions定義

Slide 37

Slide 37 text

Hasura ConsoleによるDB定義変更（1）デモあり Hasura Consoleでぽちぽちやると、データベースの定義を変更できる。

Slide 38

Slide 38 text

Hasura ConsoleによるDB定義変更（2） Hasura ConsoleからのDB定義変更も、最終的にはただのSQL Hasura コア部分 DB定義変更 Hasura Console データベース DB定義変更のSQL実行

Slide 39

Slide 39 text

Hasura ConsoleによるDB定義変更（2）自分の開発環境他の開発者のDB 適用されない本番環境のDB 適用されない Hasura Consoleで修正できるのは接続先のDBのみ

Slide 40

Slide 40 text

他の環境のDBにも同じ修正を適用するには？

Slide 41

Slide 41 text

メタデータとマイグレーションファイル Hasura コア部分 DB定義変更 Hasura Console データベース DB定義変更のSQL実行メタデータマイグレーション変更後のDBの状態を表したもの変更差分のSQL を記載したものメタデータマイグレーション変更後のDBの状態を表したもの変更差分のSQL を記載したもの出力 Hasura Consoleで操作をすると、・DBの現在の状態：　メタデータファイル・変更差分：マイグレーションファイルとして出力する。これを適用することで、他の環境のDBも同じ状況にすることができる。

Slide 42

Slide 42 text

注意なので、Hasura Console以外から DB定義を変更する場合は、メタデータの整合性を壊さないように注意

Slide 43

Slide 43 text

4 サービスとしてのHasura

Slide 44

Slide 44 text

このChapterのゴール Hasuraはサービスそのサービス体系を理解しよう！

Slide 45

Slide 45 text

Hasuraはサンフランシスコのスタートアップ引用元：https://hasura.io/about/ 引用元：https://hasura.io/about/

Slide 46

Slide 46 text

Hasuraのサービス体系引用元：https://hasura.io/pricing/ Hasura Cloud Self-hosted Hasura社が持っているサーバ上で、 Hasuraを動かす。プランが上がると、セキュリティとかパフォーマンスとかの面倒を見てくれる。自分たちが管理してるサーバ上で Hasuraを動かす。自分たちで管理する必要はあるけど、機能的にはほとんど同じ。

Slide 47

Slide 47 text

5 まとめ

Slide 48

Slide 48 text

メタデータマイグレーション変更後のDBの状態を表したもの変更差分のSQL を記載したものデータベース・ユーザーのデータを保存するために必要・SQLしかしゃべれないので、アクセス時　には翻訳が必要画面（フロントエンド）・ユーザーが操作するために必要・ユーザー側で動くので危ない処理や　重たい処理には向いていないバックエンドの人サーバサイド（バックエンド）・複雑な処理や外部に見せたくない処理を　行するために必要・サービス運営側の管轄になる登録処理等々 Hasura コア部分 DB定義変更 Hasura Console 定義変更時に出力 SQL Hasura Actions （複雑な処理） GraphQL 他環境のDB 反映 Hasura社が提供するサービス Hasura World

Slide 49

Slide 49 text

ありがとうございました