------------------------------------------------------------- # 3장: 개발 환경 구축 및 웹 서버 십습 요구사항 ## 3-0. 서론 - 3장의 전반적인 구성 내용 1. 질문/답변 게시판에 대한 서비스 요구사항과 실습 요구사항 제시
2. Web Client와 서버간의 데이터 통신을 위한 HTTP Web Application Server 구축
3. Local에서 Web Application 개발
4. 버전 관리 시스템에서 소스 코드 관리
5. 개발한 Application을 원격 서버에 배포

## 3-1. 서비스 요구 사항 - 질문/답변 게시판의 요구사항을 사용자의 흐름 순으로 살펴보자 1. 질문/답변 게시판
1. Header에서 회원가입, 로그인, 로그아웃, 개인정보 수정이 가능
2. 회원가입 클릭 시 회원 가입 페이지로 이동
3. 로그인 버튼을 누르면 로그인 페이지로 이동 및 로그인 가능
4. 질문 목록 화면에서 질문 클릭 시 각 질문의 상세보기 화면으로 이동
1. 답변 추가 및 수정/삭제 가능

## 3-2. 로컬 개발 환경 구축 - 기본적으로 Java 8 Version과 이클립스를 이용하여 구성된다. (물론 변경도 가능) - 이클립스의 Git Perspective를 이용한 방법 1. https://github.com/slipp/web-application-server 에서 Project를 자신의 Repository에 Fork한다.
2. 이클립스의 Git Perspective에서 Fork한 Repository를 Git clone 한다. 3. clone한 프로젝트를 로컬 폴더에 Import한다.

4. Import한 프로젝트에서 **WebServer.java**를 Java Application으로 실행한다.
5. “Hello world”가 잘 출력되는지 확인
- 터미널에서 Git Clone한 후 Import 하는 방법 - [https://www.youtube.com/watch?v=5hjYe_PggJI](https://www.youtube.com/watch?v=5hjYe_PggJI) ## 3-3. 원격 서버에 배포 - 참고 유튜브 영상 1. 한글 인코딩 설정, 자바 8 설치 및 설정, Maven 설치 및 과정 1. [https://www.youtube.com/watch?v=dWGzApCuF9M](https://www.youtube.com/watch?v=dWGzApCuF9M) 2. Git 설치, Github 저장소 Clone, 메이븐을 활용한 빌드, HTTP 웹 서버 시작, 소스 코드 수정 시 재배포 과정 1. [https://www.youtube.com/watch?v=N8iLAuAo-Qw](https://www.youtube.com/watch?v=N8iLAuAo-Qw) ### 3-3-0. AWS EC2 설정 - EC2 - EC2는 AWS에서 제공하는 **클라우드 컴퓨팅 서비스**로 아마존이 각 세계에 구축한 데이터 센터의 서버용 컴퓨터들의 자원을 원격으로 사용할 수 있는 서비스이다. (즉 한 대의 컴퓨터를 임대 하는 것!!) - EC2 설정 1. 아마존 웹 서비스(AWS)에 접속하여 로그인을 하면 다음과 같은 화면을 볼 수 있는데 여기서 EC2를 선택하여 “인스턴스 시작”을 클릭 한다.   2. 인스턴스 시작을 누르면 Amazon Machine Image(AMI) 및 인스턴스 유형을 선택할 수 있는 페이지로 넘어간다. 이 부분에서 프리 티어의 Ubuntu 22.04 LTS 버전을 선택한다. 프리 티어를 사용한다면 인스턴스의 유형은 **t2.mircro**로 고정이다.



3. 키 페어는 EC2 서버에 SSH 접속을 위해 필수적인 부분이다. **새 키페어 생성**”을 통해 키 페어를 생성 하면 `[key이름].pem` 파일이 다운로드 되는데 이 파일의 위치에 가서 ssh 명령을 수행하면 된다. 단!! 한 번 다운받은 후에는 재 다운로드가 불가능하기 때문에 백업이 필요하다.

4. 네트워크는 보안 그룹을 따로 생성하도록 하였으며 SSH 트래픽의 경우 **위치 무관**으로 열어놓았다. 보안 상 특정 ip에서 접속하도록 설정 해야 하지만 현재는 스터디를 위한 것이므로 어느 IP에서도 접속이 가능하도록 하였다. 스토리지 구성의 경우 프리 티어는 최대 30GB 범용 SSD를 사용할 수 있어서 29GB를 할당하였다.
5. 설정이 끝난 후 인스턴스 시작을 누르면 인스턴스 생성 완료 메시지가 나오며, 인스턴스 홈으로 가 보면 생성한 인스턴스를 볼 수 있다.

6. AWS EC2 인스턴스는 서버를 중지하고 다시 실행하면 Public IP가 변경되기 때문에 Reboot을 해도 사용할 수 있는 IP가 필요하다. 탄력적 IP는 만들어놓고 사용하지 않더라도 과금이 되기 때문에 필요한 만큼만 생성하자! 메뉴의 “탄력적 IP”를 클릭하여 “탄력적 IP 주소 할당”을 선택한다.
7. 기본 Default로 할당을 해주면 된다.

8. 그 후 생성한 탄력적 IP와 생성한 EC2 인스턴스를 연결하면 인스턴스의 IP가 탄력적 IP로 고정 됨을 알 수 있다.

9. 이제 인스턴스를 연결해보자. 선택한 인스턴스에서 오른쪽 마우스 클릭 시 인스턴스 연결 정보를 알려주긴 하지만 매번 이런식으로 연결하면 매우 불편하다. 이때 **호스트를 등록하는 방법**을 사용하면 간단하게 접속할 수 있다.

- 우선 키 파일이 있는 폴더에 가서 터미널 실행 후 키 파일이 권한을 변경한다.
```bash $ chmod 400 "본인의 키 파일 이름".pem ``` - 그 후 키 페어 파일을 `~/.ssh/`로 복사하고(백업) 복사한 키 파일 권한을 변경한다.
```bash $ cp "본인의 키 파일 이름".pem ~/.ssh/ $ cd ~/.ssh $ chmod 600 "본인의 키 파일 이름".pem ``` - 그 후 `~/.ssh/` 디렉터리에 `config` 파일을 생성해서 다음의 코드를 입력한다. 작성자는 이미 만들어놓은 설정 정보가 존재하여 밑에 추가를 해주었다.
``` $ vi ~/.ssh/config # 아래는 파일 내용 # ssh -i {키 페어 파일} {유저 이름}@{탄력적 IP} Host {원하는 호스트 이름} User {유저 이름} HostName {탄력적 IP} IdentityFile {키 페어 파일 위치} ``` - 이제 키 페어 파일이 없는 곳에서도 SSH 접속이 가능하다. ```bash $ ssh "설정한 호스트이름" ``` 10. 마지막으로 보안그룹을 설정해주자. 우선 AWS에서 쓸 수 있는 보안 그룹은 두 가지 종류가 있다. - 인바운드 (Inbound): 외부 -> EC2 인스턴스 내부 허용 - 아웃바운드 (Outbound): EC2 인스턴스 내부 -> 외부 허용 보안 그룹은 **인스턴스의 보안 Tab**에서 볼 수 있다. - 인바운드 규칙에서는 외부에서 EC2로 요청할 때 허용할 IP 대역을 설정할 수 있다. EC2를 생성할 때 보안 그룹이 Default로 만들어졌지만, 새로 생성한 규칙을 통해 적용할 것이다. 유형을 먼저 선택하면 그에 맞게 프로토콜과 포트의 범위가 고정되며, 특정 IP나 대역을 넣으려면 “사용자 지정”으로 추가할 수 있다. 우선 가장 많이 사용하는 “SSH”, “HTTP”, “HTTPS”를 추가한다. **0.0.0.0/0**은 모든 IP의 접속을 허용한다는 얘기이다.
 - 규칙을 다 설정하고 저장했다면 인스턴스로 와서 생성한 보안그룹으로 변경하면 정상적으로 적용된다.
 ### 3-3-1. 계정 추가 및 sudo 권한 할당 - AWS EC2로 실습을 진행할 경우 다음 단계부터 진행하면 된다. - [AWS EC2가 아닌 다른 ubuntu 서버를 이용할 경우](https://kyungsnim.net/176) ### 3-3-2. 각 계정별 UTF-8 인코딩을 설정하여 한글 이슈 해결 - 다음 명령을 실행하여 시스템 전체 계정에서 한글과 관련한 인코딩을 사용할 수 있도록 설정한다. ```bash sudo locale-gen ko_KR.EUC-KR ko_KR.UTF-8 sudo dpkg-reconfigure locales ``` - 각 계정의 디렉토리의 .bash_profile에 다음과 같은 설정을 추가한다. - 만약 .bash_profile 파일이 없다면 vi 명령을 통해 만들어준다. ```bash (만약 .bash_profile 파일이 없다면) vi .bash_profile (.bash_profile 파일) LANG="ko_KR.UTF-8" LANGUAGE="ko_KR:ko:en_US:en" (저장 후 서버를 재시작해야 반영하지만 source 명령을 이용하여 Reboot 없이 바로 서버에 반영할 수 있다.) source .bash_profile (env 명령을 통해 반영 결과를 확인할 수 있다.) (env: 현재 지정되어 있는 환경 변수들을 출력하거나, 새로운 환경 변수를 설정하고 적용된 내용을 출력하는 명령어) env ```

### 3-3-3. JDK, Maven 설치 - JDK 8 설치 ```xml wget --no-cookies --no-check-certificate --header "Cookie: oraclelicense=accept-securebackup-cookie" https://javadl.oracle.com/webapps/download/GetFile/1.8.0_301-b09/d3c52aa6bfa54d3ca74e617f18309292/linux-i586/jdk-8u301-linux-x64.tar.gz ``` - EC2 인스턴스에서 wget 명령을 통해 ubuntu 버전 jdk를 다운로드 받고 압축을 풀어준다. ```bash wget [다운로드 주소] tar -xvf [압축을 해제할 파일 이름] ``` - 계정 Home 디렉 토리의 .bash_profile 파일에 JAVA_HOME/bin 디렉토리를 PATH로 등록한다. ```bash (심볼릭 링크를 연결) ln -s [자바 디렉토리 이름]/ java vi .bash_profile (.bahs_profile 안에서) export JAVA_HOME=~/java export PATH=$PATH:$JAVA_HOME/bin ``` - PATH 설정을 완료 후 java -version 명령을 실행해 설치한 자바 버전을 확인한다. ```bash java -version ``` - Maven 설치 - [https://maven.apache.org/](https://maven.apache.org/) - 위 링크에서 maven을 다운로드 한다. (tar.gz 파일) - 압축을 해제하면 설치가 완료된다. ```bash wget [다운로드 주소] tar -xvf [압축을 해제할 파일 이름] ``` - .bash_profile에 MAVEN_HOME/bin 디렉토리를 PATH로 설정한다. ```bash (심볼릭 링크를 연결) ln -s [메이븐 디렉토리 이름]/ maven vi .bash_profile (.bahs_profile 안에서) export JAVA_HOME=~/maven export PATH=$PATH:$JAVA_HOME/bin:$MAVEN_HOME/bin ``` - PATH 설정 완료 후 mvn -version 명령을 통해 설치한 Maven 버전을 확인한다. ```bash mvn -version ``` - 서버 실행 ```bash java -cp target/classes/:target/dependency/* webserver.WebServer 8080 // 백그라운드 실행 java -cp target/classes/:target/dependency/* webserver.WebServer 8080 & ``` ### 3-3-4. Git 설치. clone 및 빌드 - git 설치 ```bash sudo apt-get update sudo apt-get upgrade sudo apt-get install git ``` - git clone ```bash git clone [clone할 url] ``` ## 3-4. 웹 서버 실습 - 3장에서의 실습 요구 사항은 다음과 같은 구성으로 되어있다. - index.html 응답하기 - GET 방식으로 회원가입하기 - POST 방식으로 회원가입하기 - 302 status code 적용 - 로그인하기 - 로그인 여부에 따른 사용자 목록 출력 - CSS 지원하기 - 소스 코드 분석 1. WebServer.java 1. 웹 서버를 시작하고, 사용자의 요청이 있을 때까지 대기 상태에 있다가 사용자 요청이 있을 경우 사용자의 요청을 RequestHandler 클래스에 위임 2. RequestHandler.java 1. 사용자의 요청에 대한 처리와 응답에 대한 처리를 담당하는 클래스 ### 3-4-1. 요구사항 (1) - index.html 응답하기 - WebServer.java를 실행하고 브라우저에서 [localhost:8080/index.html](http://localhost:8080/index.html을) 로 접속해보자 - 접속하고 개발자 도구 → Network → localhost의 Header를 보면 다음과 같은 Request Header 메시지를 볼 수 있다.
- 이 요청 값은 InputStream을 통해 들어오고 이를 BufferdReader를 통해 값을 출력할 수 있다. ```java // 요청 라인 추출하기 -> HTTP Header : GET /index.html HTTP 1.1 BufferedReader br = new BufferedReader(new InputStreamReader(in, "UTF-8")); String headerMessage = br.readLine(); log.debug("HTTP Request Header : {}", headerMessage); // 전체 값 추출하기 if (headerMessage == null) return; while (!headerMessage.equals("")) { headerMessage = br.readLine(); log.debug(" : {}", headerMessage); } ``` - 요청 라인 값에서 /index.html을 추출하기 위해서 공백을 구분자로 split 함수를 이용한다 ```java String tokens[] = headerMessage.split(" "); ``` - 추출한 /index.html을 이용하여 웹 서버에 요청을 보내면 index.html의 내용을 응답받을 수 있다. ```java byte[] body = Files.readAllBytes(new File("./webapp" + tokens[1]).toPath()); DataOutputStream dos = new DataOutputStream(out); response200Header(dos, body.length); responseBody(dos, body); ``` ### 3-4-2. 요구사항 (2) - GET 방식으로 회원 가입하기 - 지금 상태에서 웹 서버를 띄운 상태에서 회원 가입을 누르면 아래와 같은 HTTP Header 요청을 볼 수 있다.

- 이 요청에서 알 수 있는건 **GET 방식으로 요청이 온다는 점**과 경로가 **/user/create?** 로 시작한다는 점이다. - 이 URL 정보를 통해 우리는 회원가입을 진행할 수 있는 힌트를 얻을 수 있다. ```java // 요구사항 2. GET 방식으로 회원 가입하기 // http header 요청 메세지 String url = tokens[1]; // startWith([String]) -> String 문자열로 시작하면 True를, 아니라면 false를 반환하는 함수 if (url.startsWith("/user/create")) { // url에서 ?의 위치를 반환 int index = url.indexOf("?"); String queryString = url.substring(index + 1); // parseQueryString() // &를 기준으로 나누며, =를 기준으로 key : value로 나누어 Map에 저장한다. Map params = HttpRequestUtils.parseQueryString(queryString); User user = new User(params.get("userId"), params.get("password"), params.get("name"), params.get("email")); log.debug("User : {}", user); ``` - 이 실습까지는 회원가입 처리 후 응답 메세지를 보내지 않았기 때문에 브라우저는 “응답 없음”을 띄울 것이다.
- GET 방식은 사용자가 입력한 데이터가 URL에 표시 되기 때문에 보안적인 측면에서 취약하다. - 또 브라우저의 정책마다 다르지만 크롬 브라우저의 경우 2MB의 길이로 제한(주소창 표시는 32KB)을 둔다고 한다.
<출처 : [Chromium Docs](https://chromium.googlesource.com/chromium/src/+/main/docs/security/url_display_guidelines/url_display_guidelines.md#URL-Length) > ### 3-4-3. 요구사항 (3) - POST 방식으로 회원 가입하기 - GET 방식을 POST 방식으로 변경하기 위해 form.html의 form 태그 method 속성을 get에서 post로 수정한다. ```html