2008년 12월 11일 목요일

[Server] Windows XP에 Aphche + Tomcat + PHP + Mysql + Eclipse 셋팅 하기

웹 개발 환경을 구성하기 위한 서버 셋팅 가이드 입니다. 여기저기 서버를 셋팅하는 가이드는 많은 데 아무지식없이 전부를 연동하기는 힘들더군요.(그게 미션이었다는...) 오래전에 다른 블로그나 카페에있던 가이드를 보고 성공한 것들만 경험을 바탕으로 모아온거라 출처가 불분명 한것도 많아서 내용을 다시 작성했습니다. 이전 블로그에서 작성했던 포스트를 토대로 옮겨온거라 설치 버전이 상당히 오래된 구성이지만 설치하는 과정이 어떠한 지만 이해하고 넘어가셔도 좋겠습니다.

 

1. 준비

미리 파일을 준비하고 시작하면 좋지만 영문 사이트에 가서 구하기 쉽지 않은 파일들도 있습니다.(필요하신분은 댓글에 남겨 주시면 보내드리겠습니다) 서버를 셋팅하고 연동할때 프로그램끼리 버전을 호환시키는것이 중요한테 약간의 버전차이는 괜찮지만 소숫점아래 두자리 이상의 차이가 난다면 연동 되지 않을것 입니다.(아마도?)

필요한 파일 보기

 

 

2. JDK(Java Development Kit) 설치

q jdk-1_5_0_06-windows-i586-p.exe를 실행하면 인스톨러화면이 나옵니다. 다음 화면에서  “I accept the..”를 체크하고 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나타나면 Jdk 설치 디렉토리를 선택한 후 “Next”를 클릭합니다.

 

q 다음 화면이 나타나면 Jre 설치 디렉토리를 선택한 후 “Next”를 클릭합니다.

 

q 아래 화면이 나오면 “Next” 를 클릭합니다.

 

q 정상적인 설치완료 후 “Finish” 버튼을 클릭합니다.

 

3. 환경변수 등록

다음으로는 윈도우에 환경 변수를 등록해 줍니다.

 

q 내컴퓨터 > 오른쪽 버튼 > 속성 > 고급 > 환경변수 > 시스템 변수 > 새로 만들기 버튼을 눌러 다음과 같이 입력합니다.

모든 사용자가 사용하도록 하기 위해서는 시스템 변수에, 현 윈도우 계정 사용자만 사용할 경우는 사용자 변수에 새로 만듭니다.

 

4. Apache 설치

apache_2.0.55-win32-x86-no_ssl.msi 설치 파일을 실행 시킵니다.

 

q 인스톨러가 실행되면서 다음 화면이 나오면 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 “I accept the..” 체크하고 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 그림과 같이 입력, 선택 후 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 Typical 선택 후 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 경로 수정 후 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 “Install” 버튼을 클릭합니다.

 

q 정상적인 설치완료 후 “Finish” 버튼을 클릭합니다.

 

5. Apache 설정

 

q jakarta-comcat-connectors-jk2.04-win32-apache2.0.49.zip의 압축을 풀면 나오는 mod_jk2.so 파일을 C:\Apache Group\Apache2\modules 밑으로 카피합니다.

 

q C:\Apache Group\Apache2\conf 밑에 workers2.properties 파일을 생성한 다음 아래와 같이 내용을 입력 하고 저장 합니다.

[shm]

file=C:/Apache Group/Apache2/logs/shm.file  아파치를 경로와 맞춰 줍니다.

size=1048576

 

[channel.socket:localhost:8009]

port=8009

host=127.0.0.1

 

[ajp13:localhost:8009]

channel=channel.socket:localhost:8009

 

[status:status]

 

[uri:localhost/jkstatus/*]

group=status:status

 

[uri:localhost/*.jsp]

worker=ajp13:localhost:8009

 

[uri:localhost/jsp-examples/*]

worker=ajp13:localhost:8009

 

[uri:localhost/servlets-examples/*]

worker=ajp13:localhost:8009

 

workers2.properties의 역할

 

q C:\Apache Group\Apache2\conf\httpd.conf 파일 수정 

LoadModule userdir_module modules/mod_userdir.so

#LoadModule usertrack_module modules/mod_usertrack.so

#LoadModule vhost_alias_module modules/mod_vhost_alias.so

#LoadModule ssl_module modules/mod_ssl.so

 

모듈 로드 하는 곳에 아래 내용을 추가합니다.

LoadModule jk2_module modules/mod_jk2.so

JkSet config.file "C:/Apache  Group/Apache2/conf/workers2.properties"  파일경로 맞춰줍니다.

 

#

# ExtendedStatus controls whether Apache will generate "full" status

# information (ExtendedStatus On) or just basic information (ExtendedStatus

# Off) when the "server-status" handler is called. The default is Off.

#

#ExtendedStatus On

# symbolic links and aliases may be used to point to other locations.

#

DocumentRoot "C:/Apache Group/Tomcat 5.5/webapps/ROOT"

톰캣의 DocumentRoot 경로와 아파치 경로를 일치 시켜 줍니다.

저는 톰캣의 기본 Root경로와 맞췄습니다.

#

# Each directory to which Apache has access can be configured with respect

===중간 코드 생략===

# This should be changed to whatever you set DocumentRoot to.

#

<Directory "C:/Apache Group/Tomcat 5.5/webapps/ROOT">

DocumentRoot와 같게 합니다.

 

# The Options directive is both complicated and important.  Please see

# http://httpd.apache.org/docs-2.0/mod/core.html#options

# for more information.

===중간 코드 생략===

#

    Options Indexes FollowSymLinks

url을 호출 할때 경로 안에 파일이 없으면 파일목록을 보여주게 되는데 그걸 방지 하기 위해 Indexes FollowSymLinks를 삭제 합니다.

#

===중간 코드 생략===

DirectoryIndex index.html index.php index.jsp index.htm

디렉토리 인덱스로 사용할 파일 목록의 이름을 나열합니다. (여러 개를 나열할 때는 스페이스로 구분)

ServerAdmin             이메일 주소

ServerName              도메인네임과 포트번호

 

# AllowOverride controls what directives may be placed in .htaccess fil

AddDefaultCharset EUC-KR  한글이 깨지지 않도록 맨 아래에 추가(요새는 UTF-8을 쓰죠~)

아파치를 설정하고 운영함에 있어 httpd.conf파일의 설정들이 중요한데요.

httpd.conf파일을 한글로 번역해 놓은 걸 한번 쯤 읽어보시면 이해하는데 도움이 됩니다.

 

6. Tomcat 설치

apache-tomcat-5.5.12.exe 설치 파일을 실행 시킵니다.

 

q 인스톨러가 실행되면서 다음 화면이 나오면 “Next” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 “I Agree” 버튼을 클릭합니다.

 

q 다음 화면이 나오면 다음과 같이 체크 후 "Next" 버튼을 클릭 합니다.

 

q 다음 화면이 나타나면 tomcat 설치 디렉토리를 선택 후 “Next”를 클릭합니다.

 

q 다음 화면이 나타나면 기본 접근 Port 번호와 admin 암호를 입력한 후 “next”를 클릭한합니다. (admin 암호: Tomcat 에서 제공하는 admin Tool 을 이용할 때 사용됩니다.)

 

q 다음 화면이 나타나면  JDK Path 를 지정합니다.

주의!) JDK 가 설치된 PATH 를 지정해야 합니다. (기본적으로 물고 들어오는 C:\Program Files\Java\j2re1.5.0_06 과 같은 경우, 단순히 JRE 환경만 있고 javac 과 같은 개발환경이 없습니다.)

참고) Eclipse 에는 JDK Standard VM 경로가 설정되어 있습니다. 이 경로와 동일하면 됩니다.

 

q 정상적인 설치완료 후 “Finish” 버튼을 클릭합니다.

 

7. tomcat 설정

톰캣은 설정할게 좀 많습니다. ㅠㅠ

 

q C:\Apache Group\Tomcat 5.5\conf\web.xml 을 수정합니다.

<servlet>
<servlet-name>invoker</servlet-name>
<servlet-class>
org.apache.catalina.servlets.InvokerServlet
</servlet-class>                     

<init-param>                                      <servlet>의 주석을 풀어줌니다
<param-name>debug</param-name>
<param-value>0</param-value>
</init-param>
<load-on-startup>2</load-on-startup>

</servlet>

 

    <servlet-mapping>
        <servlet-name>invoker</servlet-name>
        <url-pattern>/servlet/*</url-pattern>
    </servlet-mapping>

 

※ 톰켓 서블릿을 쓰려면?
C:\tomcat5\common\lib\servlet-api.jar를 C:\jdk1.5.0\jre\lib\ext로 복사합니다.

q C:\Apache Group\Tomcat 5.5\conf\jk2.properties 를 생성하여 아래코드를 넣습니다.

#AUTOMATICALLY GENERATED

#Fri Nov 15 02:47:04 KST 2002

#---- jk2.properties

# list of needed handlers.

handler.list=apr,channelSocket,request,shm

# Set the default port for the channelSocket

channelSocket.port=8009

channelSocket.address=127.0.0.1

# Dynamic library

serverRoot=C:/Apache Group/Tomcat 5.5/webapps/ROOT  root 디렉토리 경로

 

q C:\Apache Group\Tomcat 5.5\conf\server.xml를 생성하여 아래코드 삽입

<Host name="localhost" debug="0" appBase="/"
unpackWARs="true" autoDeploy="true"
xmlValidation="false" xmlNamespaceAware="false">

webapps 는 Tomcat 의 Default DocumentRoot 입니다.
이것을 수정하기 위해서는 webapps 경로를 넣습니다.

<Context path="" docBase="d:/www" debug="0" reloadable="true"/>

docBase="root 디렉토리 경로" , reloadable="true"를 추가하면 사이트의 내용이 변경되는 대로 서버 재시작 없이 바로 적용됩니다.

 

q C:\Program Files\Java\jdk1.5.0_06\lib\tools.jar  파일을 C:\Apache Group\Tomcat 5.5\common\lib로 복사합니다.

 

q Apache Tomcat 5.0>Configure Tomcat을 실행한 후 Start Up 탭을 선택, Working Path C:\Apache Group\Tomcat 5.5\webapps\ROOT로 지정 합니다. (root 디렉토리를 변경해줬을 경우 변경한 경로로 지정)

 

q 이제 아파치와 톰캣을 설치 했으므로 서버 시작해 봅니다.

Apache2 는 인스톨과 동시에 작동중이며 이는 시작>프로그램 > Apache HTTP Server 2.0.49 > Control Apache Server > Monitor Apache Servers에서 확인할 수 있습니다. Tomcat은 Configure Tomcat이 System Tray에 상주되어 있으므로 General 탭에서 Start를 해주면 됩니다.

 

※ 톰캣을 윈도우 시작시 자동시작 하고 싶을때는 서비스에서 수동을 자동으로 변경해 주면 됩니다.

 

8 . 동작확인

q Apache2http://localhost 페이지가 뜨면 정상 작동하는 것입니다.

q Tomcat5http://localhost:8080 페이지가 뜨면 정상 작동하는 것입니다.

q Apache2 Tomcat5의 연동은 아래의 페이지가 뜨면 정상 작동하는 것입니다.

http://localhost/jkstatus/
http://localhost/jsp-examples/
http://localhost/servlets-examples/

 

 

9. Tomcat + Eclipse 연동

q Eclipse는 압축만 풀어 놓으면 바로 작동하지만 Eclipse 에서 Tomcat 을 조작하기 위해서는 관련 Plug-in 을 설치하여야 합니다.

http://www.sysdeo.com/eclipse/tomcatPlugin.html에서 다운로드

(참고 : Tomcat plug-in Eclipse 버전에 맞추어야합니다.)

 

q 압축을 해제한 후 Eclipse 설치 디렉토리내의 plugins 폴더로 이동시켜주면 됩니다.

 

q 다음과 같이 Menu Tomcat 관련 메뉴가 생성. 순서대로 Tomcat Start/Stop/Restart

 

q Customize Perspective

Tomcat Project 를 생성하기 위하여 Perspective 에 등록시켜줍니다.

[Window]-[Customize Perspective] 을 선택합니다.

이 과정을 마치면 [File]-[New] 메뉴에서 ‘Tomcat Project’ 을 선택할 수 있습니다.

 

 

q Preference 설정

[Windows]-[Preference] 을 선택하여 나온 팝업창에서 Tomcat 항목을 선택합니다.

- Tomcat 버전을 설정합니다.

- Tomcat Home Directory 설정합니다.

 

q Tomcat Project 생성

새 프로젝트에서 ‘Tomcat Project’를 선택합니다.

 

다음과 같이 sample Project 가 생성되었습니다.

기본적으로 Tomcat 라이브러리와 , 웹 애플리케이션을 위한 경로 (WEB-INF/src, WEB-INF/classes, WEB-INF/lib, work ) 가 생성됩니다.

 

q 처음 .jsp 을 생성하여 작업하는 경우는 Syntax Highlighting 이 되지 않습니다.

이를 설정하려면 다음 작업을 수행합니다. [Window]- [Preferences] General - Editors - File Associations을 선택합니다. 다음처럼 New File Type   *.jsp ‘ 라고 입력합니다.

q Associated editors 에서는 ‘Java Editor’ 를 선택합니다.

 

 

이렇게 설정하면 Java Editor 로 열립니다.


 

q JSP 파일 생성

[File]-[New]-[File] 을 선택하여 Hello.jsp 파일을 생성합니다.

다음 코드를 입력합니다

<%@ page contentType="text/html;charset=KSC5601"%>

<%

String title ="Hello JSP~";

%>

<html>

<body>

<h1><%= title %></h1>

<%

out.println("안녕하세요~ ");

%>

<%= new java.util.Date() %>

</body>

</html>

 

웹브라우저상에서 실행 확인

http://localhost/sample/test.jsp 를 방문하여 올바르게 수행되었는 지 확인합니다.

 

10. mysql 설치
여기까지는 스크린 샷을 찍었지만 이전 블로그에서 찍어 뒀던 스샷 파일을 분실해서 이다음 부터는 글로 대신 하겠습니다. ㅠㅠ

 

q myssql은 설치버전과 압축버전이 있는데 mysql-5.0.18-win32.zip압축을 풀고 MySQL 디렉토리에서 my.ini 파일을 다음과 같이 수정합니다.
 
    default-character-set 을 찾아
    default-character-set=euckr 로 수정합니다.(2군데 있습니다)
 
q 윈도우즈의 내컴퓨터 속성 -> 고급 -> 환경변수 -> 시스템 변수 -> Path 값 수정
    Path에 MySQL 설치 디렉토리 Path가 있는지 확인하고 없을경우

    ";C:\MySQL Server 5.0\bin" 과 같이 MySQL 의 bin 디렉토리를 추가합니다.

 

11. mysql jdbc driver 설치

q mysql-connector-java-5.0.0-beta.zip을 압축 해제후 c:\tomcat\common\lib\에 jar 파일 복사하거나 C:\Program Files\Java\jdk1.5.0_06\jre\lib\ext\mysql-connector-java-5.0.0-beta-bin.jar에 복사하고 환경 변수에 CLASSPATH라는 변수 이름으로 C:\Program Files\Java\jdk1.5.0_06\jre\lib\ext\mysql-connector-java-5.0.0-beta-bin.jar 변수값을 새로 등록해 줘도 됩니다..


12. 간단한 테스트
mysqljdbc.jsp 파일생성(c:\tomcat\webapps\ROOT)

<%@ page import="java.sql.*" %>

<%
String DB_URL = "jdbc:mysql://localhost:3306/test";
String DB_USER = "";                  DB접근 아이디 기본 root
String DB_PASSWORD= "";          DB접근 패스워드

Connection conn;
Statement stmt;

String query = "create table createTest(name varchar(10), tel varchar(15))";

// try {
Class.forName("org.gjt.mm.mysql.Driver");

conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);

conn.setAutoCommit(false);
stmt = conn.createStatement();

stmt.executeUpdate(query);

conn.commit();

out.println("table created!!");

stmt.close();

conn.close();

// } catch(Exception e){out.println(e.getMessage());}
%>

이 파일을 엑세스 했을때 성공적으로 출력되고 db에 새로운 db가 생기면 연동 성공!

 

12. php 설치
php-5.1.1-Win32.zip의 압축을 푼후, 풀린 파일 자체를 C:\ 하위에 넣어주면 됩니다.

 

php가 깔린 폴더에서 php.ini-dist 파일을 php.ini 로 변경 후 아래 두내용을 이렇게 수정

register_globals = On                      전역변수의 사용 html 에서 form 태그사용시 post 값이 넘어가게끔 해줌

extension_dir = "C:\php5\ext"       extension 파일의 경로 설정

 

필요한 extension 파일들을 사용가능하게끔 주석을 풀어줍니다.
extension=php_gd2.dll
extension=php_mbstring.dll
extension=php_mysql.dll          php 에서 mysql 을 사용하기 위한 dll 파일
extension=php_mysqli.dll         php 에서 mysql 을 사용하기 위한 dll 파일
extension=php_pdo_mysql.dll   php 에서 mysql 을 사용하기 위한 dll 파일
extension=php_sockets.dll

q php.ini 파일을 winodws 폴더 안에 집어 넣고, php5ts.dll 파일을 windows\system32 폴더 안에 집어 넣습니다


q 연동을 위한 설정들...
아파치에 php 등록을 위한 설정들을 추가해준다. conf 이하 httpd.conf 파일 맨 밑에 다음 내용들 추가 합니다

LoadModule php5_module "C:\php5\php5apache2_2.dll"   php 가 깔린 폴더의 경로 php5apache2_2.dll

ScriptAlias /php/ "C:\php5"                                            php 가 깔린 폴더의 경로를 지정해주면 됩니다
AddType application/x-httpd-php .php .php3 .html .htm       
Action application/x-httpd-php "/php/php-cgi.exe"
SetEnv PHPRC C:\php5

※ 자동 설치로 설치시에는 자동으로 설정됩니다.

 

12. 설치확인

root에 다음과 같이 작성하고 phpinfo.php로 저장 합니다.

<?php
phpinfo();
?>
위 파일을 phpinfo 항목중 mysql 이 있는지 꼭 확인해야 합니다. 없을경우 php.ini경로나 설정등을 다시 확인 해봅니다.

2008년 12월 9일 화요일

[Motion Graphic] 청운대학교 창의성 개발 Intro

교수님 부탁으로 공부삼아 만들어 드린 인트로 입니다.

아야토웹에 있는 예제들을 응용해서 만들었는데요. 일본인이 만든 사이트라 일본어로 되있지만 과정 과정과 설정값 들이 스크린 샷으로 자세히 나와있어 따라하기 어렵진 않습니다. 이펙트에 관심이 많으신 분들은 가보시면 좋을것 같습니다.

 

사용툴 : After Effects 6.5 + α(plug-in), Photoshop cs2

[Motion Graphic] Zippo광고

zippo에 다섯가지 특징을 카메라의 무빙과 3D레이어를 활용하여 만든 광고 입니다.

사용 툴 : After Effects 6.5, Photoshop cs2, 니콘 쿨픽스 ㅋㅋ

2008년 12월 8일 월요일

[javascript] 드래거블 박스 - dragable box

이번엔 dhtmlgoodies.comDragable RSS boxes입니다. 그동안 포스팅 했던 소스들이 그러하듯 이것 역시 제가 초기에 공부하면서 다른 사람이 만든 소스를 분석한 결과물 입니다. 처음엔 스크립트 언어이건 객체지향 언어이건 간에 개념 잡기가 너무 힘들어서 절망에만 하던 차에 생각해 낸것이 '다른 사람 이만들어놓은 소스에서 모르는건 무조건 주석을 달자!' 였습니다. 그러다 보니까 한줄에 하나씩 주석이 달리더군요 ... ^^;;; 이번것은 제가 첫 프로젝트를 진행하면서 사용한거라 원본과 좀 많이 달라지고 추가된것도 많은데요. 기본적인 구조는 같습니다. 그리고 필요없는 부분은 뺏는데 다 제거하지 못하고 그대로 남아있는것이 아직 많습니다.(파라메터나 함수) 원래 원본에 주석을 다시 달아서 올려놓으려고 했으나 너무 귀찮아져서 포기... 자바스크립트를 처음 시작하는 분들이 보시면 워낙 소스가 엉망이라 못알아 보실지도 모르겠는데요... 드래거블 박스의 구조를 알고 싶으신 분들에게는 도움이 될지도 모르겠습니다.

 

club_main.css : 디자인 요소는 거의 스타일 시트에 모아놨습니다.

dragable-boxes.js : 드래거블에 필요한 함수 들

index.html : 기본 컬럼 구조를 가지고 있는 html

prototype.js : prototype 라이브러리

ajax.js : ajax 라이브러리

 

작동 화면 펼치기..