웹 개발해서 배포하기

1. 구조 설정

3 티어 구조

가상환경 프로그램인 vmware에 게스트 pc를 4개를 설치해서 각각 웹서버, WAS, DB서버, 외부 스토리지처럼 동작하도록 구현하기로 했다.

2. 프론트엔드 구현

<실제 구현한 웹 모습>

웹 디자인은 넷플릭스의 디자인을 클론하였다. 하지만 내가 원하는건 유튜브처럼 동영상을 올리고 볼 수 있는 OTT 서비스를 만드는 것이기 때문에 업로드 기능을 추가하였다.

 

React를 이용해서 구현했다.

 

3. WAS 서버 구현

vmware에 만든 게스트 pc에 톰캣을 설치해서 구현했다. 이클립스와 톰캣을 연동해서 이클립스로 서블릿을 작성해서 웹서버로부터 들어온 요청에 응답하고, DB로 쿼리를 보낼 수 있게 만들었다. 그리고 외부 스토리지는 WAS와 NAS를 통해 연결하였다.

 

a. WAS에서 DB서버로 쿼리 보내기

DB로 쿼리를 보내기 위해서는 JDBC(Java Database Connectivity) 라는 것이 필요했다. JDBC는 자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API이다.

mysql-connector.jar 파일을 톰캣 폴더 밑에 WEB-INF/lilb 폴더에 넣어주면 이클립스가 자동으로 라이브러리를 추가해주었다.

// Connect to the MySQL database
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://DB서버IP:3306/DB이름?useUnicode=true&characterEncoding=UTF-8";
String username = "사용자";
String password = "비밀번호";
Connection conn = DriverManager.getConnection(url, username, password);

그 후에 연결을 해주니 잘 연결이 되었다. 물론, 해당 DB서버에 mysql를 설치하고 해당 사용자에게 해당 데이터베이스에 접근할 수 있도록 권한을 부여하고 방화벽 설정도 해주어야 한다.

 

WAS에서 응답을 보낼 때 어떤 타입으로 응답할 것인지를 선언해주어야 웹서버가 제대로 받을 수 있다.

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

위에서는 DB로 쿼리를 보내 받은 데이터를 json 객체에 담아서 응답하고 있기 때문에 이런 식으로 설정을 해주었다.

 

b. WAS 서버와  외부 스토리지 NAS로 연결하기

i. 공유하고 싶은 폴더를 생성한 후 파일 권한과 소유을 적절히 설정.

ii. /etc/exports 파일에 공유할 폴더와 WAS서버의 IP를 설정.

NFS 서버 공유 옵

iii. 외부 스토리지 서버에서 NFS 서비스 실행.

추가로 클라이언트에서 외부 스토리지의 공유 디렉터리에 접근할 수 있는 목록을 확인할 수 있도록 설정하려면 방화벽 규칙에 rpc-bind와 mountd 서비스를 추가.

iv. 외부 스토리지에서 폴더를 공유할 준비는 완료됐으니, WAS에서 공유할 폴더를 마운트해주어야 한다. 마운트는 매번 부팅할 때마다 설정하기 힘드니 자동 마운트가 되도록 설정 (마운트 설정 파일을 수정해서 하는 방법도 있지만 NFS 서버에 변경이 생겼을 경우 부팅 오류가 생길 수 있으므로 autofs 서비스를 활용)

설치 후 /etc/auto.master.d 폴더 밑에 autofs 설정 파일을 생성한다. 이 때 확장자는 반드시 '.autofs'로 지정해야 함.

라고 내용을 추가한 후 /etc/auto.direct 파일을 만들어서 안에 마운트 포인트와 etc/exports에 대한 내용을 적어주어야 한다.

// cat /etc/auto.direct

/mnt/direct     rw,sync,no_root_squash,sec=sys    192.168.111.0:/exports

WAS에 mkdir /mnt/direct 로 위에 설정한 마운트 포인트를 만들어주고 해당 공유폴더 쪽으로 접근하면 그 때 자동으로 마운트가 되면서 폴더가 생긴다.

4. 아파치에 배포

react로 생성한 프로젝트에서 npm run build 명령어를 실행하면 프로젝트 root 경로에 build 라는 폴더가 생성된다.

build 폴더 내부 파일들을 아파치가 설치되어 있는 웹서버(방화벽 설정 및 서비스 실행)에 /var/www/html 밑에 index.html이 있는 경로 쪽에 넣어준다. 그러고 해당 웹서버 ip 쪽으로 접속을 하면...! 메인 페이지 이외에서 새로고침을 하면 404 에러가 발생한다...

원인) react는 client-side에서 랜더링을 하고 apache는 server-side에서 랜더링을 하는 방식이다

• react는 로드하는 데 필요한 스크립트 태그가 포함된 html 페이지가 반환된 후, 필요한 스크립트 파일을 클라이언트 측에서 로드한다. 하지만 apache는 서버에서 랜더링을 하고 클라이언트 쪽으로 페이지를 반환해준다. 나의 경우에는 apache 서버 쪽에 있지도 않은 http://web.server/search를 계속 요청했기 때문에 404에러가 발생한 것이다.

해결방안

서버에 들어오는 요청을 재작성하여 index.html로 바꾸는 것이다.

1. /etc/httpd/conf/httpd.conf 파일에

<Directory "/var/www/html">
    	Options -MultiViews
    	RewriteEngine On
    	RewriteCond %{REQUEST_FILENAME} !-f
    	RewriteRule ^ index.html [QSA,L]

    	Require all granted
</Directory>

이런 식으로 설정을 한다.

1. /etc/httpd/conf/httpd.conf 파일에

<IfModule>
	LoadModule rewrite_module modules/mod_rewrite.so
</IfModule>

을 추가한다.

원인을 찾기 위해서 디버깅을 하면서 코드의 가독성에 대한 중요성을 느꼈다.

MVC 모델을 참조해서 리팩토링을 해볼 생각이다.