[HTML] HTML - JSP 연결

cowmin·2025년 6월 20일

1. 개요

1.1 실습 목적 및 개요

본 실습은 정적 웹 서버(Web Server)와 동적 애플리케이션 서버(WAS)를 분리 구성하고, Nginx를 활용한 Reverse Proxy 설정을 통해 두 서버 간의 요청을 연동하는 과정을 실습하는 데 목적이 있다.

사용자는 Web 서버에 위치한 form.html을 통해 데이터를 입력하고, 해당 데이터는 /api/data.jsp 경로를 통해 내부 WAS 서버로 전달되어 JSP 파일에서 처리된다. 이 과정을 통해 클라이언트 요청이 Nginx를 거쳐 WAS로 안전하게 전달되고 응답이 반환되는 전체 흐름을 확인할 수 있다.

1.2 작업 환경

Web: Ubuntu 22.04, Nginx 1.18.0
WAS: Ubuntu 22.04, Tomcat 10, OpenJDK 17
프록시 구성: Nginx → Tomcat
네트워크: NAT (VMware), 내부 IP: 192.168.32.xxx

1.3 서버 환경 및 구성

서버	OS	호스트네임	서비스	IP 주소
WEB	Ubuntu 22.04	web	Nginx 1.18.0	192.168.32.170
WAS	Ubuntu 22.04	was	Tomcat 10.1.42, OpenJDK 17	192.168.32.180

2. WEB Server

2.1 Nginx 설치 및 설정파일 수정

/etc/nginx/sites-enabled/default

server {
        listen 443 ssl;

        server_name www.cowmin.kro.kr;

        root /var/www/html;
        index index.html index.htm;

        ssl_certificate /etc/nginx/ssl/fullchain.pem;
        ssl_certificate_key /etc/nginx/ssl/private.key;

        location / {
        try_files $uri $uri/ /index.php?$args;
        }

		# /api로 시작하는 요청은 리버스 프록시로 192.168.32.180:8080에 전달
        location /api {
        rewrite ^/api(/.*)$ $1 break;
        proxy_pass http://192.168.32.180:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        }
}

2.2 form.html 파일 생성

form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method = "post" action="/api/data.jsp">
        이메일: <input type="text" name="abc"> <br>
        비밀번호: <input type="password" name="def"> <br>
        <button>전송하기버튼</button>
</body>
</html>

<form> : 폼 태그. 사용자 입력을 서버로 전송하기 위한 영역을 정의함
method="post" : 폼 데이터를 HTTP POST 방식으로 전송함 (URL에 노출되지 않고, 본문으로 전달됨)
action="/api/data.jsp" : 사용자의 입력값을 전송할 서버 경로

3. WAS

3.1 OpenJDK, Tomcat 설치

3.2 data.jsp 파일 생성

/usr/local/tomcat10/webapps/ROOT/data.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String var01 = request.getParameter("abc");
    String var02 = request.getParameter("def");

    out.println(var01);
    out.println(var02);
%>