next step 웹 프로그래밍

3강 실습 - 1. 실습 코드 clone + aws에 배포 + index.html 응답까지 공부하면서 몰랐던 내용 정리(with. Mac)

archiveloper 2024. 5. 20. 22:07

1. 실습 코드 clone 

이건 어렵지 않았다. 

교재에 나와있는 사이트에 들어가서 fork 하면 끝 

2.  AWS EC2로 원격 서버에 배포(ubuntu 환경) 

더보기

AWS EC2 인스턴스 생성 후 단계를 작성했습니다. 만약 인스턴스 생성부터 보셔야 한다면 다른 블로그를 참고해 주세요! 

1.  인스턴스 생성하면서 저장한 pem 파일이 있는 디렉토리에서 터미널을 실행. 

2.  ssh로 aws원격 서버에 접속. 

더보기

명령어 : ssh -i {발급받은 pem 파일 경로} ubuntu@{접속 ip} 

ubuntu란에 root라 입력하면 터미널에서 친절하게 ubuntu계정으로 접속하라고 알려준다. 

3.  UTF-8 Encoding 설정 

  • sudo locale-gen ko_KR.EUC-KR ko_KR.UTF-8 
  • sudo dpkg-reconfigure locales 

4. .bash_profile 파일 생성 후 설정 추가 

5. jdk, maven, git 설치 

교재에서는 wget으로 알려줬는데 잘 안 돼서 apt-get으로 설치함. 

6.  git clone 후 빌드 & 실행 

  • public repository일 경우 → git clone {git 주소} 
  • private repository일 경우 → git clone git@github.com ~ #ssh로 clone 진행(이 과정은 추가 작업 필요) 
  • mvn clean package 
  • java -cp {실행할 JAR 파일 패키지 경로.파일} {PORT 번호} & 
  • 실행 종료 방법: ps -ef | grep {패키지명}로 PID 확인 → kill -9 {확인한 PID 번호} 

7. 외부에서 EC2에 접근할 수 있도록 설정 

설정 후 http://서버 IP:PORT로 접속 

3. index.html 응답 

ServerSocket 

서버 프로그램을 구현할 때 사용하는 객체 

  • ServerSocket이 IP 주소:port에 생성
  • ServerSocket은 사용자의 요청이 있을 때까지 대기하다, 요청이 발생하면 연결 
  • 클라이언트는 서버에게 InputStream을 통해서 요청 데이터를 전달함. 
  • 서버는 요청에 대한 응답 데이터를 OutputStream으로 전달함. 
  • 서버와 클라이언트의 연결을 해제 후 서버 종료 

 

Content-Type

서버의 클라이언트에게 보내는 자원 유형을 명시하기 위한 정보로, MIME 타입(Multipurpose Internet Mail Extensions) 형식으로 지정

유형 

  • text/html: HTML 문서임을 명시함. 
  • text/css: CSS 스타일시트임을 명시함. 
  • text/plain: 평문 텍스트임을 명시함. 
  • application/json: JSON 데이터임을 명시함. 
  • application/xml: XML 데이터임을 명시함. 
  • image/jpeg: JPEG 이미지임을 명시함. 
  • image/png: PNG 이미지임을 명시함. 
  • application/pdf: PDF 문서임을 명시함. 

 

1단계 - HTTP 요청 정보 전문 출력하기 

  • InputStream을 한 줄 단위로 읽기 위해서 BufferedReader 생성 후 readLine()으로 읽어 들임. 
private final BufferedReader br;

public RequestHandlerUtils(InputStream in) {
	br = new BufferedReader(new InputStreamReader(in));
}
  • 전달받은 BufferedReader 객체를 종료하면, 웹에 화면이 출력되지 않음 

 

2단계 - HTTP 요청 URL 추출 

21:47:50.105 [INFO ] [Thread-21] [webserver.RequestHandler] - path = /index.html
21:47:50.128 [INFO ] [Thread-22] [webserver.RequestHandler] - path = /css/bootstrap.min.css
21:47:50.130 [INFO ] [Thread-23] [webserver.RequestHandler] - path = /css/styles.css
21:47:50.130 [INFO ] [Thread-24] [webserver.RequestHandler] - path = /js/jquery-2.2.0.min.js
21:47:50.130 [INFO ] [Thread-25] [webserver.RequestHandler] - path = /js/bootstrap.min.js
21:47:50.131 [INFO ] [Thread-26] [webserver.RequestHandler] - path = /js/scripts.js
21:47:50.145 [INFO ] [Thread-27] [webserver.RequestHandler] - path = /fonts/glyphicons-halflings-regular.woff

http://localhost:8000/index.html을 입력했는 데 다른 요청이 같이 오는 이유 

index.html에 작성되어 있는, <link>, <script>, <img>을 확인하고 서버에 추가로 요청을 보냄. 

 

3단계 - 추출한 요청 URL에 맞는 응답 데이터 전송 

  • 각 요청 URL에 맞게 Content-Type을 설정해주어야 CSS까지 잘 표시되어 나옴 
private String setContentType(String path) {
	if(path.endsWith("css")) {
		return "text/css";
	} else {
		return "text/html";
	}
}
  • 요청에 대한 응답의 본문은 Byte[]로 전송해야 함. 
bytes = Files.readAllBytes(new File("./webapp" + path).toPath());

4. 공부하면서 생긴 의문점 

  • InputStream와 InputStreamReader의 역할은 무엇인가? 

 

혹시라도 잘못된 점이 있으면 알려주시면 감사하겠습니다! 

 

참고
박재성, 「자바 웹 프로그래밍 Next Step: 하나씩 벗겨가는 양파껍질 학습법, 로드북, 2016, 480p
[Web] 자바 웹 프로그래밍 Next Step 알게 된 사실들, “nextstep 웹 프로그래밍”, https://bryceyangs.github.io/various/2021/09/16/Book-%EC%9E%90%EB%B0%94-%EC%9B%B9-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-Next-Step/, 2024. 5. 20
300x250