[SpringBoot] 따로 개발한 springboot와 vue 합치기

스프링부트와 뷰에서 작업이 모두 끝났다면 뷰 파일을 스프링 static 폴더에 넣어 함께 실행시킬 수 있다.

 

1. vue 프로젝트 build

터미널에 다음 명령어를 입력하면 dist폴더에 프로젝트를 바로 실행할 수 있는 index.html파일과 css, js파일이 만들어진다.

npm run build

 

2. dist 파일 spring으로 이동시키기

src/main/resources/static 위치에 dist 속 파일을 모두 넣으면 된다.

 

3. WebConfig 설정하기

내 config는 src/main/java/com/_____/_____/config/WebConfig.java에 있다. 따라서 그 클래스의 addResourceHandler 메서드에 다음을 추가한다. (코드는 나중에 헷갈리지 않기 위해 전부 첨부했다.)

"/**/*" root context 아래 모든 주소는 static 폴더 내에서 찾으면 된다는 코드다.

addResolver에 해당 url이 없는경우 index.html로 가는 PathResourceResolver를 추가한다.

package com.___.____.config;
 
import java.io.IOException;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.resource.PathResourceResolver;
 
import com.ssafy.happyhouse.interceptor.JwtInterceptor;
 
@Configuration
public class WebConfig implements WebMvcConfigurer {
 
	private static final String[] EXCLUDE_PATHS = { "/user/**", "/error/**" };
 
	@Autowired
	private JwtInterceptor jwtInterceptor;
 
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/**").allowedOrigins("*")
				.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
				.maxAge(6000);
	}
 
//이 부분
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		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");
			}
			
		});
	}
}