Vue.js 추가 (프록시 이용, spring & npm 동시 작동) (#10)

* gradle build에 npm task 추가

spring boot + npm vue.js 동시작업 설정

** 기존에 사용했던 id "com.moowork.node" 는 사용불가
srs/gradle-node-plugin#377
https://plugins.gradle.org/plugin/com.github.node-gradle.node

* Vue Framework 추가 및 프록시 연동

vue: 8080
spring boot: 8081

8080서버로 <server>/api/<page> 요청을 보내면 프록시를 거쳐 spring으로 전달된다.

AllDayLong/build.gradle

@@ -1,12 +1,21 @@
 plugins {
 	id 'org.springframework.boot' version '2.6.4'
 	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
+	id "com.github.node-gradle.node" version "3.2.1"
 	id 'java'
 }
 
+node {
+	version = '14.17.3'
+	npmVersion = '6.14.13'
+	workDir = file("./src/frontend")
+	npmWorkDir = file("./src/frontend")
+	nodeModulesDir = file("./src/frontend")
+}
+
 group = 'com'
 version = '0.0.1-SNAPSHOT'
-sourceCompatibility = '17'
+sourceCompatibility = '15'
 
 repositories {
 	mavenCentral()
@@ -28,3 +37,17 @@ dependencies {
 tasks.named('test') {
 	useJUnitPlatform()
 }
+
+task setUp(type: NpmTask) {
+	description = "Install Node.js package"
+	args = ['install']
+	inputs.files file('package.json')
+	outputs.files file('node_modules')
+}
+
+task buildFrontEnd(type: NpmTask, dependsOn: setUp) {
+	description = "Build vue.js"
+	args = ['run', 'build']
+}
+
+processResources.dependsOn 'buildFrontEnd'

AllDayLong/src/frontend/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

AllDayLong/src/frontend/README.md

@@ -0,0 +1,24 @@
+# frontend
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

AllDayLong/src/frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

AllDayLong/src/frontend/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

AllDayLong/src/frontend/npm-v6.14.13/npm

@@ -0,0 +1,15 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/node_modules/npm/bin/npm-cli.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/node_modules/npm/bin/npm-cli.js" "$@"
+  ret=$?
+fi
+exit $ret

AllDayLong/src/frontend/npm-v6.14.13/npm.cmd

@@ -0,0 +1,17 @@
+@ECHO off
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+"%_prog%"  "%dp0%\node_modules\npm\bin\npm-cli.js" %*
+ENDLOCAL
+EXIT /b %errorlevel%
+:find_dp0
+SET dp0=%~dp0
+EXIT /b

AllDayLong/src/frontend/npm-v6.14.13/npm.ps1

@@ -0,0 +1,18 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  & "$basedir/node$exe"  "$basedir/node_modules/npm/bin/npm-cli.js" $args
+  $ret=$LASTEXITCODE
+} else {
+  & "node$exe"  "$basedir/node_modules/npm/bin/npm-cli.js" $args
+  $ret=$LASTEXITCODE
+}
+exit $ret

AllDayLong/src/frontend/npm-v6.14.13/npx

@@ -0,0 +1,15 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/node_modules/npm/bin/npx-cli.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/node_modules/npm/bin/npx-cli.js" "$@"
+  ret=$?
+fi
+exit $ret

AllDayLong/src/frontend/npm-v6.14.13/npx.cmd

@@ -0,0 +1,17 @@
+@ECHO off
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+"%_prog%"  "%dp0%\node_modules\npm\bin\npx-cli.js" %*
+ENDLOCAL
+EXIT /b %errorlevel%
+:find_dp0
+SET dp0=%~dp0
+EXIT /b

AllDayLong/src/frontend/npm-v6.14.13/npx.ps1

@@ -0,0 +1,18 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  & "$basedir/node$exe"  "$basedir/node_modules/npm/bin/npx-cli.js" $args
+  $ret=$LASTEXITCODE
+} else {
+  & "node$exe"  "$basedir/node_modules/npm/bin/npx-cli.js" $args
+  $ret=$LASTEXITCODE
+}
+exit $ret