[Springboot-Vue] Back-end 설정하기

앞서 우리는 backend는 springboot frontend는 vue.js로 설정하기 위하려 설치과정을 실행하였다.

이 환경에서 개발할때에는 backend 서버를 켜놓고, vue.js 개발용 서버를 켜서, 두 가지의 서버를 사용하여 개발을 한다.

그렇기 위해서는 backend 서버를 기본포트인 8080포트에서 8081포트로 변경하고, frontend에서는 proxy를 이용하여 frontend서버를 통하여 backend서버를 호출하도록 하여 CORS이슈를 최소화 하기위하여 설정하도록 하겠다.

#application.properties
server.port=8081

그리고 추후에 개발환경과 서버에 배포할 환경을 만들기 위해 application.properties와 같은 경로에 config-default.properties 를 추가해주고 다음과 같이 변경해 준다.

//DemoApplication.java
@SpringBootApplication
@PropertySource(name="config", value="config-${spring.profiles.active:default}.properties")
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

CORS관련 설정 코드도 추가해 준다.

#config-default.properties
cors.origin.url=http://localhost:8080
cors.base.url=http://localhost:8081

@Configuration
public class WebConfig implements WebMvcConfigurer {
 
    @Value("${cors.origin.url}")
    private String originUrl;
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins(originUrl)
                .allowCredentials(true);
    }
}

이로써 backend에서의 환경설정은 완료 되었고, frontend설정을 계속하겠다.