【React + Node.js】ログイン認証機能（環境構築編）

# プロジェクトディレクトリを生成/移動
$ mkdir login-form
$ cd login-form

# フロントエンド側（React）で使用する nodeバージョン指定ファイルを生成
$ touch .nvmrc >> v18.16.0

---
# 現段階のディレクトリ構成
login-form/
└── .nvmrc

# 使用する node有効化
$ nvm use

# React(TypeScript)をインストール
$ npx create-react-app form --template typescript

$ cd form
$ npm start


---
Compiled successfully!

You can now view form in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

$ mkdir -p ./src/{assets,assets/images,assets/styles,components/common,components/layout,components/specific,hooks,pages,services,utils}

# 執筆時点で動作確認ができたバージョンを指定（バージョンを指定しない場合は、その時の最新がインストールされます）
$ npm install react-bootstrap@2.5.0 bootstrap@5.2.0
$ npm install --save-dev @types/react @types/react-dom

$ npm install axios

$ npm install crypto-js
$ npm install --save-dev  @types/crypto-js

$ npm init -y

# TypeScriptインストール
$ npm install --save-dev typescript

# Node.jsのプログラムに必要な型宣言ファイル node.d.tsをインストール
$ npm install --save-dev @types/node

# TypeScriptの設定ファイル tsconfig.jsonを初期化
$ npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs

$ mkdir -p ./src/{config,controllers,models,routes}

$ npm install ts-node

$ npm install express
$ npm install --save-dev @types/express

$ npm install cors
$ npm install --save-dev @types/cors

$ npm install dotenv

$ npm install mysql2

$ docker run --name ws_mysql -e MYSQL_ROOT_PASSWORD=pass -e MYSQL_DATABASE=workspace -e MYSQL_USER=user -e MYSQL_PASSWORD=pass -p 3306:3306 -d mysql:latest

---
# 設定情報
- MYSQL_ROOT_PASSWORD   = pass 
- MYSQL_DATABASE        = workspace
- MYSQL_USER            = user
- MYSQL_PASSWORD        = pass

$ docker exec -it ws_mysql mysql -u user -ppass -D workspace -e "CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(255) NOT NULL,password VARCHAR(255) NOT NULL,roles VARCHAR(255) DEFAULT NULL); INSERT INTO users (username, password, roles) VALUES ('username', 'password', 'USER');" --protocol=tcp

---
# 上記コマンドの分解説明
- docker exec -it ws_mysql
  - ws_mysqlコンテナに接続
- mysql -u user -ppass -D workspace
  - mysqlコマンドを使用（各オプションはコンテナ作成時に設定した情報）
- -e "CREATE TABLE users (...<省略>
  - eオプションで SQLを発行
- --protocol=tcp
  - 通信接続方式を指定

$ docker exec -it ws_mysql mysql -u user -ppass -D workspace -e "SELECT * FROM users WHERE username = 'username' AND password = 'password';" --protocol=tcp

---
# 実行結果
mysql: [Warning] Using a password on the command line interface can be insecure.
+----+----------+----------+-------+
| id | username | password | roles |
+----+----------+----------+-------+
|  1 | username | password | USER  |
+----+----------+----------+-------+