웹 서버, 웹 어플리케이션 서버(WAS), DB 서버 연동 실습

2024. 11. 25. 18:16· CS
목차
  1. DB 서버
  2. WAS 서버
  3. 다시 DB 서버
  4. 웹 서버
728x90

 

더보기

현재 내 IP 주소 설정 상태

 

웹 서버 : 10.10.10.10

WAS 서버 : 10.10.10.40

DB 서버 : 10.10.10.30

 

MariaDB

DB 이름 : 3tier

유저 이름 : psy

비밀번호 : qwer1234


DB 서버

MariaDB 설치

1. 관리자 로그인
sudo su - root

 

2. IP 설정 및 적용
vi /etc/netplan/00-installer-config.yaml

 

3. 레포지토리 목록 갱신
apt update

 

4. MariaDB 설치
apt install -y mariadb-server

 

5. MariaDB 설정
vi /etc/mysql/mariadb.conf.d/50-server.cnf

 

27번 라인에 있는 바인드 주소 설정을 다음처럼 변경

bind-address = 0.0.0.0

💡 바인드 주소(bind address)?
웹 서버 바인드 주소 : 0.0.0.0:80 일 때
=> 웹 서버 컴퓨터에서 실행 중인 웹 서버 프로그램(80)을 찾아가려고 할 때, 0.0.0.0이랑 같은 주소로 내 컴퓨터에 찾아온 컴퓨터들만 연결해주겠다.

여기서 0 = * 를 뜻한다. 즉, 어떤 주소로 와도 80번 포트로 연결해주겠다.
=> 이런 걸 바인드 주소라고 함

서버 컴퓨터를 찾아올 때 바인드 주소에 해당하는 주소를 찾아오지 않으면 포트로 연결 못 한다.

DB 서버 바인드 주소 : 127.0.0.1:3306 일 때
=> DB 서버 컴퓨터에서 실행 중인 DB 서버 프로그램(3306)을 찾아가려고 할 때, 127.0.0.1로 내 컴퓨터를 찾아온 컴퓨터들만 연결해주겠다..

여기서 127.0.0.1 = localhost = 내 컴퓨터 자체를 뜻하는 주소

 

6. MariaDB 실행 및 확인

systemctl restart mariadb
systemctl status mariadb
apt install -y net-tools
netstat -anlp | grep :3306

systemctl status mariadb
netstat -anlp ❘ grep :3306

 

 

프로그램 실행

1. MariaDB 클라이언트 프로그램 실행
mariadb

 

 

 

2. DB 생성
CREATE DATABASE [DB 이름]

'3tier' 이름으로 생성 후 DB 확인

3tier 있는 걸 확인

 

3. 사용자 생성 및 권한 설정

CREATE USER '[유저 이름]'@'%' IDENTIFIED BY '[비밀번호]'; # 이걸로 계정 생성
SELECT user, host FROM mysql.user; # 이걸로 생성된거 확인
GRANT ALL PRIVILEGES ON [DB 이름].* TO '[유저 이름]'@'%'; # 이걸로 계정에 권한 부여
FLUSH PRIVILEGES; # 권한 적용

WAS 서버

1. 관리자 로그인
sudo su - root

 

2. IP 설정 및 적용

3. 레포지토리 목록 갱신

 

4. 자바 설치 및 확인
apt install -y openjdk-17-jdk
java --version

17버전 사용

 

5. 백엔드 서버 파일 다운 (강사님 제공 - 스프링)
wget [백엔드 파일 링크] => jar 파일 다운로드

 

6. 환경변수 설정

export DB_URL=jdbc:mariadb://[DB 서버 IP 주소]:3306/[DB 이름]
export DB_USERNAME=[유저 이름]
export DB_PASSWORD=[비밀번호]

 

환경변수 설정

 

export 명령어로 잘 설정됐나 확인

 

 

7. 백엔드 서버 실행
java -jar was-0.0.1-SNAPSHOT.jar
jar 파일 실행

실행 중


다시 DB 서버

1. 데이터 추가

mariadb
USE [DB 이름];
INSERT INTO [DB 이름].[테이블 이름] VALUES [값];

 

 

http://[WAS 서버 IP 주소]:8080/student/list 에 가보면 데이터가 나옴

짜잔

 


웹 서버

1. nginx 설정 추가
vi /etc/nginx/sites-enabled/default

 

server {~~} 위쪽에 다음 내용(백엔드 서버 IP 주소) 추가

upstream backend-servers {
server 10.10.10.40:8080;
server 10.10.10.60:8080;
}

server 주소들 설정

 

location / {~~} 아래 쪽에 다음 내용 추가

location /api/ {
rewrite ^/api(/.*)$ $1 break; # /api 제거
proxy_pass http://backend_servers; # 백엔드 서버 주소와 포트
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

api 설정

 

 

2. nginx 설정 적용 및 실행 확인

systemctl restart nginx
systemctl status nginx
apt install -y net-tools
netstat -anlp | grep :80

systemctl status nginx

 

3. html 파일 생성

vi /var/www/html/list.html

 

새로운 파일에 다음 내용 작성

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch Student List</title>
</head>
<body>
<button id="fetchButton">학생 리스트 가져오기</button>
<ul id="studentList"></ul>
<script>
document.getElementById('fetchButton').addEventListener('click', async () => {
try {
const response = await fetch('/api/student/list', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); // 서버로부터 받은 데이터
displayStudentList(data); // 데이터를 화면에 표시
} catch (error) {
console.error('Error fetching student list:', error);
}
});
function displayStudentList(studentList) {
const listElement = document.getElementById('studentList');
listElement.innerHTML = '';
studentList.forEach(student => {
const listItem = document.createElement('li');
listItem.textContent = `학생 번호: ${student.idx}, 학생 이름: ${student.name}, 학생 나이: ${student.age}`;
listElement.appendChild(listItem);
});
}
</script>
</body>
</html>

 

 

http://[웹 서버 IP 주소:80/list.html 에 가보면 나온다.

버튼 css 살짝 넣었습니다 ㅎㅎ

 

학생 리스트 가져오기 버튼을 누르면 학생 리스트가 뜬다 !! 

 

재밌었던 실습 ㅎ.ㅎ

728x90
저작자표시 비영리 변경금지 (새창열림)

'CS' 카테고리의 다른 글

[CS] 객체 지향 / 데이터 모델링  (0) 2024.11.26
형상관리  (0) 2024.11.25
시스템 아키텍처 / 부하 분산 실습 (HAProxy)  (0) 2024.11.22
[네트워크] HTTP 프로토콜 / 암호화, 복호화  (2) 2024.11.22
[네트워크] DNS 서버, 포트 포워딩, 웹 서버 nginx  (0) 2024.11.21
  1. DB 서버
  2. WAS 서버
  3. 다시 DB 서버
  4. 웹 서버
'CS' 카테고리의 다른 글
  • [CS] 객체 지향 / 데이터 모델링
  • 형상관리
  • 시스템 아키텍처 / 부하 분산 실습 (HAProxy)
  • [네트워크] HTTP 프로토콜 / 암호화, 복호화
셰욘
셰욘
셰욘
seiyeon
셰욘
전체
오늘
어제
  • 분류 전체보기 (176)
    • 알고리즘 (46)
      • 프로그래머스 (2)
      • 백준 (37)
      • 문제 유형 (7)
    • CS (41)
      • Linux (6)
      • DB (15)
      • 자료구조 (3)
      • OOP (2)
      • 아키텍처 (0)
    • BE (42)
      • Java (9)
      • Spring Boot (32)
    • FE (6)
      • Next.js (1)
      • JavaScript (5)
      • Vue.js (7)
      • Web (0)
    • 배포 (5)
    • 회고 (19)
      • BEYOND SW 캠프 (19)
    • 기타 (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • 블로그 관리

공지사항

인기 글

태그

  • bfs
  • AWS
  • 티스토리챌린지
  • 회고
  • 그리디
  • be
  • 트리
  • 리눅스
  • 백트래킹
  • 프로그래머스
  • fe
  • 주간회고
  • web
  • 자료구조
  • db
  • 실습
  • 구현
  • Gateway
  • dfs
  • spring boot
  • DP
  • Java
  • 오블완
  • 네트워크
  • 알고리즘
  • 우선순위 큐
  • cs
  • js
  • 백준
  • vue

최근 댓글

최근 글

250x250
hELLO · Designed By 정상우.v4.2.1
셰욘
웹 서버, 웹 어플리케이션 서버(WAS), DB 서버 연동 실습
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.