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

今回の作業

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

WEBアプリの仕様

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

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

開発環境

ざっくりと

・サーバ側
　IntelliJ
　Java21（Amazon Corretto）
　Spring 3.2

・フロント側
　VS Code
　React

・DB
　MySQL

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

Githubでリポジトリ作成

それでは作っていきましょう。「Create repository」をクリックします。

　

リポジトリ名と非公開設定（任意）を選択し、Create repositoryをクリック。

　

これでリポジトリが作られました。

　

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

> 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/'

というわけでトークンを作成してみる。まずは設定をクリック。

　
　

少しスクロールしたところにあるDeveloper settingsをクリック。

　

選択肢が複数あるが、調べるとこれでいいらしい。

　

色々入力したりチェック入れたりしてGenerate tokenをクリック。（入力失敗して赤枠のテロップが出ています）

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

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

> 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

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

Reactプロジェクトの作成

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

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

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

Springプロジェクトはこんな感じ

　

Reactプロジェクトはこんな感じ

　

今回は以上です。