Tomcat server 다운로드 / 몇 가지 설정

 이제까지 java를 배운 목적은 server programming, 즉 web server application programming을 위해서이다. Web server application은 web browser나 mobile application과 데이터를 주고받는 통신을 하게 된다. 그런데 이 server는 우리가 못만들기 때문에 기본적으로는 불가능하다고 했다. 그래서 이미 만들어져 있는 것을 다운로드해서 앞으로 진행할 것이라고 했다. 그것이 Tomcat Web Server Application이다. 이것을 다운로드해서 필요한 부분만 부분적으로 프로그래밍 할 것이라 했다.

 

다운로드 및 설정

Apache Tomcat 홈페이지^[각주:1]에서 다운로드 할 수 있다. 수업 때는 8.5.66 버전을 이용했지만 지금은 업데이트 되었는지 8.5.78 버전이다. 해당 zip 을 다운받아 그 내용을 복사해서 필요한 위치에 붙여 넣었다. 이것이 java로 만들어진 web server인 것이다.

 

 이것이 java로 만들어진 web server인 것이다. 우선 bin folder에 가면 여러 file들을 발견할 수 있다. 이들 중에 startup, shutdown을 가지고 server를 켰다가 껐다가 할 수 있다. 이때 port는 8080을 쓴다. 그런데 oracle도 8080 port를 쓰기 때문에 중복되지 않도록 port 번호를 바꿔주어야 한다.

 

 우선 visual studio code로 tomcat folder를 연다. bin folder는 실행 file들을, conf folder는 설정 file들을, webapps folder는 서비스 할 내용을 담고 있다. 이 중에 conf folder에 보면 .xml file 들이 보인다. 이 xml file은 뭘까?

 html과 json file은 작성해야 하는 형식(format)이 존재한다. 반면 txt file은 따로 형식이 존재하지 않는다. 이 xml file은 형식이 있는 친구이다. context.xml file을 열어보면 <Context> 요소 안에 <WatchedResource> 가 자식 요소로 되어있는 것처럼 보인다. html은 xml의 일종이라고 보면 된다고 했다.

 

 이어서 생각해보면 Tomcat Web Server Application을 다운받아서 사용하긴 하는데, 이를 사용하는 작업자의 입장에 맞게 설정을 해야할 필요가 있을 것이다. 이 application의 동작(action)을 setting 하려면 어떻게 해야할까?  표기한 context.xml, server.xml, web.xml 이 application이 구동되는 시점에 이 문서들을 읽어들여서 동작한다. 그렇기 때문에 이미 만들어져 있는 설정을 위해 읽어들이는 문서들을 열어 수정하면 된다.

 

 우선 server.xml 의 69번째 줄의 8080 port를 8888 port로 바꿔줄 것이다. 바꾸고 server 정보가 있는 folder의 bin folder에서 powershell을 열고 ./startup 을 작성하면 눈에 보이지는 않지만 server가 실행된다.

 만약 이 단계에서 방화벽 허용을 물어본다면 허용한다. 이 단계에서 제대로 실행되지 않을 수 있는데, JAVA_HOME 에 대한 환경 변수가 설정되어 있는지 확인해본다. 환경 변수에 대한 정보는 이곳에 정리했었다.^[각주:2]

 

 이렇게 실행된 server를 확인하기 위해 web browser의 주소창에 http://127.0.0.1:8888 을 작성하게 되면 귀여운 tomcat이 나와야 하는데, 지금은 404로 나온다. Powershell에서 ./shutdown 을 작성하면 server가 꺼지고, 아예 페이지에 연결할 수 없게 된다. 하지만 이런 식으로 server를 실행하는 것은 굉장히 번거로운 일이다. 그렇기 때문에 다르게 할 것이다.

 

 새로운 folder를 만들고, eclipse 상단 tab의 File > Switch Workspace > Other 에서 해당 folder 로 바꿔준다. 혹은 eclipse를 실행할 때 해당 folder를 선택한다. 이렇게 work space를 바꾸면 encoding, template, font 등등의 모든 설정을 다시 해주어야 하니 기억한다.

 

 기본 설정을 마쳤다면 eclipse의 우상단에서 Java EE 를 선택하고(default라 없을리 없지만 없다면 상단 tab Window > Perspective > Open Perspective > Other 에서 찾아준다. 화면 하단의 Servers tab에서 우클릭 후 New > Server 를 클릭하면 다음의 단계를 거치게 된다.

 

 

 Apache folder의 항목 중에 작업자가 설치한 Tomcat Server의 버전에 맞는 항목을 클릭해 넘어간 후, Browse 를 클릭해서 해당 server를 다운로드 한 folder를 찾아 선택해서 Finish를 한다. 그럼 작업 Project 목록에 Servers 가 생기는 것을 볼 수 있다. 이전에 vscode를 이용해서 했던 것처럼 server.xml 을 열어서 port 정보를 8080에서 8888로 바꿔준다.

 

 그리고 Window > Preference > encoding 검색 과정을 거쳐 설정을 다음과 같이 바꿔준다.

1. 검색하여 나온 항목 중 Workspace를 클릭해서 하단의 Other를 UTF-8로 바꿔준다.
2. 이어서 Web 항목에 있는 CSS Files, HTML Files, JSP Files를 각각 클릭해서 Encoding 정보를 ISO-10646/Unicode(UTF-8) 로 바꿔주고 적용한다.

 

Hello

 File > New > (Other 클릭 > Web) > Dynamic Web Project, 혹은 우클릭 > New > Dynamic Web Project 를 클릭해서 project의 이름을 Hello로 작성하고 Finish 하면 오른쪽 이미지와 같은 구조로 project가 만들어진다. 여기에서 WebContent의 위치는 web browser 주소창에 입력하는 'http://127.0.0.1:8888/Hello/' 에 해당한다.

 

 만든 project의 WebContent에 우클릭 > New > HTML File 을 선택하면 html file을 만들 수 있는데, 처음이라면 위와 같은 에러 메시지를 볼 수 있다. 이것은 eclipse가 node.js 에 의존하고 있기 때문이라고 했다. 그리고 또 처음이라면 vscode에서 했었던 tab으로 html을 자동 완성할 수 있는 기능도 사용할 수 없다. 이것은 하단에 작성해두겠다.

 

 File을 만들었으면 이어서 하단의 Servers tab 목록에 우클릭 > Add and Remove 를 클릭하면 server를 통해 service 하고 싶은 항목을 추가 및 제거할 수 있다. 추가한 상태로 server를 실행하고, web browser 주소창에 http://localhost:8888/Hello/File name 을 입력하면 해당 내용을 확인할 수 있다. 이때 localhost는 이전에도 말했듯이 127.0.0.1 을 의미한다. 당연히 server를 끄면 해당 내용을 확인할 수 없고, 목록에서 제거해도 확인할 수 없다. 차이가 있다면 server를 끄면 애초에 접근할 수 없다는 메시지를 볼 수 있지만, 목록에서 제거한다면 404 에러 메시지를 확인할 수 있다. 하지만 이렇게 항목을 add하는 등의 일련의 과정들을 계속해서 확인하기에는 상당히 번거로울 수 있다.

 

 우선 상단 tab의 Window > Web Browser > Chrome 을 선택해둔다. 그리고 실행하고자 하는 html file을 작성해서 run 을 하게 되면 오른쪽 처럼 Run On Server 창이 뜨는데, 지금 필자는 server가 존재하기 때문에 Choose an existing server를 선택한 상태로 Finish를 누르면 알아서 Chrome에 해당 주소가 입력되어 html 내용을 확인할 수 있게 된다. 이때 eclipse가 대신해준 과정은 다음과 같다.

1. Hello project를 add.
2. Server를 start.
3. Web browser를 실행해서 선택한 page를 요청할 수 있도록 경로를 제공.

 

	<h1>나의 첫 번째 웹페이지</h1>
	<p>안녕하세요~ 나는 구라입니다</p>
	<!-- 웹에서의 절대경로 이미지 로딩 -->
	<img src="http://localhost:8888/Hello/images/kim1.png">
	<!-- 서버 내에서의 절대경로 이미지 로딩 -->
	<img src="/Hello/images/kim1.png">
	<!-- 현재 위치를 기준으로 상대경로 이미지 로딩 -->
	<img src="images/kim1.png">
	<br>
	<!-- 웹에서의 절대경로 이동 -->
	<a href="http://localhost:8888/Hello/sub/play.html">놀러가기</a>
	<!-- 서버 내에서의 절대경로 이동 -->
	<a href="/Hello/sub/play.html">놀러가기2</a>
	<!-- 현재 위치를 기준으로 상대 경로 이동 -->
	<a href="sub/play.html">놀러가기3</a>

이런 경로를 이용해서 이동하는 방식은 다음의 세 가지가 있다.

1. Web에서의 절대 경로 이동
2. Server 내에서의 절대 경로 이동
3. 현재 위치를 기준으로하는 상대 경로 이동

 

 이런 방식은 이미지 경로를 요청해서 출력할 때도 마찬가지이다. 이 중에서는 2번 방식을 가장 많이 쓴다고 하지만 다른 것들도 알아야한다고 했다. 특히 3번의 상대 경로를 이용하는 방식은 편리하긴 하나 혼동의 여지가 높기 때문에 2번 방식을 더 많이 쓰는 것이라고 했다.

 

 이렇게 경로 요청을 할 때 project name까지, 즉 http://localhost:8888/project name 를 'context path' 라고 한다. 그래서 context path에 slash / 를 붙인 'context path/' 는 WebContent, project의 최상위 경로가 된다.

 

 하지만 사람들은 project에 어떤 내용이 있는지 알 수 없다. 그렇기 때문에 어떤 주소를 요청해야할 지 알 수 없다는 것이다. 그래서 index page 라는 친구가 필요하다. 이 친구는 애플 홈페이지를 방문할 때 'apple.com' 만을 작성하는 것처럼 페이지를 방문했을 때 사용자를 가장 먼저 맞이하는 welcome page가 된다. 이 index page는 index.html 의 이름으로 작성해야 한다. 이름이 무조건 이래야하는데, 이에 대한 설정은 server를 추가할 때 만들어진 Servers 의 web.xml 4720번째 줄 가장 하단에 작성되어 있다. index.html file이 없으면 index.htm, 이것마저 없으면 index.jsp file을 찾아서 welcome page로 만든다. 전부 없다면 만들어지지 않는다.

 

 

 이렇게 어떤 식으로든 완성된 project를 server에 올려서 사용하고 싶다면 어떻게 해야할까? 우선 project 에 우클릭 > Export > WAR file 하면 왼쪽과 같은 창을 볼 수 있다. 저장 경로를 지정하면 file을 export 할 수 있는데, 이 file을 tomcat folder의 webapps folder에 넣고 bin folder로 넘어가서 PowerShell에서 ./startup 을 작성하면 자동으로 project의 압축이 풀린다. 이때 아직 설정이 다 마무리된 것이 아니라 오류가 뜰 수도 있지만, 압축은 풀리고 service 할 준비를 마치게 된다. 만약 고정 ip의 server에 압축을 풀어놓으면 외부에서도 접속할 수 있다.

 

 

node js 설치

 

 Eclipse가 node.js에 의존하고있기 때문에 설치한다. Node.js는 server side javascript이다. Node 홈페이지^[각주:3]에 접속해서 그냥 보이는 것을 설치했다. 당시는 14.17.0 버전이었으나 지금은 16.15.0 버전이다. 다운받아서 default로 설치해준다. 이렇게 설치하고 두는 것이지 우리가 사용하지는 않는다. Eclipse가 알아서 사용해준다. Shell에서 node를 작성하면 버전을 확인할 수 있다.

 

HTML tab 완성 기능^[각주:4]

 링크를 참조하면 설치 방법을 볼 수 있다. 하라는 대로 진행하면 된다. 생각보다 시간이 걸릴 수 있으니 침착하게 기다리자. 만약에 이 과정에서 에러가 발생한다면 node.js 버전의 문제일 것이라고 했다. 실제로 수업 중에도 문제가 발생했고, 방금 설치했던 node를 지워준 다음, 이전 12 버전으로 낮춰서 msi를 통해 다시 다운로드 했었다.

 

 그래도 안된다면 eclipse를 설치한 folder의 features 하위에 있는 emmet folder를 지우고 다시 진행해주면 해결될 것이다.

 

Project 생성하는 것의 문제

 이후에 정리하면서 발견한 문제는 Dynamic Web Project를 만들면서 Finish 버튼이 활성화되지 않는다는 점이었다. 사실 수업 중에도 많이 들었던 것은 eclipse는 오류들 투성이라는 말이다. 이것은 Spring을 설치하면서 기존의 설정을 건드리는 바람에 발생하는 내용이라고 한다. 해결하는 방법은 다음과 같다.

 

 Hello라고 이름을 작성하고 Next를 누르면 src 위치가 공백일 것이다. 해당 내용을 src로 바꾸거나 지우고 src로 만들고하단의 Default output folder 위치에 build\classes 를 작성하고 Next를 누른다. Content directory에 WebContent 라고 작성하고 Finish를 한다.

 

 그리고 project의 build path에 들어가 library에서 추가해줄 것이 있다. 오른쪽에 표기된 세 가지라고 하는데, 필자의 경우는 Server Runtime은 이미 있어서 나머지 두 가지를 추가해서 적용해준다고 한다. 하지만 필자의 경우는 추가해주지 않아도 괜찮았다. (나중에 문제가 생긴다면 돌아오겠다.)

1. Apache Tomcat® - Welcome! [본문으로]
2. Java 설치 및 eclipse 설정 (tistory.com) [본문으로]
3. Node.js (nodejs.org) [본문으로]
4. GitHub - emmetio/emmet-eclipse: Emmet for Eclipse [본문으로]