스프링 부트 모바일 웹 분리 적용

기존에 개인프로젝트로 작업 중이던 쇼핑몰 홈페이지가 모바일 웹에서는 텍스트나 사진, 전체적인 간격이 맞지 않아서 모바일로 접속 시 자동으로 모바일 접속을 판단하고 모바일용 웹으로 바꿔주는 작업을 하였다.

 

먼저 pom.xml 파일에 dependency와 repositories 를 추가해준다.

<dependency>
<groupId>org.springframework.mobile</groupId>
<artifactId>spring-mobile-device</artifactId>
<version>2.0.0.M3</version>
</dependency>

 

<repositories>
<repository>
         <id>spring-milestones</id>
         <name>Spring Milestones</name>
         <url>https://repo.spring.io/libs-milestone</url>
         <snapshots>
             <enabled>false</enabled>
        </snapshots>
    </repository>
</repositories>

 

그 다음 WebConfig.java를 다음과 같이 설정해 준다.

package com.mary.blog.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import com.mary.blog.config.aop.RoleIntercepter;
import com.mary.blog.config.aop.SessionIntercepter;

import org.springframework.context.annotation.Bean;
import org.springframework.mobile.device.DeviceResolverHandlerInterceptor;
import org.springframework.mobile.device.switcher.SiteSwitcherHandlerInterceptor;
import org.springframework.mobile.device.view.LiteDeviceDelegatingViewResolver;
import org.springframework.web.servlet.view.InternalResourceViewResolver;


@Configuration
public class WebConfig implements WebMvcConfigurer{ // implements WebMvcConfigurer 하면 web.xml 파일됨

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/m/**")
.addResourceLocations("classpath:/m/")
.setCachePeriod(20);
}


@Override
public void addInterceptors(InterceptorRegistry registry) {

// 다른곳에서 사용 하지 않아서 굳이 IOC 할 필요 없음 

registry.addInterceptor(new SessionIntercepter())
.addPathPatterns("/user/**")
.addPathPatterns("/post/**")
.addPathPatterns("/post**");
        registry.addInterceptor(deviceResolverHandlerInterceptor());
        registry.addInterceptor(siteSwitcherHandlerInterceptor());
registry.addInterceptor(new RoleIntercepter()).addPathPatterns("/admin/**");
}
    @Bean
    public DeviceResolverHandlerInterceptor deviceResolverHandlerInterceptor() {
        return new DeviceResolverHandlerInterceptor();
    }

    @Bean
    public SiteSwitcherHandlerInterceptor siteSwitcherHandlerInterceptor() {
     return SiteSwitcherHandlerInterceptor.urlPath("/m", "/m", "/");
    }

    @Bean
    public LiteDeviceDelegatingViewResolver liteDeviceAwareViewResolver() {
        InternalResourceViewResolver delegate = new InternalResourceViewResolver();
        delegate.setPrefix("/WEB-INF/views/");
        delegate.setSuffix(".jsp");
        LiteDeviceDelegatingViewResolver resolver = new LiteDeviceDelegatingViewResolver(delegate);
        resolver.setEnableFallback(true);
        resolver.setMobilePrefix("mobile/");
        resolver.setTabletPrefix("mobile/");
        resolver.setNormalPrefix("/");
        return resolver;
    }
}

 

--------------------------------------------------------------------------------------------------------------------------------------------

 

addResourceHandlers는 resource/static 폴더 이외에 css, images, js 등의 설정 폴더를 추가할 때 사용한다.

SiteSwitcherHandlerInterceptor 는 모바일/테블릿/pc를 구분 하여 url을 설정해주는 작업으로 (모바일/테블릿/pc) 순으로 urlpath를 구성하면 된다.

LiteDeviceDelegatingViewResolver는 바라보는 폴더를 선택하는 것 같다. 

 

해당  설정 후 모바일용 컨트롤러를 기존 pc 웹 컨트롤러들을 복제하여 _mobile을 붙여 생성해주었고 

@Controller 밑에 @RequestMapping("/m")을 추가하여 /m을 적용하도록 해주었다.

 

또한 WEB-INF/views 밑에 mobile 폴더를 생성한 후 기존 jsp 파일 설정 그대로 복사한 후 images, js, css 경로를 /m 붙여주는 작업을 하였다. 이 작업을 해주지 않으면 302 무한 리다이렉트를 볼수 있다.... 2시간 넘게 찾음..

또한 기존에 favicon.ico 404에러가 떳는데 실행이 정상적으로 되길래 무시했는데 모바일 작업하면서 리다이렉트를 계속 호출해서 보기 좋지 않아 검색해보니  브라우저 타이틀 아이콘이 없거나 경로가 맞지 않으면 발생한다고 하여 <link rel="shortcut icon" href="#"> 을 추가하여 에러가 나오지 않도록 변경했다. 

참고한 url : https://cheonfamily.tistory.com/7

.ico favicon.icofavicon.ico ㅂ