Spring Boot 실행 시에 Webpack DevServer 도 같이 띄우기(Window 환경)

Spring boot 프로젝트 내에 WebpackDevServerStarter 클래스를 아래처럼 생성

package coding.toast.fullstack.additional;

import lombok.extern.slf4j.Slf4j;
import org.springframework.boot.CommandLineRunner;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.context.event.ContextClosedEvent;
import org.springframework.context.event.EventListener;
import org.springframework.stereotype.Component;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.StringJoiner;

/**
 * DevServer Starter
 * spring boot 를 실행함과 동시에 vue-cli 의 devServer 를 실행시키는 Starter 빈객체이다.<br>
 * 매번 Spring boot 실행 시키고, front end 폴더 가서 yarn serve 입력하는 게 너무 귀찮아서 만들었다.<br>
 * 다만 이게 정상적으로 동작하려면 먼저 nodejs, yarn 이 설치된 상태여야 한다.<br>
 */
@Profile({"default", "local"}) // 기본 프로파일 또는 로컬 프로파일 사용 시에만!
@Component
@Slf4j
public class WebpackDevServerStarter implements CommandLineRunner {

	// 제 코드에서는 이렇게 경로를 찾았지만, 본인 입
    String frontendDirectory = new StringJoiner(File.separator)
            .add(System.getProperty("user.dir")) // 프로젝트가 실행되고 있는 경로
            .add("src").add("frontend").toString();

    @Override
    public void run(String... args) throws Exception {
        log.info("vue project directory path is ... " + frontendDirectory);
        log.info("activating Webpack DevServer with \"yarn start\", using port 3000");
        Runtime.getRuntime().exec("cmd.exe /c cd \"" + frontendDirectory + "\" & start cmd.exe /k \"yarn serve\"");
    }


    @EventListener(ContextClosedEvent.class)
    public void onContextClosedEvent(ContextClosedEvent contextClosedEvent) throws IOException, InterruptedException {
        // kill devServer
        log.info("ContextClosedEvent occurred at millis: " + contextClosedEvent.getTimestamp() + " Killing DevServer!!!!");
        ProcessBuilder killer = new ProcessBuilder("cmd.exe", "/C", String.format("yarn --cwd \"%s\" kill-devServer", frontendDirectory));
        killer.start().waitFor();
    }

}

• package.json 의 일부.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npx --yes kill-port 3000 && vue-cli-service serve --port 3000",
    "kill-devServer": "npx --yes kill-port 3000"
  },
  // ... 생략...
}

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '127.0.0.`',
    open: true // devServer 초기화 후 자동으로 브라우저 열리도록 함.
  }
})