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

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

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

## 今回

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

https://qiita.com/kazzzzzz/items/eeba893646eb494b4f57

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

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

## HasuraCloud構築

https://hasura.io/cloud/

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/c26d25b4-9938-65fa-5b3c-c2a35d548297.png)

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/cca0c795-54b1-1be3-ae19-1263b9ed13a8.png)

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

## PostgreSQLデータベース構築

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

### RDSでPostgreSQL構築

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

https://console.aws.amazon.com/console/home

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

|  項目  |  値  |
| ---- | ---- |
|  エンジンのオプション  |  PostgreSQL（バージョン12.8）  |
|  テンプレート  |  無料枠でも可  |
|  パブリックアクセス  |  あり（なしでも可能: [詳細](https://hasura.io/docs/latest/graphql/cloud/dedicated-vpc.html)）  |
|VPC セキュリティグループ| 新規作成 |

## HasuraCloudとPostgreSQLを接続

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

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/2f010197-1355-6d5d-4ba6-c69ef9f62b47.png)

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

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/f1cf511b-d26f-bda6-e028-869b9a438ff0.png)

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

### HasuraCloudの設定

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/8a8022c9-7c3d-106d-e50c-2883c68b85f4.png)

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/87bca2b8-0ab4-8760-92f5-90149186e8b2.png)

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/70d5618a-0b80-3945-7b08-89fd7504d376.png)

## Nextjsのデプロイ

https://nextjs-ja-translation-docs.vercel.app/docs/deployment

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

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/8940a5d3-11f6-4e00-8742-8e6643342cd0.png)

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

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305522/5d572728-e805-a458-c9ff-35a9a9df3d4f.png)

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

## CI/CD構築編

Coming soon

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

## 〆

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