~.html 파일에 HTML, CSS, JS등으로 웹 페이지를 열심히 만들고 결과물을 전달해주는 과정에서 스프링프로젝트로 들어가는건지 모르겠지만 html파일을 전부 JSP로 변경해서 넘겨달라는 요청사항이 있었다.
한번 하는거면 문제가 없지만 넘기고 나서도 추가적으로 변경 요청사항이 있었고 그때마다 매번 html을 작업해보고 jsp로 하나하나 수정하는것도 번거로울 뿐더러 include를 통해 내부에 태그까지 심어달라는 둥 여러가지 요구사항이 있어서 구조적으로도 많이 달라지는 상황이었다.
그래서 애초에 jsp에서 다 작업해버리는게 좋다고 판단했고, 주로 사용하던 툴인 VS Code에서 간단하게 JSP를 구동시키고 로컬에서 페이스도 볼 수 있도록 환경 설정을 해보겠다.
spring 프레임워크 boot 설정법은 아니므로 해당 방법이 필요한분들은 다른 포스팅을 찾아보셔야 할 것 같습니다.
톰캣 설치
일단 먼저 WAS서버가 필요한데, 가장 보편적으로 사용하는 톰캣을 설치하자.
https://tomcat.apache.org/download-80.cgi
다운로드가 끝나면 인스톨 프로그램을 통해 설치를 진행한다.
윈도우 환경이라고 생각하고 설치는 간단하니 넘어가도록 하겠다. (설치경로는 기억해야합니다.)
VS CODE 설정
확장 프로그램 설치 - Debugger for Java, Tomcat for Java
먼저 2가지 확장 프로그램을 설치해줘야 한다. 맨 왼쪽 5번째 탭을 누르고 확장 프로그램을 설치해주자.
2가지 설치가 끝나고 탐색기탭으로 돌아가면 최하단에 TOMCAT SERVERS라는 탭이 생긴 것을 볼 수 있다.
탭을 열어보면 아무것도 없을텐데(캡처본은 제가 추가해서 보입니다...)
+버튼을 눌러서 아까 먼저 설치한 톰캣을 등록해준다.
아까 설치한 톰캣을 선택해주면 정상적으로 등록된다.
(일반적으로 설치프로그램을 통해 설치하면 C:\Program Files\Apache Software Foundation\Tomcat 8.5
해당 경로에 있을 확률이 높다. 설치경로를 잘 파악해둔다.)
톰캣이 정상적으로 등록되고 오른쪽 클릭을하면 여러가지 메뉴를 볼 수 있다.
Start : 톰캣을 구동한다.
Stop : 톰캣을 종료한다.
Restart : 톰캣을 재시작한다.
Rename : 등록한 톰캣의 이름을 변경한다.
Open in Browser : 브라우저를 통해 톰캣을 연다.
Open Server Configuration : 가장 중요하다!! 톰캣의 설정을 변경하는 설정파일이다.
Open Server Configuration을 클릭하면 server.xml파일이 열린다.
server.xml
이런식으로 xml파일이 보이는데, 우리가 추가해야할 정보는 2가지정도가 있다.
Host태그쪽에 보면 Value태그가 있는데 바로위에 Context라는 태그를 추가할것이다.
<Context path="" docBase="JSP작업을 할 위치"></Context>
해당 태그를 추가하고 Service 태그 바로 아래 첫번째 Connector의 포트값을 8080 기본에서 80으로 변경해준다.
<Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>
작업이 끝나면 위 캡처의 형태로 변경되어 있어야 한다.
그럼 준비가 끝났다.
현재 세팅한 작업폴더의 위치는 E드라이브의 project의 jspWorks이다.
해당 폴더에 jsp를 만들고 확인해보겠다.
E:/project/jspWorks/test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<title>VS CODE에서 JSP 동작시키기</title>
</head>
<body>
<h1> test.jsp 페이지입니다.</h1>
</body>
</html>
test.jsp를 만들고 톰캣서버 탭에서 톰캣을 구동한다.
그럼 OUTPUT 탭에 여러 메시지들이 쭈르륵 출력되고 원하는 브라우저 하나를 켠다.
http://localhost/test.jsp
jsp명까지 끝까지 입력하여 주소를 입력하고 정상적으로 페이지가 열리는지 확인한다.
2020-09-25 추가----------------------------------------------------------
구동한 jsp의 .java, .class 위치 지정하기
먼저 확인해보았던 server.xml을 열어봅니다.
내부 태그 내용 중 Host태그를 찾고 workDir을 추가합니다.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Server port="8010" shutdown="SHUTDOWN">
<Listener className="org.apache.catalina.startup.VersionLoggerListener"/>
<Listener className="org.apache.catalina.core.AprLifecycleListener" SSLEngine="on"/>
<Listener className="org.apache.catalina.core.JreMemoryLeakPreventionListener"/>
<Listener className="org.apache.catalina.mbeans.GlobalResourcesLifecycleListener"/>
<Listener className="org.apache.catalina.core.ThreadLocalLeakPreventionListener"/>
<GlobalNamingResources>
<Resource name="UserDatabase" auth="Container" type="org.apache.catalina.UserDatabase" description="User database that can be updated and saved" factory="org.apache.catalina.users.MemoryUserDatabaseFactory" pathname="conf/tomcat-users.xml"/>
</GlobalNamingResources>
<Service name="Catalina">
<Connector port="80" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxPostSize="-1" maxParameterCount="-1"/>
<Connector port="8009" protocol="AJP/1.3" redirectPort="8443"/>
<Engine name="Catalina" defaultHost="localhost">
<Realm className="org.apache.catalina.realm.LockOutRealm">
<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/>
</Realm>
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true"
workDir="배포시킬 경로">
<Context path="" docBase="E:/project/jspWorks/ROOT"></Context>
<Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log" suffix=".txt" pattern="%h %l %u %t "%r" %s %b"/>
</Host>
</Engine>
</Service>
</Server>
톰캣을 재기동 하면 지정한 위치에 .java, .class가 생성된 것을 확인 하실 수 있습니다.
'Tools > VS Code' 카테고리의 다른 글
VS Code에서 Git commit message(커밋메시지) 편하게 적용하기 (0) | 2023.05.23 |
---|---|
VS Code - Prettier 자동 정렬 안먹힘(react, typescript) (0) | 2022.11.23 |
VS Code - 저장 시 자동 줄 정렬 끄기 (4) | 2020.11.06 |
VS Code - open in browser 에러 (확장프로그램 에러) (9) | 2020.05.25 |
VS Code - 확장 프로그램 설치(추천) (0) | 2020.02.26 |