Spring Boot + Vue.js + JPA CRUD 프로젝트 만들기

Web

Spring Boot + Vue.js + JPA CRUD 프로젝트 만들기 - 환경설정

정ㅇr 2022. 6. 14. 18:27

728x90

이번에 포스팅 하게 된 SpringBoot + JPA + Vue.js 프로젝트는

해외 블로그 글을 참고해서 만들었습니다.

원본에서 소개하는 내용과 다른 부분도 있으니 참고하시길 바랍니다.

사용한 버전

SpringBoot : 2.7.0

Java : 1.8

core-js : 3.6.5
Vue.js : 2.6.11

MySQL : 5.5.5

Maven : 4.0.0

1편에서는 프로젝트의 환경설정을 하겠습니다.

데이터베이스 설정 (MySQL)

local에 mysql이 깔려 있다고 가정하고 설명을 쓰겠다.

1) mysql 접속

mysql -uroot -p

username을 입력하고 비밀번호를 입력해서 mysql에 접속한다.

2) 데이터베이스 만들기

create database vue1;

vue1이라는 데이터베이스를 만들어준다.

3) 변경 설정 적용

flush privileges;

방금 만든 데이터베이스를 재시작 없이 적용시키기 위해서 위의 명령어를 실행한다.

4) 데이터베이스 접근 권한 설정

# localhost로 접근 가능하게 설정
grant all privileges on vue1.* to vue1_user@localhost identified by '1234qwer';
flush privileges;

# 어떤 주소로 접근해도 접근 가능하게 설정
grant all privileges on vue1.* to vue1_user@'%' identified by '1234qwer';
flush privileges;

5) 테이블 생성

create table vue_project(
    id int(4) auto_increment,
    title varchar(50),
    description varchar(200),
    published tinyint(1),
    primary key(id)
)

다음 명령어로 프로젝트에 필요한 테이블을 생성해준다.

프로젝트 환경설정

백엔드

1) 스프링부트 프로젝트 만들기

start.spring.io 홈페이지로 들어가서 스프링부트 프로젝트를 만들어준다.

나는 다음과 같이 입력해주고 Generate 버튼을 누르고 프로젝트 파일을 다운로드 받았다.

2) pom.xml 설정

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.7.0</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>vue_project</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>vue_project</name>
	<description>Vue project for Spring Boot with JPA</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

다음과 같이 pom.xml 설정을 해준다.

3) application.properties 설정

# vue의 기본 포트가 8080 이라서 다른 포트로 변경함
server.port=8086

spring.datasource.url=jdbc:mysql://서버주소(혹은 로컬 주소):3306/vue1?useSSL=false
spring.datasource.username=root (예시)
spring.datasource.password=1234qwer (비밀번호 입력)

spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL55Dialect
spring.jpa.hibernate.ddl-auto=update

# jpa query log 설정
spring.jpa.show-sql=true

프론트엔드

1) node, npm 설치

먼저 vue를 설치하기 위해서는 node와 npm이 필요하다.

node 설치는 https://nodejs.org/ko/ 여기로 들어가서 받으면 된다.

node 설치가 완료되면 잘 설치 되었는지 다음 명령어로 확인하자.

node --version
npm --version

참고로 내 컴퓨터에 깔린 node, npm 버전은 각각 v14.17.5, 6.14.14다.

2) vue cli 설치

npm install -g @vue/cli

버전은 2로 해준다!

3) vue 프로젝트 생성

vue create frontend

frontend 경로 아래에 vue 프로젝트를 생성할거라서 저렇게 입력해줬다.

그러면,

다음과 같은 경로에 vue 프로젝트 파일들이 생성된다.

빌드 및 프록시 환경설정

프론트엔드와 백엔드를 같이 빌드를 할거라서 따로 설정을 해줘야 한다.

frontend 경로에 vue.config.js 파일을 만들어준다.

// vue 빌드 파일을 백엔드 빌드 경로로 가기 위해 설정 (기본적으로는 target 폴더로 이동함)
module.exports = {
  outputDir: "../src/main/resources/static",

  devServer: {
    // api 라고 요청이 오면 저 경로로 보내라는 설정
    proxy: {
      '/api': {
        target: "http://localhost:8086",
        changeOrigin: true
      }
    }
  }
}

- 프론트엔드에서 백엔드로 api 요청을 할 때, 백엔드 주소로 맵핑할 수 있도록 프록시 설정을 해준다.

(앞에서 백엔드 포트를 8086으로 설정했기 때문에 다음과 같이 설정했음)

- 그리고 프론트엔드 빌드한 파일을 디폴트인 target 경로가 아닌, 백엔드와 같이 빌드를 하기 위해서 /src/main/resources/static 경로로 들어가도록 따로 설정해줬다.

빌드가 잘 되는지 확인하기