Spring Boot Maven + Nuxt.js 연동하는 법 (CORS, Proxy)

Nuxt.js + Spring Boot

📢 들어가기 전에

• Intellij IDEA Community Edition 2019.3.2 에서 진행했다. 버전이 달라도 상관 없음. 
• Spring Boot Maven 프로젝트와 Nuxt.js 를 연동하는 방법을 알아본다. Vue.js도 거의 동일한 방법으로 진행할 수 있다.

🍃 Spring Boot (Maven)

File - New - Project

File - New - Project 로 새 프로젝트를 생성한다.

 

Create New Project

초기 화면의 Create New Project 로 생성할 수도 있다.

 

Maven 선택

클릭하고나면 위와 같이 New Project 라는 창이 뜰텐데, 여기서 좌측의 Maven 을 클릭한다.

(Gradle 프로젝트를 생성하고자 할땐, Gradle 을 선택해주면 된다.)

위쪽의 Project SDK 도 선택해준 뒤 다음으로 넘어간다. (아마 각자의 환경에 설치된 JDK 가 이미 선택되어 있을 것이다.)

 

Project Name, Location 설정

 

프로젝트의 이름과 경로를 설정해준다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>role-playing-community</artifactId>
    <version>1.0-SNAPSHOT</version>
</project>

pom.xml

 

이제 끝난 것이나 다름 없다!

Maven 프로젝트가 생성될 것이고, pom.xml 이라는 Maven 설정파일이 존재하는 걸 확인할 수 있다.

🚀 간단한 pom.xml 설명

• 프로젝트의 구조와 내용을 설명하고 있는 Maven 설정 파일.
• 프로젝트 관리 및 빌드에 필요한 환경 설정, 의존성 관리 등을 할 수 있다.
• <modelVersion>
  • Maven의 pom.xml의 모델 버전
• <groupId>
  • 프로젝트를 만든 그룹의 Id이다. 기업 이름, 또는 팀 이름이 해당될 수 있다.
  • 고유하게 식별할 수 있어야하기 때문에 패키지 명명 규칙을 따른다. 때문에 .으로 원하는 만큼 하위 그룹을 만들 수 있다.
  • 패키지 명명 규칙이란 간단히 설명하면 도메인을 역순으로 나열한 것과 같다.
  • 예) org.apache.maven
• <artifactId>
  • 프로젝트의 Id.
  • 초기에 프로젝트를 생성할 때 Name 입력칸에 작성했던 프로젝트의 이름.
  • Maven이 생성해내는 artifact는 <artifactId>-<version>.<extension> 와 같은 구조를 보인다.
  • 예) demo-0.0.1-SNAPSHOT.jar
• <version>
  • 프로젝트 버전을 의미.
  • SNAPSHOT은 아직 개발 단계라는 뜻이다.

 

이제 Spring Boot를 주입해보자

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
    </parent>

pom.xml

 

 

위 코드를 <project> 태그 내에 삽입한다.

 

spring-boot-starter-parent 라이브러리를 알아보기에 앞서, <parent> 태그가 무엇인지 알아보자.

 

Maven 은 상속이 가능하다는 특징을 가지고 있다.
<parent> 태그 내에 선언한 라이브러리를 다른 의존성/하위 모듈(<dependency>) 들이 상속받아 쓸 수 있다는 뜻이다. 따라서 <parent>는 공통으로 사용하는 설정 등을 주입할 때 쓰인다.

 

spring-boot-starter

spring-boot-starter-parent에 대해 설명하기 전에 spring-boot-starter 에 대해 알아보겠다.
spring-boot-starter는 사전에 미리 정의한 편리한 의존성 조합을 제공하는 Spring Boot 모듈이다.
프로젝트에서 설정해야하는 다수의 의존성을 포함하고 있기 때문에, spring-boot-starter를 정의해 주는 것 만으로도 다양한 의존성을 추가한 효과를 볼 수 있다.
쉽게 한마디로 정의하자면, Spring Boot를 사용하기 위한 통합 라이브러리이다.
spring-boot-starter가 가지고 있는 다양한 의존성은 여기에서 확인해 볼 수 있다.

 

spring-boot-starter-parent

그렇다면 우리가 주입한 spring-boot-starter-parent는 무엇일까?
프로젝트에 다양한 라이브러리들을 주입하게되면 라이브러리 버전 간 충돌문제가 발생할 수 있다.
spring-boot-starter가 의존성 조합을 제공해 준다면, spring-boot-starter-parent는 해당 의존성 조합간의 충돌문제가 없는 검증된 버전 정보 조합을 제공한다.
spring-boot-starter-parent를 정의해주면 <dependencies> 에 입력할 라이브러리들의 버전을 적어주지 않아도 자동 설정된다.

 

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

pom.xml

 

지금까지 우린 (버전관리가 가능한) Spring Boot 통합 라이브러리를 설정해줬다.
이제 위 코드를 <project> 태그 내에 삽입하여 본격적인 Spring Boot 웹 개발을 위한 라이브러리를 주입해주자.

 

spring-boot-starter-web

Spring에서 제공하는 의존성으로, Web 개발에 필요한 설정을 제공한다.
Sppring MVC, REST, Tomcat 서버를 내장하고 있다.

 

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

pom.xml

 

Maven 은 빌드 툴이다. 때문에 pom.xml에서 빌드관련 설정을 할 수 있다.
<project> 태그 하위에 위 코드를 삽입하여 빌드 시 필요한 플러그인을 주입해주자.
spring-boot-maven-plugin 은 실행가능한 jar 파일을 만들어주는 플러그인이다.

 

 

Spring Boot Maven 프로젝트를 실행하는데 필요한 최소한의 의존을 모두 주입했다!
pom.xml을 건들면 오른쪽 하단에 위와 같은 팝업이 뜨는걸 확인할 수 있었다.
Import Changes 를 클릭해 주입한 라이브러리를 Import 할 수 있다.

 

pom.xml - Maven - Reimprt

팝업이 뜨지 않는다면 pom.xml 오른쪽 마우스 클릭 - Maven - Reimport 로도 가능하다.

 

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args); // start whole Spring Framework
    }
}

Application.java

 

이제 Spring Boot 설정은 끝났다. 실제로 서버를 가동시켜보자.
src/main/java 폴더에 패키지를 만들고 패키지 내에 Application.java 파일을 생성한 뒤 위 코드를 입력한다.
Spring Boot 를 실행시키는 main 파일이다.

 

Run

이 파일을 Run 시키면 Spring Boot 서버가 가동되는 모습을 볼 수 있다!🎉

 

🚀 [참고] Runner 로그창에 색 입히는 법

Spring Boot 실행 Log 창

Spring Boot 를 실행하고 나면 로그 창이 위와 같이 뜰텐데, 흰 글씨로만 되어 있어서 단조로운 느낌이 든다.
이 단조로운 Runner 로그창을 application.properties 설정 파일을 통해 커스터마이징 해줄 수 있다. 

application.properties
외부 설정 파일이라고도 하며 어플리케이션에서 사용하는 여러가지 설정 값들을 어플리케이션 밖이나 안에 정의할 수 있는 파일을 뜻함. 
이 파일은 스프링 부트가 어플리케이션을 구동할 때 자동으로 로딩되는 파일로, key - value 형식으로 값을 정의하면 어플리케이션에서 @Value 어노테이션 등으로 참조하여 사용할 수 있다.


src/main/resources 경로에 application.properties 파일을 생성한 뒤 파일 내에
spring.output.ansi.enabled=ALWAYS 라고 입력해주자.
ANSI 를 지원하는 Console에서 output 에 항상 색을 입히게 한다는 뜻이다. 

application.properties

output ansi 설정 후 Spring Boot 실행 Log 창

설정 후 알록달록 예쁜 로그창이 출력되는걸 확인할 수 있었다🥳

👉 Nuxt.js

Nuxt.js

Vue 프레임워크 기반 개발환경 구축에 도움을 주는 프레임워크이다.
간단하게 얘기하면 서버사이드 렌더링, Store, Router 기능을 제공하는 Vue.js 프레임워크이다.

 

npm init nuxt-app <project-name>

Nuxt.js 를 Install하는데엔 여러가지 방법이 있지만 이번엔 npm 를 이용해보겠다.
다른 Install 방법은 여기서 확인할 수 있다.

 

<project-name> 을 "frontend"로 해서 설치하니 frontend 폴더 내에 Nuxt.js 프로젝트가 생성된걸 확인할 수 있었다.

 

cd <project-name>
npm run dev

위 명령어로 Nuxt.js를 시작할 수 있다.
이로써 Nuxt.js 설치가 끝났다!🎉

Spring Boot와 Nuxt.js 설치를 모두 끝냈으니, 이제 두 서버를 연동시킬 차례다.
프론트엔드 서버와 백엔드 서버는 어떻게 연결되는걸까?

⛳ Spring Boot, Nuxt.js 연동

프론트엔드 서버와 백엔드 서버를 연결하려면 우린 프록시(Proxy) 서버를 이해해야한다.

 

프록시(Proxy) 서버

"Proxy"는 단어 그대로 해석하면 "대리"라는 뜻을 가지고 있다.
프록시 서버는 서로 연결점이 없거나 보안상의 이유로 직접 통신할 수 없는 외부 네트워크들을
간접적으로 연결시키는 중계인 역할을 한다.

즉, Spring Boot(백엔드 서버)와 Nuxt.js(프론트엔드 서버)를 연결하기 위해선 중계인인 Proxy가 필요하다는 뜻.

사용자가 프론트 엔드 서버로 접근해서 리소스를 요청하면, 프록시는 이 요청을 백엔드로 연결시켜 요청을 전달한다.
그럼 이제 그 프록시를 설정해보도록 하자.

 

Spring Boot 서버 콘솔

Spring Boot 를 시작할 때, 톰캣 서버가 포트 8080으로 실행되는 걸 확인할 수 있었다.

 

Nuxt.js 서버 콘솔

Nuxt.js는 port 번호 3000 으로 실행이 되었다.

---

🚀 참고, 포트 번호 수정법
Nuxt.js 는 config 파일 또는 package.json 파일을 통해, Spring Boot는 application.properties 설정파일로 수정할 수 있다.

• Nuxt.js
  1. nuxt.config.js
     • 루트경로의 nuxt.config.js에 아래와 같이 입력.

     module.exports = {
     //...
       server: {
         port: 3001, // 바꿀 포트번호 입력
       },
     };

     • nuxt.config.js 는 Nuxt.js의 웹팩 설정 파일이다.
  2. package.json
     • package.json의 scripts 부분에 --port <port> 를 추가.

     "scripts": {
         "dev": "nuxt --port 3001",
         "build": "nuxt build",
         "start": "nuxt start --port 3001",
         "generate": "nuxt generate"
       }

• Spring Boot
  1. application.properties
     • src/main/resources 하위에 application.properties 파일을 생성하고 server.port = 8081 을 입력.
     • application.properties 파일은 외부 설정 파일로, 애플리케이션(프로젝트)에서 사용하는 여러가지 설정 값들을 키, 값 형식으로 저장해두면 애플리케이션의 밖이나 안에서 참조해 쓸 수 있다.
     • application.properties파일은 Spring Boot가 애플리케이션을 구동할 때 자동으로 로딩하는 파일이다.
  2. Intellij IDE

Edit Configurations...

• 상단의 Edit Configuration 을 클릭하거나 alt + shift + f10 단축키를 통해 Run/Debug Configurations 창을 열자.

• Environment variables 입력칸에 server.port=8081 을 입력하면 포트를 설정할 수 있다.

---

 

3000 포트에서 /api로 시작하는 요청이 발생하면 8080 포트로 연결을 시키는 프록시를 설정해보자.

Vue.js에선 vue.config.js 파일에서 devServer.proxy (개발 모드에서 프록시 설정) 를 통해 프록시를 설정할 수 있다.
하지만 Nuxt.js는 서버 사이드 렌더링을 지원하는 Universal 애플리케이션이기 때문에
Vue.js처럼 웹팩 devServer.proxy를 사용할 수 없다.
이유는, Nuxt.js는 프로덕션(production - 배포용)에서조차 프록시가 필요하기 때문이다.
초기 요청이 처리되고 앱이 서버 측에서 렌더링될 때 브라우저가 아닌 서버가 호출을 수행하므로 모든 API 요청은 프록시가 되어야 한다.

 

npm i @nuxtjs/axios 
npm i @nuxtjs/proxy

따라서 @nuxtjs/proxy 모듈을 따로 설치해 주자
(api 요청을 위한 axios도 설치)

 

module.exports = {
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy'
    ],
    axios: {
        proxy: true
    },
    proxy: {
        '/api': {
            target: 'http://localhost:8080/',
            changeOrigin: true // cross origin 허용 
        }
    }
}

nuxt.config.js

 

모듈이 설치되고 나면 nuxt.config.js 파일에 위 코드를 추가.
/api 로 시작하는 요청이 들어오면 target, 즉 8080 서버로 요청을 전달한다는 뜻이다.
changeOrigin: true는 "Cross Origin"을 허용한다는 뜻으로, 말그대로 "교차 출처"를 허용한다는 것을 의미한다.
"교차 출처" 라는 말이 조금 생소할 수 있는데, 쉽게 풀어 말하면 "다른 출처"이다. 여기서 출처는 서로 다른 포트를 의미한다.
"서로 다른 출처의 리소스 공유한다" 우린 이것을 CORS(Cross-Origin Resource Sharing) 이라고 부른다.

 

프록시 설정이 완료 되었다!🎉
이제 제대로 연결되었는지 확인해보자.

 

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class HelloWorld {

    @GetMapping(value="/helloWorld")
    public String helloWorld() {
        return "Hello World!";
    }
}

HelloWorld.java

 

src/main/java/패키지 내에 HelloWorld.java라는 테스트 파일을 만들고 위와 같이 입력했다.

 

localhost:3000/api/helloWorld 경로의 브라우저

http://localhost:3000/api/helloWorld 으로 접근하자 "Hello World!" 가 출력된걸 확인할 수 있었다.
3000 포트로 요청했지만 프록시를 통해 8080 포트의 결과가 나왔다.

 

이번 포스팅의 목표였던 Spring Boot와 Nuxt.js 연동을 완료해보았다.🙌
부족한 글이지만 봐주셔서 감사합니다.

피드백은 언제나 환영!

 

 

webpack.js.org/configuration/dev-server/#devserverproxy

DevServer | webpack

stackoverflow.com/questions/56165709/nuxt-js-spa-devserver-settings

Nuxt.js SPA devserver settings

yunyoung1819.tistory.com/9

프록시 서버(Proxy Server)

evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

jeong-pro.tistory.com/168

메이븐(Maven)은 알고 스프링(Spring)을 쓰는가? (pom.xml 분석하며 가볍게 정리하는 빌드 툴, Maven)

goddaehee.tistory.com/199

[Maven] Maven 이란? (정의, 예제)

ko.nuxtjs.org/

Nuxt.js - Vue.js 프레임워크

github.com/kimmy100b/spring-boot-vue/wiki/HowToCreateProject

kimmy100b/spring-boot-vue