SpringBoot3✖️PostgresをRender.comにデプロイする

SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション
2024.04.26

今パートの目標

前回はデータベース接続の第三弾としてSpringBoot3✖️SpringDataJpaでDBのデータを取得し、フロントエンドで表示するところまで実施しました。
今回はRender.comでPostresqlの作成、環境変数の設定をおこない、本番環境でも同じようにDBのデータを取得し、フロントエンドで表示することができるようにしていきたいと思います。

Render.comでPostgresDBを作成する

まず本番環境用のDBとしてRender.comでPostgresDBを作成していきましょう。

render.com にログインし、NewボタンからPostgreSQL DB を作成します

必要項目を入力します

大事なのはRegionです。
ここはWebサーバーを作成したRegionと同じRegionを設定します。今回はシンガポールです。
その他は任意で問題ないです。

入力できたらCreate Databaseボタンを押すと簡単にDBが出来上がります。

フリープランについて

Render の無料データベース プランでは、作成後 90 日で自動的に期限切れになる PostgreSQL データベースを実行できます。無料データベースは 90 日後に一時停止され (有料プランにアップグレードされない限り)、この時点でアクセスできなくなります。無料データベースを有料プランにアップグレードするには、一時停止から 14 日間の猶予期間があります。猶予期間が過ぎると、すべての無料データベースが (データと共に) 削除されます。今後の無料データベースの有効期限と削除について警告する電子メール通知を送信します。

無料の PostgreSQL データベースを引き続き作成できますが、一度にアクティブにできる無料のデータベースは 1 つだけです。

無料の PostgreSQL データベースはバックアップされません。有料プランにアップグレードして、毎日の自動バックアップと手動バックアップを利用できるようにします。

とのことなので勉強程度に使うで考えておくのがいいと思います😇

環境変数を設定する

続いて、APIでDBに接続するために必要な環境変数を設定していきます。
Render.comのAPIのダッシュボードに入り、Environmentから登録します。

今回登録する環境変数は以下です。

  • DB_HOST=作成したDBのホスト名
  • DB_NAME=作成したDBの名前
  • DB_PASSWORD=作成したDBのパスワード
  • DB_USERNAME=作成したDBのユーザーネーム

それぞれの設定値はRender.comのDBのダッシュボードから確認できます。

環境ごとのpropertiesファイルを作成する

次に、環境ごとに読みこむapplication.propertiesファイルを変更するようにします。
以下のようなファイル構成でapplication.propertiesファイルを作成します。

- src
  └ main
    └ resources
      └ application.properties
      └ application-development.properties
      └ application-production.properties
  └ test
    └ resources
      └ application.properties

中身を修正します。

spring.profiles.active = ${ENV:development}
#################################
# postgres
#################################
spring.datasource.url=jdbc:postgresql://${DB_HOST}:${DB_PORT}/${DB_NAME}
spring.datasource.username=${DB_USERNAME}
spring.datasource.password=${DB_PASSWORD}
spring.datasource.driverClassName=org.postgresql.Driver
spring.jpa.show-sql=true
spring.jpa.open-in-view=false
spring.jpa.hibernate.ddl-auto=none
spring.jpa.properties.hibernate.format-sql=true
logging.level.org.hibernate.SQL=DEBUG
logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE
spring.flyway.baseline-on-migrate=true
#################################
#################################
# postgres
#################################
spring.datasource.url=jdbc:postgresql://${DB_HOST}:${DB_PORT}/${DB_NAME}
spring.datasource.username=${DB_USERNAME}
spring.datasource.password=${DB_PASSWORD}
spring.datasource.driverClassName=org.postgresql.Driver
spring.jpa.hibernate.ddl-auto=none
spring.jpa.open-in-view=false
spring.jpa.show-sql=false
logging.level.org.hibernate.SQL=INFO
spring.flyway.baseline-on-migrate=true
#################################
#################################
# postgres
#################################
spring.datasource.url=jdbc:postgresql://${DB_HOST}:${DB_PORT}/${DB_NAME}
spring.datasource.username=${DB_USERNAME}
spring.datasource.password=${DB_PASSWORD}
spring.datasource.driverClassName=org.postgresql.Driver
spring.jpa.hibernate.ddl-auto=none
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
spring.jpa.show-sql=false
logging.level.org.hibernate.SQL=INFO
spring.flyway.enabled=false
#################################

ログレベルをそれぞれ変更しているのと、テスト時にはFlywayをオフにするように設定しいます。
application.propertiesでspring.profiles.activeに値を設定すると
application-{設定した値}.propertiesファイルを読み込んでくれるようになります。

APIをデプロイする

それでは変更をコミットし、GitHubにプッシュ、mainブランチにマージしてRender.comにデプロイしましょう。

share-favplace-api % git add -A
share-favplace-api % git commit -m "DB接続設定の追加"
share-favplace-api % git push origin  develop_202040311_DBconnection

mainブランチにマージすると自動でデプロイが走ると思うので結果を確認します。
Render.comのダッシュボードにログインし、デプロイが成功していれば完了です。

Frontをデプロイする

フロントエンドのコードもAPIにリクエストを送り、DBからデータを取得するように修正したのでデプロイしておきましょう。

share-favplace-front % git add -A
share-favplace-front % git commit -m "ユーザー一覧を取得するコードの追加"
share-favplace-front % git push origin develop_20240407_getusers

GithHubにプッシュできたらmainブランチにマージすると自動でデプロイが走ると思うので結果を確認します。
Render.comのダッシュボードにログインし、デプロイが成功していれば完了です。

動作確認

それでは実際に本番環境で動作確認をしていきます。
まず、データ取得用のテストユーザーのデータを本番DBに登録します。

本番環境DBにpgadmin4で接続する

pgadmin4のデスクトップアプリをインストールします。
macの場合はHomeBrewを使用してインストールできます。

% brew install pgadmin4

これで完了です。LaunchpadにpgAdmin4があるはずなので、それを起動します。

マスターパスワードを設定するか聞かれますが、特に設定が不要であればキャンセルで問題ないです。

Serversを右クリック→登録→サーバーから新規サーバーを登録します。

Generalタブで名前（任意）を入力したら接続タブに遷移し、以下を入力し保存します。

  • ホスト名/アドレス：Render.comのDBダッシュボードのExternal Database URLのホスト部
    ※External Database URLのホスト部は@以降〜/までです。
  • ユーザー名：Render.comのDBダッシュボードのユーザー名
  • パスワード：Render.comのDBダッシュボードのパスワード

上記で本番DBに接続できたら、テストデータを挿入します。

usersテーブル → スクリプト → INSERTスクリプトを選択すると、INSERTスクリプトが表示されるのでVALUESの？に値を入れていきます。
※usersテーブルはFlywayによってすでに作成されています。

NOT NULL制約のついていないカラムにだけ値を入れて実行します。

INSERT INTO public.users(
	id, username, email, password)
	VALUES (1, 'testuser', 'test.email@gmail.com', 'password');

これで準備は完了です。

リクエストを送信する

フロントエンドのサイトにアクセスし、リクエストを送信してみましょう

※最初の１回目のリクエストは取得までに1分ほど時間がかかります。これはRender.comがフリープランのため、APIのサーバーがSleep状態となっていいるためです。

無事リクエストが返ってきてデータが表示されれば本番環境でも動作確認は完了です。

まとめ

以上で、本番環境でもデータベースから取得してフロントエンドで表示することができました。
これでデータベース接続編は完了です。

ようやく主な環境構築が完了したので次回からは機能の開発に入っていきます。
まずはログイン認証編として、ユーザーの新規登録機能を作成していきます。

コメント

タイトルとURLをコピーしました