Hasura&Nextjsで快適な開発環境を構築〜プロダクション環境構築編〜

5136 ワード
Hasura Vercel next.js RDS RDS テキストリンク

こんにちは、株式会社エイチームコマーステックのkazzです。

私たちは、HasuraとNextjsという技術を使い、Obremoというペットフード販売プロダクトを開発しています。
今回は、そのHasuraとNextjsの組み合わせで実際に手を動かして環境構築をしてみましたので、ざっくりとした手順を備忘録としてまとめたいと思います。

今回

こちらの記事の続きです。

前回はHasuraとNextjsを用いてローカル環境を構築しましたが、今回はHasuraCloud、RDS、Vercelを用いてプロダクション環境を構築してみようと思います。

手順を全部細かく説明すると膨大になってしまうので、結構ギュッとしています。知識が全くない方は難しいとは思いますがご了承ください。

HasuraCloud構築

公式サイトのGet Startedからアカウントを作成します。HasuraCloudの管理画面へ来ましたら、ProjectsのNew Projectからプロジェクトを作成します。

作成すると、早速そのプロジェクトの情報が表示されます。プロジェクト名は勝手に決められているので、変えるならこのタイミングで変えましょう。Launch Consoleから、Hasuraコンソールに移動します。これまで操作していたのはあくまでHasuraCloudのプロジェクトを管理するコンソールで、Launch Consoleから開くコンソールはHasura自体のコンソールです。

Launch Consoleを押すと、見覚えのあるコンソールが表示されると思います。この時点ではまだデータベースとは連携していないため、これから構築と接続を行います。

PostgreSQLデータベース構築

ローカル環境ではDockerComposeにpostgresイメージが含まれていましたが、プロダクション環境は別で用意する必要があります。HasuraCloudを使うとHerokuのデータベースと簡単に連携できる機能がありますが、今回は拡張性も考えてAWSのRDSで構築します。

RDSでPostgreSQL構築

AWSのマネジメントコンソールにアクセスし、RDSのページに行きます。AWSアカウントがない方は、作成してください。

データベース作成画面に行き、以下の内容で作成します。省略している部分は、適宜入力してください。

項目 値
エンジンのオプション PostgreSQL（バージョン12.8）
テンプレート 無料枠でも可
パブリックアクセス あり（なしでも可能: 詳細）
VPC セキュリティグループ 新規作成

HasuraCloudとPostgreSQLを接続

RDSのセキュリティグループ設定

まず、HasuraCloudのコンソールからプロジェクトのエンドポイントを控えます。

RDSの画面へ行き、データベース詳細画面の「接続とセキュリティ」タブを開くと、セキュリティグループがリンクになっている項目があると思いますので、そちらをクリックしてセキュリティグループの設定画面へ行きます。

インバウンドルール編集から、インバウンド接続を許可するIPとポートを設定します。デフォルトのルールが一つと、カスタムTCPでセルフアクセスとHasuraCloudからのアクセスを許可しています。

これで、RDS側の設定は完了です。

HasuraCloudの設定

Hasuraの方のコンソールに行き、Data Managerを開きます。接続の仕方はローカルの時と大体一緒です。

RDSのデータベース詳細画面の内容をみて、URLやパスワードなどの必要な項目を入力します。HasuraCloudのコンソールの「Env vars」から環境変数を設定して、そちらを{{ENV}}で参照するようにするとよりよいです。

接続が成功したら、このようにそれっぽい表示が出ます。あとは、ローカルと同じようにテーブルを構築します。今回は触れませんが、ローカルのMigrationを読み込む形でも大丈夫です。

Nextjsのデプロイ

今回は、Vercel上にデプロイを行います。基本的には上記の流れに沿って行います。

GitHubと連携させてデプロイします。連携したら、リポジトリをimportする画面が出ますので、選択します。git pushをしてない場合は、しておいてください。

選択すると、デプロイ設定が表示されます。ローカルで指定していたNEXT_PUBLIC_HASURA_URLなどの環境変数をプロダクション用に設定します。ちなみに、NEXT_PUBLIC_HASURA_URLはHasuraCloudのコンソールから確認でき、https://<project_name>.hasura.app/v1/graphqlみたいな値になるかと思います。

必要な設定ができたら、Deployをかけます。これで、表示されるURLにアクセスし、無事表示されたら成功です！

CI/CD構築編

Coming soon

Vercel以外にも、HasuraCloudのmigrationを自動化してみたりしたいと思います。

〆

次回アドベントカレンダーの投稿は、「ゼロスケールインできるサーバレスなNestJSの構成を探る」です。
最後まで読んでいただきありがとうございました！