3
2

SpringとReactで簡単なWEBアプリを作ってみる - その①

Posted at

勉強を兼ねて、簡単なWEBアプリを作ってみようかと思います。今回はGitでリポジトリ作成するところから始めます。

今回の作業

 ・リポジトリ作成
 ・Springプロジェクト作成
 ・Reactプロジェクト作成
 

WEBアプリの仕様

今回は以下のようにしたいと思います。(超絶簡単に)

 フロント画面でボタンクリック
  ↓
 API呼び出してDB検索
  ↓
 結果をフロントに渡して表示
  ↓
 Spockでテストまでやりたい
 

開発環境

ざっくりと

・サーバ側
 IntelliJ
 Java21(Amazon Corretto)
 Spring 3.2

・フロント側
 VS Code
 React

・DB
 MySQL

Dockerも併せて使ってみたいけど、使い方がよく分からない
 

Githubでリポジトリ作成

それでは作っていきましょう。「Create repository」をクリックします。
スクリーンショット 2024-02-03 18.32.00.png
 

リポジトリ名と非公開設定(任意)を選択し、Create repositoryをクリック。
スクリーンショット 2024-02-03 18.37.12.png
 

これでリポジトリが作られました。
スクリーンショット 2024-02-03 18.38.13.png
 

さっそくクローンしようと思いましたがエラーになってしまう。
調べてみるとパスワード認証が出来なくなってしまったようなので、トークンを作成する必要があるらしい。

> git clone https://github.com/*****/spring-studying.git
Cloning into 'spring-studying'...
Username for 'https://github.com':
Password for 'https://*****@github.com': 
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/*****/spring-studying.git/'

 

というわけでトークンを作成してみる。まずは設定をクリック。
スクリーンショット 2024-02-03 19.27.15.png
 
 

少しスクロールしたところにあるDeveloper settingsをクリック。
スクリーンショット 2024-02-03 19.27.41.png
 

選択肢が複数あるが、調べるとこれでいいらしい。
スクリーンショット 2024-02-03 19.28.13.png
 

色々入力したりチェック入れたりしてGenerate tokenをクリック。(入力失敗して赤枠のテロップが出ています)
スクリーンショット 2024-02-03 19.30.17.png

スクリーンショット 2024-02-03 19.30.23.png

これでトークンが作成されます。(流石に画面は載せないよ)
 

この状態でもう一度クローンすると・・・出来ました!

> git clone https://github.com/*****/spring-studying.git
Cloning into 'spring-studying'...
Username for 'https://github.com': *****
Password for 'https://*****@github.com': 
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

 

Springプロジェクトの作成

今回は簡単に。こちらのページにアクセスして、プロジェクト作成するだけです。
https://start.spring.io

スクリーンショット 2024-02-03 18.45.07.png
 

あとはクローンして出来たフォルダの中に、↑で作ったプロジェクトを入れてプッシュすれば下準備は完了
 

Reactプロジェクトの作成

Reactはそんなに難しいことはしておらず、以下のコマンドを叩いただけ。
これでサンプルプロジェクトが生成されます。

> npx create-react-app my-app --template redux-typescript

 

準備完了後のGitリポジトリ

Springプロジェクトはこんな感じ
スクリーンショット 2024-02-03 23.18.08.png
 

Reactプロジェクトはこんな感じ
スクリーンショット 2024-02-03 23.20.31.png
 

今回は以上です。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2