この記事で解説すること
この記事では、次の3つのサービスを使用して、費用的なコストを一切掛けずにパブリックに公開できるプロトタイピング環境の構築方法を紹介します。クレジットカード等、決済手段の登録も不要です。また、Hasuraを使う都合上、バックエンドのAPIはGraphQLとなります。
- Hasura Cloud（Free）
- Neon（Free）
- Vercel（Hobby）
各サービスのより詳細な解説、及びGraphQLについての解説は、別途記事を作成予定です。
0. 各種サービスのアカウント準備
まずは、今回紹介する3つのサービスについて解説、アカウントの準備を進めます。それぞれのサービスの繋ぎ込みは、全てのアカウントの準備が整った後で実施します。
Hasura Cloud
Hasuraは、GraphQL環境を短期間で簡単に構築できるOSS（GraphQLサーバ）です。主にPostgreSQLデータベースを対象にしていますが、MySQLやMongoDB、Microsoft SQL Serverなどにも対応しています。データベースのスキーマに基づいて、GraphQLのスキーマを自動生成します。
自身でAWS（ECS）などのクラウド環境にホスティングすることも可能ですが、今回はコストを一切かけないというテーマの為、Hasura CloudのFreeプランを使用します。
初めてHasura Cloudへサインアップすると、次のような表示がされるかと思います。ここでは、左の下のSkipをクリックしてください。
次に、Hasuraコンソールの画面へ遷移します。この時点で、GraphQLサーバ自体の準備が完了しました。データベースへの接続は未設定の状態です。
この時点では、プロジェクト名（エンドポイント名）はランダムに決められていますが、これは後ほど変更することが可能です。
Neon
Neonは、サーバレスなPostreSQL環境を提供するクラウドサービスです。Hasura Cloud同様に、Freeプランが存在する為、学習目的や個人開発などに重宝するサービスです。
Neonには、Githubでブランチを切ってコードを分岐させるように、データを分岐させるブランチ機能も備わっていますが、今回はひとまずPostgreSQLのサーバとして利用する為、この機能の解説は省略します。
サインアップすると、次のようなページへ遷移されます。
Vercel
Vercelは、Next.jsやSvelteKit、Nuxt.jsなどのフロントエンドフレームワークをホスティングするクラウドサービスです。Vercelは、ホスティングのみに留まらず、ブランチ毎のプレビューやUIについてのレビュー、コメント機能など、日々多くの機能が追加されています。
Hobbyプランでサインアップし、次のような画面へ遷移したところでVercelアカウントの準備は完了です。
1. PostgreSQLサーバの作成
以降、Hasura Cloud、Neon、及びVercelにサインアップできている前提での解説いたします。今回は、簡単なToDoアプリの開発を想定して作業を進めます。
まずは、NeonのダッシュボードからCreate a projectで新規にプロジェクトを作成します。Regionは任意ですが、最も日本から近そうなAsia Pacific（Singapore） を選択しています。
必要項目を入力し、Create projectをクリックすると、すぐにPostgreSQLが使用できる状態となります。
2. Hasura Cloudへの接続
次に、作成したPostgresをHasura Cloudへ接続します。Neonダッシュボード上に表示されている接続情報をHasura CloudのEnv varsに登録します。
プロジェクトの歯車マークから、プロジェクトの設定ページへ移動してください。
New Env Varで接続情報用の環境変数を作成します。
変数名はHASURA_GRAPHQL_DATABASE_URLとしていますが、任意のものでも問題ありません。Valueには、先程Neonで作成したDBの接続情報を入力してください。
環境変数の設定が完了したら、Launch Consoleのボタンから、該当プロジェクトのコンソール画面へ移動し、DATAタブからPostgresを選択。Connect Existing Databaseをクリックしてください。
Connect Postgres Databaseのページへ遷移したら、次のように入力、選択してください。
- Database name：任意
- Connect Database via：Environment variable
-
Environment variable：HASURA_GRAPHQL_DATABASE_URL
これで、先程Neonで作成したPostgresとHasura Cloudが接続されました。
この時点で、Hasuraコンソール上から、テーブルの作成やデータの操作が可能となります。
3. Vercelプロジェクトの作成
今回は、例として以前ハンズオンイベント「GraphQL完全理解ハンズオン」で使用した、Nuxt3のToDoアプリのソースコードを用いて解説いたします。GithubアイコンのImport Projectから、ご自身のGithubと接続し、任意のリポジトリをインポートしてください。
同じソースコードで試したい方は、以下のリポジトリをフォーク、又はcloneしてご使用ください。
次に、このプロジェクトで使用する環境変数（Environment Variables）を設定します。今回は、以下の2つの環境変数を使用します。
- HASURA_GRAPHQL_ADMIN_SECRET：x-hasura-admin-secretを設定します。
-
HASURA_GRAPHQL_ENDPOINT：Hasura CloudのGraphQL Endpointを設定します。
それぞれ、Hasuraコンソールから、値をコピーして設定してください。
4. Hasuraコンソールからテーブルの作成
今回の例（Todoアプリ）では、以下の2つのテーブルを作成します。HasuraコンソールのDATAタブから、Create Tableでテーブルを追加してください。
tasks
| Column Name | Data Type | Constraints | Default Value |
|---|---|---|---|
| id | serial | NOT NULL, PRIMARY KEY | |
| title | text | NOT NULL | |
| body | text | NOT NULL | |
| completed | boolean | NOT NULL | false |
| created_at | timestamptz | NOT NULL | now() |
| updated_at | timestamptz | NOT NULL | now() |
comments
| Column Name | Data Type | Constraints | Default Value |
|---|---|---|---|
| id | serial | NOT NULL, PRIMARY KEY | |
| task_id | integer | NOT NULL, FOREIGN KEY REFERENCES tasks
|
|
| option | text | NOT NULL | |
| created_at | timestamptz | NOT NULL | now() |
| updated_at | timestamptz | NOT NULL | now() |
次のような状態になったら、ひとまずテーブルに対してのQuery、及びMutationの操作が可能となりました。
更に、GraphQLのスキーマ上でもtasks.idとcomments.task_idのリレーションを張りたい為、RelationshipsタブのSUGGESTED RELATIONSHIPSの中にあるcommentsをAddで追加してください。リレーション名は、tasks_commentsとしています。
5. 実際にVercelのURLで表示を確認する
次のように、タスクの入力フォームが表示されていれば、正常にGraphQLと接続できています。
実際に、データが保存できることも確認できます。
6. まとめ
「Hasura+Neon+Vercelで作るプロトタイピング環境」の解説は以上となりますが、これらの技術、クラウドサービスを使用することで、無料で尚且つ高速にサービスを開発、公開することが可能となります。
また、解説内でも書いた通り、サービスとしてパブリックに公開する場合、フロントエンド側でx-hasura-admin-secretを直接使用するべきではありません。
実際には、JWT認証（又はwebhook認証）の設定が必要となります。認証周りの解説については、別途作成予定です。
Discussion