自己紹介

名前：shota
趣味：筋トレ　（ベンプレ110キロくらい）　
　　　ドライブ（47都道府県制覇！）
　　　キャンプ
経歴：Java（約2年）　
　　　C#（4ヶ月）
　　　Outsystems(8ヶ月)
IT業界3年ほどの駆け出しエンジニアです。

概要

はじめに
システム概要
使用した技術
アーキテクチャ
フレームワークの紹介
苦労したところ、しているところ
所感
学習ツールの紹介

1.はじめに

Q1,なぜ個人開発をしようと思ったか。
⇨フルスタックで個人開発をすることでエンジニアとしての技術力を高めたかったため。

Q2,なぜReactか。
⇨サーバサイドを2年程度開発しておりそろそろフロントエンドにも強くなりたいという想いがあったため、今勢いあるReactを選択。

Q3,なぜSpringBootか。
⇨研修期間中Springを使用した経験があることや、Javaが一番得意な言語であるため。

2.システム概要

今回作成するWebアプリケーションは貯金アプリの「貯金ちゃん」です。
認証機能や外部API（LineNotify）を利用してラインに通知できる機能を実装してます。
ユーザ毎に日々の収入や支出を記録するCRUDアプリケーションとなっています。

3.使用した技術

今回使用する技術は以下の通りです。

サーバサイド（Restful API）
Spring Boot, Spring Security, Java SE8
開発ツール：Eclipse
フロントエンド（SPA）
React, TypeScript
開発ツール：VSCode
HTTP通信
axios
DB
MySql (MyBatis)
開発ツール：MySql WorkBentch
インフラ
AWS（VPC、EC2、RDS、ROUTE53、ElasticIP）
お名前.comでドメイン取得しました！（月額1円！）

4.アーキテクチャ

今回は下記記事を参考に環境構築しました。
https://qiita.com/hims0k/items/a06908168615a61e30a0

5.フレームワーク紹介

Spring Securityとは

Springベースのアプリケーションに対してセキュリティ強化を実現できる。
Spring Securityに任せれば認証機能が簡単にセキュアな実装ができて便利なフレームワーク。
ただ、高度に抽象化されているため、カスタマイズがしにくい。
（今回は調べまくってなんとかカスタマイズしながら開発を進めています。）

Reactとは

Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリ。
コンポーネント思考のため改修や管理、再利用がしやすいのが特徴。
最近メジャーアップデートしたが、他のCSSなどのライブラリが対応していないかったりするので注意が必要。

6.苦労したところ

認証方式をどうするか
CORSエラー

認証方式をどうするか

認証方式には大きく2つある
・クライアント側で認証情報を保持 ⇨ JWT認証方式 etc
・サーバ側で認証情報を保持 ⇨セッション認証方式 etc

JWTとは

JSON Web Tokenの略で、サーバー側で認証の際にトークンを生成して、サーバーとクライアント間でのやり取りの際に認証トークンとして使用。
一般的にSPA + Rest APIのアプリケーションで使用される。
※今回は使用しませんでしたが、今後また勉強していきたいと思います。
クライアント側でどこに認証情報を保持するかが肝で、XSS対策を考慮する必要がある。
(基本的にはCookieに認証情報を保持してあげるのが一般的？)

セッション認証方式とは

サーバ側でセッションIDを発行し、Cookieなどに認証情報を保持する認証方式
通常のWebアプリケーションで用いられることが多い。

今回は開発コストを考慮して、Spring Security標準のセッション認証方式を採用しました。

CORSエラーとは

異なるオリジン間でHTTP通信を行うアプリ開発において、クライアント側からサーバ側にリクエストした結果、下記のようなエラーが発生することがある。
サーバ側(http://localhost:8080)とクライアント側（http://localhost:3000）でオリジンが異なる場合には考慮が必要。

そもそもCORSとはなにか

ブラウザはSORS(Same-Origin Resource shareing)という仕組みを実装していて、異なるオリジン（Cross-Origin）間へのリソースへのアクセスを制限している。
なぜ、制限しているかというと、XSSやCSRFなどのセキュリティ攻撃を防止するため。
CORS(Cross-origin resource sharing)とは、このSORSの制約を一部解除することで異なるオリジンへのリソースのアクセスを許可するようブラウザーに指示するための仕組み。

CORSエラーの対策方法

アクセスを受ける側(サーバー側）レスポンスヘッダにAccess-Control-Allow-Originを付与するすることで解消できる。
今回サーバ側はSpringSecurityを使用しているので、SecurityConfig.javaファイルに以下の記述をすることで、レスポンスヘッダーにAccess-Control-Allow-Originを追加することができる。

SecurityConfig.java

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http
                ...
				.cors()
				.configurationSource(corsConfigurationSource());
	}

	private CorsConfigurationSource corsConfigurationSource() {
		CorsConfiguration corsConfiguration = new CorsConfiguration();
		corsConfiguration.addAllowedMethod("*");
		corsConfiguration.addAllowedOrigin("http://localhost:3000");
		corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
		corsConfiguration.setAllowCredentials(true);

		UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
		corsSource.registerCorsConfiguration("/**", corsConfiguration);

		return corsSource;
	}
}

7.所感

今回作成した「Rest　API + SPA」のWEBアプリケーションの作成において、今まで意識できていなかったHTTP通信におけるリクエスト情報やレスポンス情報を意識して動かしながら学習できたので良い経験になりました。
ネットワークやインフラ面については独学でAWSを学習して環境構築を行なったので、サーバの立て方や、本番環境でのアプリケーションの動かし方など実際に動かして理解できたので良い経験になりました。今回はアプリケーションの概要を紹介していますが、後日また棚卸しとして記事をまとめようと思います。

8.学習ツールの紹介

Udemy
・【JS】ガチで学びたい人のためのJavaScriptメカニズム
　⇨JSのおすすめ講座
・モダンJavaScriptの基礎から始める挫折しないためのReact入門
⇨Reactの入門にちょうど良き！
・Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
⇨実際のアプリケーションがどう作られているかがわかる！
・Spring Security 入門：Spring Boot アプリケーションにフォーム認証と権限管理を実装しよう
⇨やって損はないかなという印象。。。SpringSecurityは高度に抽象化されているので、根本的な部分の理解をしたいという方はSpringSecurityの公式ページ参照
・AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
⇨わかりやすいが、ちょっと古い！
Youtube
・https://www.youtube.com/watch?v=IxYa6cKimZc&t=4131s　
(↑英語なのでなんとなくでしかわからない。。)
書籍
・Spring 徹底入門（NTTデータ）
　⇨Springの概要がわかる