Home

오늘의 기억

[SpringBoot + Vue + TypeScript] 완벽한 개발환경 구축하기 (2): 서버 (SpringBoot)


Server (SpringBoot)

Intro

SpringBoot로 서버 구축시 키 포인트가 하나 있다.
바로 Thymeleaf 같은 Template Engine을 사용하지 않는다는 것이다.
SpringBoot는 단순히 API 서버와 리소스 바인딩 용도로만 사용되며,
HTML 파일 및 화면에 필요한 리소스 자체는 모두 Front-end에서 관리된다.

(만약 서버에서 일부 렌더링이 된 리소스가 필요하다면, 그 순간 고려해야 할 것은 SSR(Server Side Rendering)이며, 여기서는 SSR을 언급하지 않는다.)
(또한 리소스 바인딩은 Apache나 NginX 같은 웹서버를 이용해도 상관없으며, 운영시 대부분 그렇게 운영된다.)


소스 설치

SpringBoot 프로젝트를 만드는 방법은 여러가지가 있지만
여기서는 Spring Initializr를 이용해서 설치한다.

Spring Initializr 사이트에 접속 후 다음과 같이 설정한다.


Spring Initializr

Build 시스템은 Gradle을 사용했고, Spring Boot 2.2.0 으로 설치하였다.
Dependency는 가장 최소한으로 DevTool과, Spring Web (MVC) 만 추가하였다.
DevTool은 SpringBoot를 개발시 아주 편리하고 유용하게 해주는 툴이고,
Spring Web은 기본적인 웹 서비스가 가능하게 해주는 라이브러리이다.

설정이 완료되면 하단에 Generate 버튼을 통해 Zip 파일을 받은후
이전에 생성한 Root 디렉토리 하위에 압축을 푼다.
압축을 풀면 디렉토리 명이 아까 입력한 프로젝트 이름이 되는데,
이를 server 로 디렉토리 명을 변경한다.

# root/example
$ mv example server
$ cd server

설정

기본적으로 생성 된 SpringBoot 구조는 불필요한 Depth가 너무 많아서 불편한 경우가 많다.
따라서 다음과 같이 소스 구조 및 Depth를 변경할 것이다.

내용 기본 Directory 변경 Directory
Java Source 디렉토리 ./src/main/java ./src
Java Resouces 디렉토리 ./src/main/resources ./resources
정적 파일(Html, js, css..) ./src/main/resources/static, ./src/main/resources/templates ./public

아래 명령어대로만 입력하면 완료된다.
윈도우 같은 경우는 PowerShell을 이용해서 입력해도 되고, 그냥 명령어보고 따라해도 된다.

# root/example/server
$ mv src/main/java/com src/ # com 디렉토리 이동
$ mv src/main/resources ./ # resources 디렉토리 이동
$ mkdir public # public 디렉토리 생성
$ rm -r src/main src/test resources/static resources/templates # 불필요 디렉토리 삭제

디렉토리 이동이 완료되었으면 SpringBoot 에서도 디렉토리를 찾을 수 있게 설정을 해줘야한다.
build.gradle 파일을 열어 아래 내용을 추가해준다.

sourceSets {
    main {
        java {
            srcDir 'src'
        }
        resources {
            srcDir 'public'
            srcDir 'resources'
        }
    }
}

서버 마지막 설정으로는 application.xml 설정만 하면 된다.
Spring MVC의 Resource 패턴 및 매핑 설정이다.

Resource Request는 dist로 시작하는 요청으로 받을 것이며,
public 하위 디렉토리에 dist 디렉토리가 추후 생성 될 것이다.

# root/example/server/resources/application.properties
spring.mvc.static-path-pattern = /dist/**
spring.resources.add-mappings = true
spring.resources.static-locations = classpath:/dist/

만약 Yaml으로 하고자 한다면, yml 으로 확장자를 변경 후 다음과 같이 설정하면 된다.

# root/example/server/resources/application.yml
spring:
    mvc:
        static-path-pattern: /dist/**
    resources:
        add-mappings: true 
        static-locations: classpath:/dist/

Controller

인덱스 페이지 매핑을 위한 Controller가 필요하다.
따라서 Java 소스 디렉토리에 PageController.java 파일을 생성 후 메소드 하나를 입력한다.

@Controller
public class PageController {

	@RequestMapping("/")
	public String index() {
		return "/dist/index.html";
	}

}

이것으로 서버 설정은 얼추 마무리가 되었다.


[SpringBoot + Vue + TypeScript] 완벽한 개발환경 구축하기 연재 시리즈

20191103 Charyum.Park