プロジェクト構築手順

  1. STSから新規プロジェクト作成

    build.gradle

plugins {
	id 'org.springframework.boot' version '2.5.6'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-security'
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:2.2.0'
	runtimeOnly 'mysql:mysql-connector-java'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'
	testImplementation 'org.springframework.security:spring-security-test'
}

test {
	useJUnitPlatform()
}

  2. STSのプロジェクトの起動が正常に行われるか確認

mysqldriverを入れているので、適当なDBを作成（DBの作成方法は割愛しますがMySQL8.0を使用しています）し、application.properties(のちのち本番環境とapplication.propertiesを分けたいので、application-dev.propertiesを作成し、設定をそちらに記載します)を下記のように記述してDBとの接続設定を行う

＊application.propertiesの値を環境変数として切り出す方法は別記事を参照ください

application.properties

spring.profiles.active=dev

application-dev.properties

spring.session.store-type=jdbc
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/TempleTaskManager
spring.datasource.username=${設定した環境変数名}
spring.datasource.password=${設定した環境変数名}
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

Untitled

SpringSecurityも入れているので、添付画像のようにSpringSecurityのデフォルトログインフォームが表示されれば問題なしです。

Vue CLIのインストール

続いてVueCLIのインストールを行って行きます。

  1. ターミナルで以下コマンドの実行

    vue ui

    Untitled

添付画像のようなダッシュボードが表示されます。

  1. Vueプロジェクトマネージャで作成をクリック「作成したプロジェクト名/src」を開き、「ここに新しいプロジェクトを作成する」をクリックプロジェクトフォルダに任意のフォルダ名を入力して次へをクリック。今回はfrontendとしました。

デフォルトプリセットを選択して「プロジェクトを作成する」をクリック

Untitled

今回はVueの３系を使用したいので選択し、プロジェクトを作成するを選択します。

Untitled