start.spring.io에서 아래와 같이 환경을 설정한 뒤 Generate 해주었다.

Generate된 spring boot에서 에러가 났다. 원인은 spring boot 3 버전 부터는 Java 17을 사용해야 된다고 한다. 컴퓨터에는 Java 11버전이 깔려있기 때문에 Gradle에서 Framework 버전을 2버전으로 낮춰주니 오류가 해결되었다. 관련 자료

 

돌려보면 아래와 같은 에러가 떴다.

> Process 'command '/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/java'' finished with non-zero exit value 1

해결 방법은 아래와 같이 setting에서 설정해주면 된다. (참고 문서)

 

Add dependency

	// http client
	implementation("org.apache.httpcomponents:httpclient")
	// json
	implementation("org.json:json:20210307")

 

Add API KEY

application.yml에 추가해준다. (application.properties를 쓰면 application.properties로 쓰면 됌)

server:
  port: 8000

riot:
  api:
    key: api key 값
 API key 값은 시스템 상의 안전을 위해서 발급받을 때 다른 사람에게 공유되지 않도록 권유한다. 그렇기때문에 application.yml을 .gitignore에 추가하여 git에 api key 값이 올라가지 않도록 설정해주어야 합니다.

root directory에 .gitignore 파일 추가 -> application.yml 추가

 

Frontend를 Thymeleaf로 하려했다가 Vue.js로 만들어보려 하는데, 링크를 참고했습니다. 

 

Vue.js를 사용하려고 여러 블로그를 보니 node.js를 먼저 설치한 뒤 설치합니다. node.js를 먼저 설치하는 이유는 아래와 같이 3가지가 있었습니다.

  1. 패키지 관리
    • node.js는 JS의 기본 패키지 관리자인 npm과 함께 제공됩니다. npm을 사용하면 프로젝트에 필요한 Vue.js 및 기타 종속성을 설치할 수 있습니다. 종속 요소와 해당 버전을 관리하고 필요한 패키지를 자동으로 확인합니다.
  2. 빌드 도구
    • Vue.js 프로젝트는 일반적으로 web pack과 같은 빌드 도구를 사용하며, 여기에는 node.js가 필요합니다. 이러한 도구는 Vue 컴포넌트 컴파일, JavaScript 파일 번들링, 에셋 최적화 등과 같은 작업에 도움이 됩니다. 빌드 도구는 node.js를 사용하여 다양한 빌드 스크립트 및 구성을 실행합니다.
  3. 서버 측 렌더링
    • Vue.js는 서버 측 렌더링 기능도 제공하므로 서버에서 Vue.js 컴포넌트를 미리 렌더링할 수 있습니다. 이는 초기 페이지 로딩 성능과 SEO를 개성하는 데 유용합니다. Vue.js의 서버 측 렌더링은 서버에서 렌더링 프로세스를 실행하기 위해 node.js에 의존합니다.


Install node.js

링크를 통해서 설치해주면 됩니다.

 

Install Vue.js

mac 기준 입니다. 터미널에서 아래 명령어를 실행합니다.

sudo npm install -g @vue/cli

 

Test

# npm 버전 확인
npm -v

# node.js 버전 확인
node -v

# veu.js 버전 확인
vue --version

 

Create Vue.js

vue cli를 이용하여 sprint boot root directory에서 vue create frontend 명령어를 통하여 Vue.js 프로젝트를 생성했다.

 

 

Deploy as a spring-boot static resource when building vue.js

package.json에 scripts 부분 수정

"serve": "vue-cli-service serve"   =>   "serve": "vue-cli-service serve --port 3000" 
"build": "vue-cli-service build"   =>   "build": "vue-cli-service build --watch"

vue.config.js 파일에 내용 추가

module.exports = {
  // npm run build 타겟 디렉토리
  outputDir: '../src/main/resources/static',

  // npm run serve 개발 진행시에 포트가 다르기때문에 프록시 설정 (port 번호는 spring boot port 번호로)
  devServer: {
    proxy: 'http://localhost:8000'
  }
};

 

터미널 디렉토리를 frontend로 변경("cd frontend")하고 npm run build 명령어를 실행하면 spring boot resources/static/js 폴더와 파일이 추가된 것을 확인할 수 있다.  

이후 spring boot를 실행하면 Vue.js 페이지가 나온다. (잘 배포 되었다는 증거)

Root route를 추가하고 index.html로 반환해주니 Thymeleaf와 관련된 에러가 발생했고, gradle에 Thymeleaf와 관련한 dependency를 없애주니 잘 동작했습니다.

 

 

 

 

 

참고 문서

 

 

 

+ Recent posts