Gradle + tomcat + firebase + vuejs (1)

0. Gradle + tomcat + firebase + vuejs

일단 나는 firebase를 통해서 서버에 올릴거고, db도 firebase에서 쓸수있는 디비를 연결할거라 spring이나 이런건 사용하지 않으려한다.

 

그래서 jsp가 아닌 html로 만들어서 vue 써보고 Gradle도 써보고 git도 써보고 내가 안써본것들을 공부하면서 테스트하기위한 목적이 있다.

1. Gradle 프로젝트 생성

Gradle 프로젝트로 새로 생성한다.

이클립스 자체의 Windown/preference에서 utf-8로 몽땅 맞춘다. 이건 구글링하면 잘 나와있으니까 패스
그리고 프로젝트도 오른쪽 클릭 후 properties에서 utf-8로 몽땅 맞춘다. 안맞추면 한글이 깨질 확률이 높다.

src/main 밑에 폴더를 만들어준다.

예전엔 java폴더도 만든 것 같은데 지금은 저절로 만들어져서 이클립스에선 안보이지만 폴더로 직접가서 보면 보인다.

 

 

사진처럼 폴더탐색기에서는 java폴더가 보이지만 이클립스 탐색기에서는 java폴더가 안보인다.

이 java폴더는 이클립스 탐색기에 상단에 src/main/java 이것과 같다! 백단과 프론트단을 나눠서 보기 편하게 이클립스 탐색기에서는 이런식으로 폴더구조가 나오는 것같다.
src/main/webapp/index.html도 만들어줬다. 그냥 비어있는 html에 body에 화면에 표시가 되게끔 Hello라는 글자만 추가했다.

 

그리고 gradle 프로젝트 하단에 build.gradle파일을 연다.

처음엔 상단에 apply plugin관련해선 apply plugin: 'java-library' 이것만 있을 것이다.
밑에 다음 3개도 추가해준다.

apply plugin: 'java' //java를 사용하겠다라는 뜻
apply plugin: 'eclipse-wtp' //웹프로젝트는 eclipse-wtp 플러그인으로 분리되었다.
apply plugin: 'war' //build를 war로 말겠다는 뜻

이렇게 작성 후 저장하고 프로젝트 refresh(f5)하고 console탭 나오는 부분에 Gradle Tasks 탭이 생겼을 것이다. 없으면 run as..해서 방법있던데 그건 구글링하면 잘 나온다.

 

Gradle Tasks 탭을 클릭 후 새로고침하고 좀 기다리면 build 폴더 밑에 war가 생겼을 것이다.

여기서 build폴더 말고 build 폴더 밑에 있는 build를 더블클릭하면 build가 된다.

콘솔에 뭐 어쩌고 저쩌고 노소스 업투데이트 이런거 나오면 성공이다.

 

2. tomcat으로 로컬에서 돌려보기

이제 얘를 로컬에서 돌려서 테스트하고, firebase에서도 돌려볼건데.. 일단 로컬에선 어떻게 돌리지?

tomcat에다 올려서 돌려봐야하지않을까?

일단 톰캣깔아서 세팅하는법은 역시 구글링 잘 나와있으니 패스. 나는 원래 깔려있어서 사용했다.

 

서버에 server.xml을 편집하면 서버 관련된 정보를 수정할 수 있다. 난 일단 건드리지 않았다.

Servers 탭에서 새로 하나 만든다. 나는 tomcat8.5를 쓰는데 8 이상이면 별 문제 없을 것 같다. 확실히잔 않다.

서버 start 하고 localhost 확인하면 제대로 화면이 뜬다~!

 

ex) http://localhost:8080/프로젝트명/

• url에 프로젝트명 없이 http://localhost:8080/ 이렇게 접속하기위해선 server.xml파일을 수정해야한다.

제일 하단에 있는 부분을 확인하면

<Context docBase="프로젝트명" path="/프로젝트명" reloadable="true" source="org.eclipse.jst.j2ee.server:프로젝트명"/></Host>

이렇게 있는데 이부분을 밑에와 같이 path를 바꿔줘야한다.

<Context docBase="프로젝트명" path="/" reloadable="true" source="org.eclipse.jst.j2ee.server:프로젝트명"/></Host>

서버를 재시작하고 http://localhost:8080/ 접속하면 index.html화면이 나온다.

 

그럼 끝~!