🌠

コストを掛けずにHasura+Neon+Vercelで作るプロトタイピング環境

HarukiExplorer

2023/09/11に公開1件

この記事で解説すること

この記事では、次の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のスキーマを自動生成します。

https://hasura.io/

自身でAWS（ECS）などのクラウド環境にホスティングすることも可能ですが、今回はコストを一切かけないというテーマの為、Hasura CloudのFreeプランを使用します。

初めてHasura Cloudへサインアップすると、次のような表示がされるかと思います。ここでは、左の下のSkipをクリックしてください。

次に、Hasuraコンソールの画面へ遷移します。この時点で、GraphQLサーバ自体の準備が完了しました。データベースへの接続は未設定の状態です。

この時点では、プロジェクト名（エンドポイント名）はランダムに決められていますが、これは後ほど変更することが可能です。

Neon

Neonは、サーバレスなPostreSQL環境を提供するクラウドサービスです。Hasura Cloud同様に、Freeプランが存在する為、学習目的や個人開発などに重宝するサービスです。

https://neon.tech/

Neonには、Githubでブランチを切ってコードを分岐させるように、データを分岐させるブランチ機能も備わっていますが、今回はひとまずPostgreSQLのサーバとして利用する為、この機能の解説は省略します。

サインアップすると、次のようなページへ遷移されます。

Vercel

Vercelは、Next.jsやSvelteKit、Nuxt.jsなどのフロントエンドフレームワークをホスティングするクラウドサービスです。Vercelは、ホスティングのみに留まらず、ブランチ毎のプレビューやUIについてのレビュー、コメント機能など、日々多くの機能が追加されています。

https://vercel.com/

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に登録します。

https://cloud.hasura.io/projects

プロジェクトの歯車マークから、プロジェクトの設定ページへ移動してください。

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としています。