톰캣이 설치된 폴더의 webapps/Root 폴더를 보면 웹파일을 볼 수 있다. 톰캣 서버는 이곳의 파일을 실행시켜 웹브라우저에서 html5로 만들어진 문서를 볼 수 있도록 해준다. 고양이그림이 나오는 index.jsp 파일을 index.html 파일로 복사하기 붙여넣기 한 후 html5를 학습하거나 또는 웹서비스를 하기 위한 페이지로 수정할 수 있다.
반응형 html5 톰캣 서버에서 사용하는 방법
톰캣 서버를 사용하여 html5를 연습하는 것이 조금 생소할 수는 있지만 뭐 나름대로 쓸만하다.
비주얼 스튜디오 코드 ( Visual Studio Code )를 사용할 수도 없지만, 이런 것 저런 것 에디터 설치할 필요도 없기도 하고 단순히 html5 파일만 있다면 웹브라우저에서 만들어진 웹화면을 볼 수 있다.
지금은 html5 저작툴도 많기 때문에 어떤 것을 사용하든 바로바로 직관적으로 볼 수 있기도 하지만 실제로 웹화면에서 어떻게 나오는지 확인할 때는 톰캣 만한 것도 없다.
php 를 위한 웹서버 WAS 도 있는 것으로 알고 있지만 기억이 가물가물 하다.
톰캣 서버 준비
개인 pc에서 톰캣을 이용한 웹서비스를 만들고자 할 때 톰캣 서버가 필요하다.
톰캣 서버 말고도 많지만 본인이 현재 잘 알고 있는 것이 톰캣이니 여기서는 톰캣을 위주로 다룬다.
톰캣 서버의 장점이라면 core 파일만 있으면 된다. 용량이 그렇게 많은 것도 아니고, 압축된 core 파일을 다운받아 압축만 플고 톰캣을 실행하면 그만이다.
또다른 장점이 있다면 용량이 부족한 메인 드라이브 대신 USB 같은 외부 드라이브에 설치하여 사용할 수 있다는 점이다.
아파치 톰캣 다운로드와 설치 시작과 종료 하기
아차피 톰캣은 자바 계열로 만들어진 홈페이지나 웹서비스를 할 수 있도록 하는 서버 컨테이너이다. 별도의 설치파일은 없고 코어 파일을 받아 압축을 풀고 시작과 종료만 해 주면 된다. 무설치
lngnat.tistory.com
톰캣 서버의 html 파일 위치
톰캣 서버를 사용하기 위해 어딘가에 자신이 마음에 드는 폴더에 설치를 했다면 어떤 파일을 수정해야 할지 난감하다.
이런 점이 core 파일의 단점이긴 하다. 사용하는 사람이 일일히 하나씩 관심가지고 관리해 줘야 하기 때문에 번거로움이 있다.
일단 폴더의 위치부터 보자.
위의 이미지는 최신의 톰캣 서버 버전 10을 USB에 압축을 풀고 html 파일의 위치가 어디에 있는지 보여주고 있다.
처음에는 index.jsp 파일만 존재하고 index.html 파일은 존재하지 않는다.
index.jsp 파일을 복사하기 붙여넣기 한 후 index.html 로 변경해 주도록 하자.
다음 톰캣 서버를 구동하여 웹화면이 나타나는지 확인해 보도록 한다.
- 톰캣서버 시작
톰캣-설치-폴더/bin/startup.bat - 톰캣서버 중지
톰캣-설치-폴더/bin/shutdown.bat
톰캣 서버를 시작하면 아래와 같이 구동되는 모습이 보인다.
수정하고 반영하기
웹브라우저의 URL 입력부분에 주소를 넣어보도록 한다.
아래와 같이 입력하면 고양이 그림이 나올 것이다.
http://localhost:8080/
또는
http://127.0.0.1:8080/웹브라우저에서 URL을 입력하면 아래와 같이 나올 것이다.
깨진 문자열이 많이 보이지만 정상이다. jsp 파일이 아니고 html 파일을 불러왔기 때문에 jsp 명령어를 사용할 수 없기에 깨진 것처럼 보이는 것이다.
파일의 내용을 간단히 바꿔보도록 하자.
이전에 템플릿 식으로 대충 만들어 놓은 html 코드를 그대로 넣어볼 것이다.
대충 써먹기 위해 만들어진 html 코드는 아래를 참고한다.
다시 만드는 반응형 html5 문서 템플릿
반응형 html5 템플릿을 만드는 것은 나중에 홈페이지를 만들 때 시간을 줄이기 위함이다. 템플릿이 많으면 좋고, 다양하면 더 좋다. 눈에 보이는 다른 홈페이지들의 화려함은 무시하고 처음부터
lngnat.tistory.com
<!-- html5 웹문서 명시 -->
<!DOCTYPE html>
<html>
<head>
<!-- 반응형 meta 명시 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 한글 깨짐 방지 -->
<meta charset="UTF-8">
</head>
<body>
<!-- header -->
<div id="header">홈페이지 제목</div>
<!-- // -->
<hr/>
<!-- nav-menu -->
<div id="nav-menu">메뉴</div>
<!-- // -->
<hr/>
<!-- contents -->
<div id="contents">내용</div>
<!-- // -->
<hr/>
<!-- footer -->
<div id="footer">저작권 소유자</div>
<!-- // -->
</body>
</html>웹브라우저에서 F5 ( 새로고침 ) 하여 화면을 보도록 하자.
잘 나온다. 볼품없이 깨끗한 초기화면이 나오고 있다.
이제 톰캣 서버를 중지하도록 하자.
중지명령어는 shutdown.bat 파일이며, 실행하면 검은색 바탕화면으로 동작하고 있단 톰캣서버가 종료되고 사라지는 것을 확인할 수 있다.
'programming > TroubleShootInG' 카테고리의 다른 글
| 쿠팡 파트너스 api 이용 제한 답변 메일 내용 정책에 신경을 써야겠다. (0) | 2022.11.18 |
|---|---|
| certbot 윈도우에 설치하기 https를 위한 무료 ssl 인증서 생성 프로그램 (0) | 2022.11.18 |
| 아파치 톰캣 다운로드와 설치 시작과 종료 하기 (0) | 2022.11.16 |
| 다시 만드는 반응형 html5 문서 템플릿 (0) | 2022.11.16 |
| 톰캣 로그 확인하기 카페24 웹호스팅 putty 확인 (0) | 2022.11.15 |
댓글