勉強を兼ねて、簡単な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リポジトリ
今回は以上です。