制作完了したReactのアプリケーション(フロントエンド)にサーバー(バックエンド)を繋げる作業をしています。
本日学んだのは、パスワードの暗号化(セキュリティ強化)・CORS・バックエンドとフロントエンドを繋ぐ方法です。
パスワードの暗号化でセキュリティ強化:bcryptを使用してパスワードを暗号化
パスワードを暗号化(encrypt)するためにnpm packageのbcryptをNodejsで作ったサーバー側にインストールしました。npmでのインストール方法はシンプルにnpm install bcrypt です。
他にも、argon2、scryptなどのnpmパッケージがあるそうですが、私が現在受講しているUdemyの講師によると、bcryptは3つの理由からおすすめだそうです。
1)15年という長い歴史がある
2)scryptより簡単にNodejsに組み込みやすい
3)人気があってコミュニティから支持されている
CORS
良い記事を見つけたのでこちらに。
⇒CORS (Cross-Origin Resource Sharing)ってなに?
こちらの記事によると、CORSとは、
別オリジンのリソースへアクセス(= クロスサイトHTTPリクエスト)できるようにするためのルール、手法。
MDNの記事もぐぐっと読み込む必要がありそうです。
Cross-Origin Resource Sharing (CORS)
フロントエンドとバックエンドを繋げる
フロントエンドとバックエンドを繋げるためにReactアプリケーション(フロントエンド)とサーバー(バックエンド)にコードを書きました。
使用している教材と現時点での状態
Udemy:The Complege Web Developer: Zero to Mastery
Andrei Neagoie
Section 25 Lecture 253-256 (84%完了)
作業時間:3時間
次回の課題
本日のところはポート番号がフロントエンドとバックエンドで重なってしまいエラーで終了。Udemyの講師の画面のように、Git上で”would you like to run the app on another port instead?”という質問が出てこなかったので解決方法がわからず、ポートが重なっているというエラーのままとなりました。次回解決する予定です。
⇒(解決しました!)73日目:フロントエンドとバックエンドで違うポートを使う方法がわかった