개인히스토리저장소

[Spring Boot-Vue] 프로젝트 빌드

작성일자 : 2019.07.21

환경 : Vue 2.6.10, Vue-Cli 2/3, Spring Boot 2.1.6, npm 6.9.0, webpack 3.12.0

목표 : Spring Boot - Vue 구조의 프로젝트를 빌드하여 하나의 jar파일을 생성

0. Vue / Spring Project 세팅

- vue 버전 확인

npm list vue

- vue-cli 버전 확인

vue --version

- vue-cli에서 프로젝트 생성

vue cli 2.X :

  vue init webpack 'ProjectName' 

vue cli 3.X :

   vue create 'ProjectName'

1. vue 프로젝트 빌드

- 빌드할 대상은 vue-cli로 생성한 Default 프로젝트 ( 추가 설정 X )

Build 명령어

- vue cli 2.X :

- vue cli 3.X :

Default 설정 시 빌드 후 %VueProjectRootPath%\dist에서 빌드 결과물을 확인 가능

빌드 결과물을 %SpringBootProjectRootPath%\src\main\resources\static 밑으로 이동

해당 과정까지 진행 시 Spring Boot 서버 실행 후 /로 접근 시 vue 화면에 접근 가능

2. Spring Boot 빌드

빌드할 대상은 SpringBoot Default 프로젝트 ( 추가 설정 X )

Build 명령어

Default 설정 시 빌드 후 %SpringBootProjectPath%\build\libs에서 빌드 결과물을 확인 가능

3. 확인

결과물 실행

jar 파일 실행 후 / 접근 시 vue 기본화면 확인 가능

---

++

실행 시 java, javaw 명령어 차이

java는 cmd창에 콘솔로그가 찍히며 cmd 종료 시 프로세스 종료

javaw는 백그라운드로 실행 

++

Vue Project Build 결과물 경로 설정 방법

vue cli 3.X 으로 생성한 Vue Project 일 시

ROOT 밑에 vue.config.js 파일 추가

[Spring boot] Logback 설정

작성일자 : 2019.07.14

환경 : Spring Boot 2.1.6

Logback이란 SLF4J의 구현체로 자바 오픈소스 로깅 프레임워크

# Spring Boot의 기본 로그 객체로 포함되어 있어 Gradle이나 Maven 설정없이 바로 사용 가능

# spring-boot-starter-web 안에 spring-boot-starter-logging 포함

1. 사용 방법

application.properties

MyClass.java

2. 결과

Console에서 로그 내용 확인 가능

----

로그 레벨

이미지 출처 : http://myblog.opendocs.co.kr/archives/tag/%EB%A1%9C%EA%B7%B8-%EB%A0%88%EB%B2%A8

[Spring Boot] CORS 해결

작성일자 : 2019.07.07

환경 : Spring Boot 2.1.6

다른 도메인에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. CORS (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다. 여기서 Access-Control-Allow-Origin 란 CORS 의 헤더를 의미합니다.

Same Origin Policy에 의해 Script에 의한 cross-site http requests는 허용되지 않습니다. 즉 Ajax를 사용하여 통신을 하고 Front와 Back을 구별하여(ex Spring Boot + Vue.js) 개발하는 구조의 웹 서비스는 개발단계에서 서버와의 통신을 위해 추가로 설정이 필요합니다. 

GpConfig.java

package com.example.demo;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class GpConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry cr) {
        cr.addMapping("/**")
            .allowedOrigins("http://127.0.0.1:8081")  // 허용할 주소 및 포트
            .allowedOrigins("http://localhost:8081");  // 허용할 주소 및 포트
    }

}

ProjectApplication.java 와 동일하거나 그 하위에 위치한 폴더에 작성