Spring - Springboot + Vue3 + MariaDB를 카페24에 배포할 때 Tip(주의사항)

카페 24에 호스팅 과정은 어렵지 않으니 다른 블로그를 참고하면 쉽게 할 수 있다. 대신 호스팅 과정 중에 겪은 문제들을 기록하고자 한다.

 

1. 환경

* 프로젝트

SpringBoot 2.7.14

Vue 3.3.4

JDK 8

 

* 서버

Tomcat 8.5.x 

JSP 2.3

Servlet 3.0

JDK 8

MariaDB 10.1.X UTF-8

---

2. Tip

2.1 403 Forbidden 에러

* 원인 : 보안 인증이 안돼 있는 경우 발생

 

* 해결방안 : url의 https -> http 로 변경 또는 ssl 인증서 발급

---

 

2.2 DB설정 정보가 틀릴 경우

java.sql.SQLInvalidAuthorizationSpecException: (conn=565) Access denied for user

 

* 원인 : db설정 정보가 틀린 경우

 

* 해결방안 : url에 도메인 주소를 넣으면 안되고 localhost로(원격 서버에서 원격 db에 접근하는 것이니 내 컴퓨터에서 내 db에 접근하는 것과 마찬가지)

---

 

2.3 Caused by: java.util.ConcurrentModificationException

호스팅 과정에서의 문제라기 보단 build.gradle에서 MariaDB Connector/J의 버전을 지정해줬어야 했다. 

 

한참 헤맸던 이유는 이클립스에선 해당 문제가 발생 안되는데 인텔리제이 커뮤니티 버전과 원격 서버에서는 해당 문제가 발생했기 때문이다. 버전 명시를 하지 않을 경우 mavenCentral()에서 최신 버전을 가져오는 것으로 알고 있는데 왜 이런 문제가 발생하는지 의문이긴 하다.

 

* 원인 : MariaDB자체의 문제

 

* 해결방안 : 공식 문서에 보면 3.1.2 버전부터 이슈해결됐다고 나옴 

runtimeOnly 'org.mariadb.jdbc:mariadb-java-client:3.1.4'

 

참고 : https://mariadb.com/docs/xpand/release-notes/mariadb-connector-j-3-1/3-1-2/

Open Source Database (RDBMS) for the Enterprise | MariaDB

 

---

 

2.4 파일 업로드, 조회할 경우

배포 후 파일을 업로드, 조회할 때는 로컬과 방법이 다르다.

 

* 업로드 : 저장경로 설정은 로컬과 같다. 하지만 저장경로가 프로젝트 내부로 설정되면 안되고 외부로 설정되어야 한다.

Cafe24

위 사진 처럼 프로젝트(ROOT)외부에 upload폴더를 만들어 저장하자.

 

* 조회 : 조회는 설정을 추가해줘야 한다. 아래의 코드를 보자

<Spring Boot>
@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/upload/**")
				.addResourceLocations("file:///C:/{아이디}//tomcat/webapps/upload/")
				.resourceChain(true)
				.addResolver(new PathResourceResolver());
		
        // vue + springboot 연동 시 새로고침 오류 설정
		registry.addResourceHandler("/**/*")
				.addResourceLocations("classpath:/static/")
				.resourceChain(true)
				.addResolver(new PathResourceResolver() {
					@Override
					protected Resource getResource(String resourcePath, Resource location) throws IOException {
						Resource requestedResource = location.createRelative(resourcePath);
						return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
					}
				});
	}
}

<VUE>
descriptionFilePath: "/upload/" + props.storedDescriptionFilepath

 

WebMvcConfigurer를 구현한 WebConfig클래스를 만들어 준다.

addResourceHandlers를 오버라이딩 해주는데 이 메소드는 특정 위치에 있는 정적자원(이미지, html 파일 등)을 가져올 수 있는 핸들러를 추가해준다. 매개변수로 받은 registry에 등록한다. SpringMVC에서 ViewResolver가 하는 역할과 같다고 생각하면 편하다.

주의점 : location 설정시 file:///~~~~는 윈도우일 경우이고 리눅스일 때는 다르다. 

 

그 다음 클라이언트에선 경로를 /upload/파일명으로 지정해주면된다.

 

 

---

2.5 Vue+SpringBoot 연동 후 새로고침 오류

* 원인 :

Vue는 SPA(Single Page Application)이기 때문에 index.html에서 모든 작동이 일어난다.

페이지의 컴포넌트를 바꾸거나 전체를 교체해야 하는 경우 route를 써야 한다. 이때 route의 경로를 Spring Boot에서 캐치해 Controller로 전달해주기 때문에 발생하는 오류다. 

 

* 해결방안 :

구글링을 해보니 크게 2가지 방안이 있었다. 난 첫번째를 사용했고 두번째는 아래에 첨부했다. 

두번째 방법 대신 첫번째 방법을 선택한 이유는 두번째 방법이 우회하여 해결하는 방법이라 생각했기 때문이다. 즉, 문제 원인을 해결하는게 아니다라고 생각했다. 

 

첫번째 방법 :

<Spring Boot>
@Configuration
public class WebConfig implements WebMvcConfigurer {

	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/upload/**")
				.addResourceLocations("file:///C:/{아이디}//tomcat/webapps/upload/")
				.resourceChain(true)
				.addResolver(new PathResourceResolver());
		
        // vue + springboot 연동 시 새로고침 오류 설정
		registry.addResourceHandler("/**/*")
				.addResourceLocations("classpath:/static/")
				.resourceChain(true)
				.addResolver(new PathResourceResolver() {
					@Override
					protected Resource getResource(String resourcePath, Resource location) throws IOException {
						Resource requestedResource = location.createRelative(resourcePath);
						return requestedResource.exists() && requestedResource.isReadable() ? requestedResource : new ClassPathResource("/static/index.html");
					}
				});
	}
}

<application.properties>
#WebConfiguration path pattern예전버전으로
spring.mvc.pathmatch.matching-strategy=ant_path_matcher

리소스 핸들러를 추가할 때 "**/*" 패턴때문에 오류가 발생했다. 관련글을 찾아보니 2.5.X버전 부터 달라졌다고 했는데 properties파일에서 설정을 변경해 사용했다.

 

참고 : https://haenny.tistory.com/297

https://cokes.tistory.com/125

 

 

두번째 방법 : https://gilu-world.tistory.com/107

https://docs.spring.io/spring-boot/docs/2.3.8.RELEASE/api/deprecated-list.html

 

2.6 ServletInitializer 상속

작성중

https://medium.com/@SlackBeck/spring-boot-%EC%9B%B9-%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EC%9D%84-war%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%A0-%EB%95%8C-%EC%99%9C-springbootservletinitializer%EB%A5%BC-%EC%83%81%EC%86%8D%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94%EA%B1%B8%EA%B9%8C-a07b6fdfbbde

 

3. 정리

글로 써놓고 나니 간단해보이지만 실제론 정말 많이 헤맨듯 하다. 특히 2.3의 경우 며칠을 헤맸는데 공식문서를 꼼꼼히 봐야하는 이유를 알게 해줬다.