spring - vue 통합개발환경 셋팅

1. spring Initializr로 새로운 프로젝트 생성

2. Initializr 환경 셋팅( Maven, Java11, Jar)

3. dependencies 설정 (일단 쓰겠다싶은 것 추가함)

4. 프로젝트 finish

 

5. root 경로에 .editorconfig 라는 파일 생성

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

 

6. properties -> yml  로 바꿔주기  and 기본정보 세팅

spring:
#  datasource:
#    url: jdbc:h2:~/test
#    username: sa
#    password:
#    driver-class-name: org.h2.Driver
  datasource:
    url: jdbc:mysql://localhost:3306/task_agile?useSSL=false
    username: root
    password: song8420
    driver-class-name: com.mysql.jdbc.Driver

  jpa:
    hibernate:
      ddl-auto: none
    properties:
      hibernate:
        format_sql: true
        default_batch_fetch_size: 100

logging:
  level:
    org.hibernate.SQL: debug
    org.hibernate.type: trace

server:
  port: 8081

7. 셋팅을 dev와 기본으로 구분( application-dev.yml 생성)

spring:
  #  datasource:
  #    url: jdbc:h2:~/test
  #    username: sa
  #    password:
  #    driver-class-name: org.h2.Driver
  datasource:
    url: jdbc:mysql://localhost:3306/task_agile?useSSL=false
    username: root
    password: song8420
    driver-class-name: com.mysql.jdbc.Driver

** 여기서 github에 프로젝트 한번 올리고 넘어감 **

 

8. 노드가 설치되어 있다는 가정하에... vue/cli 설치

npm install -g @vue/cli

 

9. 플젝 경로에 front-end vue셋팅

cd 경로
vue create front-end

 

10. vue 동작 확인

cd front-end
npm run serve

11. package.json에 추가

"scripts": {
	...
	"test": "npm run test:unit && npm run test:e2e"
},

12. front-end - tests - e2e - specs, tests - unit 에 있는 테스트 파일 삭제 또는 테스트코드 작성 후 npm test

 

13. 전체적인 빌드 라이프 사이클

 

14. pom.xml 셋팅

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>pre integration test</id>
                        <goals>
                            <goal>start</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>post integration test</id>
                        <goals>
                            <goal>stop</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.6.0</version>
                <!-- executions 섹션은 npm 명령어 상세내용 추가하는 곳-->
                <executions>
                    <!-- npm install 명령어 실행-->
                    <execution>
                        <id>front-end install</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <!-- prepare-package 페이즈 동안 npm run test:unit 실행-->
                    <execution>
                        <id>front-end unit test</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>test:unit</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <!-- prepare-package 페이즈 동안 npm run build 실행-->
                    <execution>
                        <id>front-end build package</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                               <argument>run</argument>
                               <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <!-- integration-test 페이즈 동안 npm run test:e2e 실행-->
                    <execution>
                        <id>front-end e2e test</id>
                        <goals>
                           <goal>exec</goal>
                        </goals>
                        <phase>integration-test</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>test:e2e</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
                <configuration>
                    <workingDirectory>${basedir}/front-end</workingDirectory>
                </configuration>
            </plugin>
            <!-- 프론트앤드 빌드 결과를 src/main/resources에 복사-->
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <version>3.1.0</version>
                <executions>
                    <!-- index.html 파일을 prepare-package 페이즈 동안 src/main/resources/template에 복사-->
                    <execution>
                        <id>copy front-end template</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${basedir}/src/main/resources/templates</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>front-end/dist</directory>
                                    <includes>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                    <!-- static 폴더 전체를 src/main/resources/static 폴더로 복사-->
                    <execution>
                        <id>copy front-end assets</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${basedir}/src/main/resources/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>front-end/dist</directory>
                                    <excludes>
                                        <exclude>index.html</exclude>
                                    </excludes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                    <execution>
                        <id>copy front-end template to target</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/templates</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>front-end/dist</directory>
                                    <includes>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                    <execution>
                        <id>copy front-end assets to target</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${basedir}/target/classes/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>front-end/dist</directory>
                                    <excludes>
                                        <exclude>index.html</exclude>
                                    </excludes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <configuration>
                    <filesets>
                        <fileset>
                            <directory>${basedir}/src/main/resources/static/static</directory>
                        </fileset>
                        <fileset>
                            <directory>${basedir}/src/main/resources/templates</directory>
                            <includes>
                                <include>index.html</include>
                            </includes>
                        </fileset>
                    </filesets>
                </configuration>
            </plugin>
        </plugins>
    </build>

 

15. vue.config.js 수정(포트변경)

module.exports = {
  devServer: {
    port: 3000,
    proxy: {
      '/api/*': {
        target: 'http://localhost:8081'
      }
    }
  }
}

 

16. 기본 controller 매칭

@Controller
public class MainController {
  @GetMapping(value={"/", "/login"})
  public String entry() {
    return "index";
  }
}

작성중...