Backend는 Springboot, Frontend는 vue.js 를 사용하는 프로젝트의 세팅과 빌드 배포까지의 과정을 포스팅하려 한다.
오늘은 첫 번째로 Springboot 설치 및 Vue.js 설치까지 진행하겠다.
- Springboot
- Maven
- Vue-cli
생성뒤 Maven 라이브러리를 모두 불러오고 나서 pom.xml 에 다음과 같이 추가해 준다.
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.10.0</version>
<configuration>
<workingDirectory>frontend</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v14.4.0</nodeVersion>
<npmVersion>6.14.5</npmVersion>
<nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
<npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm build</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run publish</arguments>
</configuration>
</execution>
</executions>
</plugin>
이제 vue-cli를 설치할 차례이다. 만약에 node.js가 설치되어 있지 않다면 설치를 하고 오길 바란다.
npm install -g @vue/cli vue create demo #아래 옵션은 입맛에 맞게 고르면 된다. ? Please pick a preset: Manually select features ? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors ◉ Linter / Formatter ◉ Unit Testing ❯◯ E2E Testing mv demo frontend #demo폴더를 생성하고 frontend폴더로 변경하였다. 이는 프로젝트 이름을 demo라고 짓고, 빌드과정을 frontend 폴더에서 하기위해서 진행하였다. cd frontend npm install npm run serve
이로써 springboot 와 frontend 환경을 설치해 보았다.