Vue.js 프론트엔드를 사용하여 스프링 부트를 설정하는 방법

코드와 함께 Quasar 프런트엔드 애플리케이션을 사용하여 기본적인 Spring Boot 백엔드를 위한 프로젝트 구조를 만드는 방법에 대해 배울 것입니다.

Spring Boot 백엔드와 Vue.js 프런트엔드로 구성된 Maven 다중 모듈 프로젝트를 설정하는 방법에 대해 알아봅니다. 응용프로그램 자체는 생성되지 않으며 프로젝트 설정만 이 문서에서 다룹니다.

 

 

소개

대부분의 애플리케이션은 백엔드와 프런트엔드로 구성됩니다. 그러나 프로젝트를 어떻게 구성하고 구성하며 백엔드와 프런트엔드를 어떻게 구축할 것입니까? 선택할 수 있는 옵션이 많고 크기가 모두 맞는 것은 없습니다. 사용 사례에 적합한 결정을 내려야 합니다. 두 경우 모두 백엔드 코드와 프런트엔드 코드를 서로 분리하는 것이 중요합니다. 이렇게 하면 나중에 상황을 바꾸는 것이 더 쉽습니다. 그럼, 어떤 결정을 내려야 할까요?

• 백엔드와 프런트엔드를 동시에 패키징하고 배포하시겠습니까?
• 처음부터 애플리케이션을 확장하거나 축소할 수 있어야 합니까?
• 프런트 엔드를 백엔드와 별도로 업데이트하시겠습니까?
• 많은 것들

 

옳고 그름은 없습니다, 응용 프로그램의 종류와 비기능적인 요구사항에 따라 현명하게 선택해야 합니다. 이 기사에서는 Spring Boot 백엔드 부분과 Quasar 프런트엔드 부분으로 구성된 애플리케이션의 프로젝트 구조를 설정하는 방법에 대해 배울 것입니다(Quasar는 Vue.js 기반 프레임워크입니다). 둘 다 Spring Boot jar 파일로 패키지되어 단일 장치로 배포됩니다. 이를 통해 매우 빠르게 시작할 수 있으며 필요할 때 두 옵션을 모두 분리할 수 있습니다. 후자의 경우 NGINX와 같은 웹 서버에 프런트 엔드 부품을 배포해야 합니다. 빌드 도구로 메이븐이 사용됩니다.

 

 

전제 조건

• 스프링 부트에 대한 기본 지식.
• 기본 퀘이사(Vue.js) 지식 또는 기타 프런트 엔드 프레임워크.
• 기본 Linux 지식.
• 메이븐의 기본 지식입니다.

 

그 외에도 Java 17, Node.js 및 npm이 설치되어 있어야 합니다. Node.js 설치 지침은 공식 문서에서 확인할 수 있습니다. 운영 체제에 대한 지침을 선택하고 LTS 버전을 사용하는지 확인합니다.

다음은 Ubuntu 22.04를 사용할 때의 지침입니다:

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

 

 

그런 다음 설치를 확인합니다:

$ node -v
v18.12.1

 

 

npm 업데이트:

$ sudo npm install -g npm@9.2.0

 

 

Quasar Framework를 설치하면 응답성이 높은 웹 응용 프로그램을 만들 수 있습니다. Vue.js 위의 레이어와 같습니다:

$ sudo npm install -g @quasar/cli

 

 

프로젝트 개요

앞에서 기술한 대로, 당신은 스프링 부트 백엔드 애플리케이션과 퀘이사 프론트엔드로 구성된 메이븐 다중 모듈 프로젝트를 만들 것입니다. 프로젝트 구조는 다음과 같습니다:

myspringbootvueplanet
├── backend
│   └── pom.xml 
├── frontend
│   └── pom.xml 
└── pom.xml

 

 

메인 프로젝트는 my springboot vue planet 이며 자체적인 pom을 가지고 있습니다. 모듈 백엔드와 모듈 프론트엔드로 구성되며, 각각 자체 POM 파일이 있습니다. 다음 섹션에서는 이 구조가 작성되고 디렉토리 및 POM 파일의 내용이 작성됩니다.

 

 

스프링 부트 백엔드

먼저 Spring Boot 백엔드부터 시작합니다:

• Spring Initializr로 이동합니다.
• Java 17 선택
• 메이븐 선택
• Spring Web 종속성을 추가합니다.
• 프로젝트를 다운로드하고 압축을 풉니다.

 

기본 프로젝트 디렉터리에 디렉터리 백엔드를 만들고 src 디렉터리를 이 새 백엔드 디렉터리로 이동합니다. 그런 다음 POM 파일을 백엔드 디렉토리에 복사합니다:

$ mkdir backend
$ mv src/ backend/src
$ cp pom.xml backend/pom.xml

 

 

메인 프로젝트의 폼은 백엔드 모듈에 대해 알 수 있도록 조정해야 합니다. 다음과 같이 내용을 변경합니다.

참고: pom으로 변경되었습니다:

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
     
    <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
    <artifactId>myspringbootvueplanet</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>MySpringBootVuePlanet</name>
    <description>Demo project for Spring Boot with Vue frontend</description>
    <packaging>pom</packaging>
 
    <modules>
        <module>backend</module>
    </modules>
 
</project>

 

 

백엔드 폼도 변경해야 합니다. artifictId를 백엔드로 변경합니다.

다음 행을 변경합니다:

<artifactId>myspringbootvueplanet</artifactId>

 

 

그리고 name를 제거합니다. 폼의 윗부분은 다음과 같습니다:

<artifactId>backend</artifactId>

 

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>3.0.1</version>
  <relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
<artifactId>backend</artifactId>
<version>0.0.1-SNAPSHOT</version>

 

 

프로젝트 루트에서 다음 명령을 실행하여 Maven 프로젝트가 빌드되는지 확인합니다:

$ mvn clean verify

 

 

 

퀘이사 프론트엔드

Quasar 프레임워크를 사용하여 기본 Vue.js 프런트엔드 애플리케이션을 만들려면 저장소 루트에서 다음 명령을 실행하고 필요에 따라 질문에 답합니다:

$ npm init quasar
What would you like to build? › App with Quasar CLI, let's go!
Project folder: … frontend
Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
Pick script type: › Typescript
Pick Quasar App CLI variant: › Quasar App CLI with Vite
Package name: … frontend
Project product name: (must start with letter if building mobile apps) … myspringbootvueplanet
Project description: … A demo project for Spring Boot with Vue/Quasar
Author: … mydeveloperplanet <mymail@address.com>
Pick a Vue component style: › Composition API
Pick your CSS preprocessor: › Sass with SCSS syntax
Check the features needed for your project: › ESLint
Pick an ESLint preset: › Prettier
Install project dependencies? (recommended) › Yes, use npm

 

 

현재 프런트엔드 응용프로그램을 포함하는 리포지토리의 루트에 프런트엔드 디렉토리가 생성되었습니다. 프론트엔드 디렉토리에 다음 폼을 추가합니다. 이 폼에서는 메이븐을 사용하여 프론트 엔드 애플리케이션을 구축할 수 있는 프론트 엔드 메이븐 플러그인을 사용합니다:

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
  <artifactId>frontend</artifactId>
  <version>0.0.1-SNAPSHOT</version>
 
  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.12.1</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v18.12.1</nodeVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm install @quasar/cli -g</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install @quasar/cli -g</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npx quasar build</id>
            <goals>
              <goal>npx</goal>
            </goals>
            <configuration>
              <arguments>quasar build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
 
</project>

 

 

이제 프런트 엔드 모듈을 저장소 루트의 폼에 추가합니다:

<modules>
  <module>backend</module>
  <module>frontend</module>
</modules>

 

 

프로젝트가 저장소 루트에서 다음 명령을 빌드하고 실행하는지 확인합니다:

$ mvn clean verify

 

 

백엔드와 프런트엔드 결합

이제 백엔드 애플리케이션을 사용하여 프런트엔드 배포 파일을 패키지화할 차례입니다. 이렇게 하려면 백엔드 폼의 빌드 플러그인 섹션에 다음을 추가합니다:

<build>
  <plugins>
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <executions>
        <execution>
          <id>copy frontend content</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <outputDirectory>target/classes/static</outputDirectory>
            <overwrite>true</overwrite>
            <resources>
              <resource>
                <directory>../frontend/dist/spa</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

 

 

프런트엔드 빌드는 배포 가능한 파일을 <root repo>/frontend/dist/spa 디렉토리로 출력합니다. maven-resources-plugin은 이러한 리소스를 복사하여 <root repo>/target/classes/static 디렉토리에 추가합니다. Spring Boot 응용 프로그램은 이러한 페이지를 http://localhost:8080/에 제공합니다. 기본적으로 Spring은 여러 디렉토리에서 정적 컨텐츠를 제공합니다.

주의: 이 변경 후에는 백엔드 빌드가 프런트엔드 빌드에 종속되어 있으므로 모듈 빌드를 더 이상 병렬로 실행할 수 없습니다. 메이븐 데몬을 사용하여 빌드를 실행할 때 -T1 플래그를 추가해야 순차적으로 빌드할 수 있습니다.

응용 프로그램을 다시 빌드합니다:

$ mvn clean verify

 

 

다음 명령을 실행하여 저장소의 루트에서 응용 프로그램을 시작합니다:

$ java -jar backend/target/backend-0.0.1-SNAPSHOT.jar

 

 

브라우저에서 http://localhost:8080/로 이동하면 Quasar Framework 시작 페이지가 표시됩니다:

Vue.js 프론트엔드를 사용하여 스프링 부트를 설정하는 방법

 

 

결론

Quasar 프런트 엔드 애플리케이션을 사용하여 기본 Spring Boot 백엔드에 대한 프로젝트 구조를 만드는 방법에 대해 배웠습니다. 배포 가능한 모든 파일은 Spring Boot jar 파일의 일부이며 단일 명령을 사용하여 시작할 수 있기 때문에 배포가 쉽습니다.