react

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

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

今パートの目標 前回はデータベース接続の第三弾としてSpringBoot3✖️SpringDataJpaでDBのデータを取得し、フロントエンドで表示するところまで実施しました。今回はRender.comでPostresqlの作成、環境変数の...
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を作成していきたいと思います。今回から...