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

勉強を兼ねて、簡単な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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/17fbf5f7-abd0-3230-dd46-11fccf29da2e.png)
　

リポジトリ名と非公開設定（任意）を選択し、Create repositoryをクリック。
![スクリーンショット 2024-02-03 18.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/55986389-f25f-23c0-755a-8252a4b0be8a.png)
　

これでリポジトリが作られました。
![スクリーンショット 2024-02-03 18.38.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/19e3a348-c593-1d86-6385-560f0da6be2a.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/ba16ec69-7860-7b8d-cb0f-c7f274ca7e7a.png)
　
　

少しスクロールしたところにあるDeveloper settingsをクリック。
![スクリーンショット 2024-02-03 19.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/f331d2fa-079f-3976-a13b-256545a4b311.png)
　

選択肢が複数あるが、調べるとこれでいいらしい。
![スクリーンショット 2024-02-03 19.28.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/b8fdd0e0-c4ad-9e6c-5816-a60079ec427b.png)
　

色々入力したりチェック入れたりしてGenerate tokenをクリック。（入力失敗して赤枠のテロップが出ています）
![スクリーンショット 2024-02-03 19.30.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/42befb79-013f-0079-41b0-296765e602a2.png)

![スクリーンショット 2024-02-03 19.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/c7d99806-64d9-53fc-a229-58732a63b2ae.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/39404da1-af0d-8188-a056-9922925e041d.png)
　

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


### Reactプロジェクトの作成
Reactはそんなに難しいことはしておらず、以下のコマンドを叩いただけ。
これでサンプルプロジェクトが生成されます。
```
> npx create-react-app my-app --template redux-typescript
```
　


### 準備完了後のGitリポジトリ
Springプロジェクトはこんな感じ
![スクリーンショット 2024-02-03 23.18.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/54104443-4783-716b-da5a-6340905b21b8.png)
　


Reactプロジェクトはこんな感じ
![スクリーンショット 2024-02-03 23.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3691434/61bb7f61-5f88-db6c-4899-920cfb155edc.png)
　


今回は以上です。