Instagram Clone Coding Backend 1プロジェクトの起動

🔨 プロジェクトの作成

🔍 Spring Initializr

spring initializr
上のサイトでスプリング起動アイテムを簡単に作成できます.
Maven vs Gradle
プロジェクトを管理するツールとして、MavenはXML、GradleはGroovyのようなJava言語に基づいて構築処理を記述します.最近はGradleが流行りだそうです.このプロジェクトではGradleを使用しました.
Dependency
Spring Web、JPA、MySQL Driver、Securityなど必要なライブラリを追加しました.
このほか、言語、Spring Bootバージョン、およびプロジェクト情報を入力すると、プロジェクトが作成されます.

🔍 IntelliJで作成

Spring Initializerのほか、IntelliJでもプロジェクトを作成できます.Gradleプロジェクトを作成し、構築します.gradleで設定すればいいです
まず、以下のコードを構築します.gradleの前半に追加します.

buildscript {
	ext {
    	springBootVersion = 'SPRING BOOT VERSION'
    }
    repositories {
    	mavenCentral()
    }
    dependencies {
    	classpath("org.springframework.boot:spring-bootgradle-plugin:${springBootVersion}")
    }
}

apply plugin: 'java'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'

まずbuildscriptを表示し、extはグローバル変数を設定し、リポジトリはどのリモート・リポジトリから様々な依存性(ライブラリ)を受信するかを決定します.基本的にはMavenCentralがよく使われています.依存項目は、プロジェクト開発に必要な依存性を宣言する場所です.
これはspring-boot-gradle-pluginの構成済みバージョン(springbootVERSIONに入れる)を依存性として取得することを意味する.
apply pluginセクションは、先に宣言したプラグイン依存性を適用するかどうかを決定するコードです.
検索するとbuildscriptとapply plugin部分はpluginsブロックで簡単に表すことができることが分かった.(注:https://doughman.tistory.com/19)
最後に、dependenciesセクションに必要な依存性を宣言します.

dependencies {
 compile('org.springframework.boot:spring-boot-starter-web')
 testCompile('org.springframework.boot:spring-boot-startertest')
}

他に必要な依存性がある場合は、追加します.
書き終わったら変更を反映する.

実行プロジェクト

🔍 IntelliJで実行

簡単にmainmethodを実行すればいいです.

🔍 ターミナルで実行

プロジェクトフォルダに移動し、次のコマンドを実行します.(構築後、生成されたプロジェクトjarファイルを実行)

./gradlew clean build
java -jar build/libs/instagram-backend-0.0.1-SNAPSHOT.jar

💻 Web開発方法

スプリングを用いたWeb開発では,以下の3つの手法を用いることができる.

静的コンテンツ
静的htmlファイルのみ送信します.
htmlファイルをプロジェクトのresources/staticフォルダに格納し、ローカルでサーバを回転させる場合、localhost:8080/ファイル名.htmlで実行できます.

MVC
アプリケーションをモデル、ビュー、コントローラの3つの部分に分けます.ビューは画面出力、モデルはデータ加工、コントローラはモデルとビューを担当します.

API
データをjsonなどのファイルとしてclientに渡す方法.

このプロジェクトではAPIサーバを作成し、JSONファイルにデータを送信するが、当初はWeb開発の知識が不足していたため、フロントエンドサーバとバックエンドサーバが具体的に何をしているのか、どのような方法で働いているのか分からないため、学習が必要であった.

🔍 Webプレゼンテーション方式

ブラウザは、HTML、CSS、Javascriptなどのファイルを受信して画面に表示します.
画面に表示されると、サーバは完全に生成されたHTMLページを送信するSSR方式と、Javaスクリプトファイルを受信してDOMを動的にレンダリングし、クライアント(ブラウザ)上で解析してレンダリングするCSR方式がある.

SSR (Server-Side Rendering)

これは、サーバからhtmlファイルを完全に取得し、ページ全体をレンダリングする方法です.
JSP、サーブレットなどもこの方式と呼ばれています.
Browser <-> Web Server <-> Database
react,Angular,Viewなどの1ページアプリケーション(SPA)フレームワークの発展に伴い,大量のCSR方式が用いられているが,CSR方式の欠点から,最近は多くのSSR方式が用いられている.(Browser <-> Frontend <-> Backend <-> Database)

CSR (Client-Side Rendering)

ユーザの要求に応じて必要な部分だけをレンダリングする方法.
最初は、HTMLファイルとともに動的にレンダリングするJavascriptファイルがサーバから送信されます.クライアントがファイルを受信すると、JSファイルはユーザのインタラクションに応じて動的にレンダリングされ、他に必要なデータがあればサーバにデータを要求して受信し、これらに基づいてHTMLを動的に生成することができる.
Browser <-> Frontend Server
Browser <-> Backend Server (API Server) <-> Database
Javascriptファイルを初めて送信する場合は、アプリケーションに必要なロジックだけでなく、ドライバアプリケーションのフレームワークやライブラリのソースコードも含まれます.そのため、初期ロードには時間がかかる場合があります.
このInstagramクローンプロジェクトでは、フロントエンドにReactを使用し、バックエンドにAPIサーバを作成して画面に必要なデータを送信します.

📁 プロジェクト構造

プロジェクトの構造については、多くの本を参考にした.

ソース:Spring BootとAWSによる個別Webサービス

Web Layer

ビューテンプレート領域

(共通コントローラ(@Controller)やJSP/FreeMarkerなど)

Service Layer

サービスエリア

@Service

コントローラとDaoの中間領域

@Transactionalが適用する領域

Repository Layer

データストアの領域

、例えば

データベースにアクセスする

Domain Model

は、すべての人が同じ角度からドメイン(開発目標)を理解し、共有できることを簡略化しました.

タクシーアプリと言えば、配送、搭乗、料金などはドメイン

です.

@Entityが存在する領域(JPA、表1:1に一致)

Dtos

層間でデータを交換するためのオブジェクト(データ転送オブジェクト)

.

整理するとこのような流れがあります.
簡単に言えば、

ドメイン(データベース内のテーブルと一致する1:1のエンティティークラス)

Repository(データベースにアクセスし、ドメインオブジェクトをデータベースに格納および管理する領域)

サービス(コアビジネスロジックの実装、Transactional)

コントローラ(要求されたURLに従って適切な応答−VCモデルにおける適切なビューおよびマッピングを行う;ResponseEntity(DTO)の場合、RestControllerは適切なDTOをホストに置いてクライアントに返す;サービスを使用する方法)

.
4種類に分けることができます.
これに基づいて、基本的なフォルダ構造は次のとおりです.

├── domain
├── service
└── web
    ├── controller
    └── dto

ここで、entityと対応するrepositoryをdomainフォルダに配置します.
実はプロジェクト構造は最初は文字だけで見ていたので、あまり理解していなかったので、例を見たときはこうやって使っていると思っていたので、次回は理解して整理してみるのもいいかもしれません.