SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション SpringBoot3✖️PostgresをRender.comにデプロイする
今パートの目標 前回はデータベース接続の第三弾としてSpringBoot3✖️SpringDataJpaでDBのデータを取得し、フロントエンドで表示するところまで実施しました。今回はRender.comでPostresqlの作成、環境変数の...
react
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション SpringBoot3✖️SpringDataJpaでDBのデータを取得する
今パートの目標 前回はデータベース接続の第二弾としてSpringBoot3✖️FlyWayでPostgresqlDBのマイグレーションを作成しました。ここまでで準備は完了したので今回はSpringBoot3✖️SpringDataJpaでD...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション SpringBoot3✖️FlyWayでDBのマイグレーションを作成する
今パートの目標 前回はデータベース接続の第一弾としてPostgresqlJDBCドライバーとSpringDataJpaをインストールし、SpringBootからデータベース操作ができる環境を整えました。今回はSpringBoot3✖️Fly...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション Docker✖️ReactアプリケーションをRender.comにデプロイする
今パートの目標 前回はSpringBootアプリケーションをRenderにデプロイしました。今回はフロントエンドのReactをRender.comにデプロイして本番環境でフロントエンドとバックエンドの通信をやっていきたいと思います。 作業用...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション Docker✖️SpringBoot3のアプリケーションをRender.comにデプロイする
今パートの目標 前回はReactとAxiosを使用してAPIのHelloControllerに向けてリクエストを送信し、取得した結果を画面に表示する、フロントエンドとバックエンドの通信を行いました。今回はSpringBootアプリケーション...
APIとフロントエンドの通信編 2-2.React✖️AxiosでAPIにリクエストを送信しHelloWorldを表示する
今パートの目標 前回はリクエストを送ると「HelloWorld」というテキストをレスポンスとして返すHelloControllerの作成をしました。今回はReactとAxiosを使用してAPIで作成したHelloControllerに向けて...
APIとフロントエンドの通信編 2-1.Springboot3のRESTAPIでHelloWorldを返すコントローラーを作成する
今パートの目標 前回はapiとfrontのソースコードをgit管理し、githubにプッシュするところまで実施しました。今回はリクエストを送ると「HelloWorld」というテキストをレスポンスとして返すHelloControllerの作成...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション 1-7.gitでソースコードを管理する(GitHub)
今パートの目標 前回はDocker環境にNext.js✖️Typescriptのアプリケーションを作成しました。今回は今まで作成したapiとfrontのソースコードをgit管理し、githubにプッシュしていこうと思います。 環境について ...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション 1-6.Docker環境にNext.js✖️Typescript✖️tailwindcssのアプリを作成する
今パートの目標 前回はNext.jsアプリを起動できDocker環境の構築をしました。今回はその環境にNext.js✖️Typescript✖️tailwindcssのアプリを作成していきたいと思います。 環境について Next.js 14...
SpringBoot3(REST API)✖️Next.jsで作るSNSWebアプリケーション 1-5.Docker✖️Next.jsの環境構築
今記事の目標 前回はDockerComposeを使用して実際にSpringBootを起動するところまで実施しました。今回はNext.jsを動かすDockerfileとdocker-compose.ymlを作成していきたいと思います。今回から...