Web server - apache vs NginX

배포를 공부하면서 지금에서야 반성하지만, 배포 과정을 많이 신경쓰지 못했다 ㅠㅠ

웹서버의 개념과 아파치 nginX에 대해서 그냥 듣고 흘려 버렸으니까...

 

실제로 서비스를 코드로 구현하고 가장 중요한 배포 부분에서 웹서버에 대해서 공부하며 정리해보고자 한다.

실제로 설치 후 운영하는 부분과 더 자세한 개념은 추가적으로 다뤄보았으니 해당 링크를 참고하면 된다!

(곧 첨부할 예정)

 

INTRO

web 이란?

즉 web = 인터넷이 아니라, 인터넷의 범위에 web은 한 종류 인 것이다. 

웹서버란?

 

웹서버란 두 가지 의미를 모두 지닌다. 그러나 우리가 사용할 웹서버의 개념은 소프트웨어 측면이 더 강하다.

 

1) 하드웨어 측면

web server는 website의 컴포넌트 파일들을 저장하는 컴퓨터이다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript files가 있을 것이다.) 그리고 이 파일들을 최종 소비자의 디바이스에 전달한다.

 

2) 소프트웨어 측면

web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리한다. 이 문서에서 web server는 HTTP서버로 국한한다. HTTP 서버는 URL(Web addresses)과 HTTP(당신의 브라우저가 웹 페이지를 보여주기 위해 사용하는 프로토콜)

 

브라우저가 웹 서버에서 불려진 파일을 필요로 할때, 브라우저는 HTTP를 통해 파일을 요청함
요청이 올바른 웹 서버(하드웨어)에 도달하였을 때,  HTTP 서버(software)는 요청된 문서를 HTTP를 이용해 보내줌

주된 기능은 콘텐츠를 제공하는 것이지만 클라이언트로부터 콘텐츠를 전달 받는 것도 웹 서버의 기능에 속한다.
이러한 기능은 파일 업로드를 포함하여 클라이언트에서 제출한 웹 폼을 수신하기 위해 사용된다.

 

웹서버의 종류

일반적으로 오픈소스로 제공되는 웹서버를 많이 사용하므로 대표적인 오픈소스 웹서버에 대해 알아보겠다.

 

1) 아파치(Apache)

세계에서 가장 많이 쓰는 웹 서버중 하나이다.  이 아파치는 Apache재단에서 만든 HTTP서버이며 이 서버가 굉장히 다양하고 기능적인 면에서 우수하다. 또 구축이 쉽다는 이유 때문에 많이 사용한다.

단, Apache자체만으로 엄청 무겁고 , Squid와 함께 Slowloris취약점이 발견되었기에 , 보통 프로그래밍 능력이 능숙한 사람들이나 ,

대형사이트 운영자는 Nginx , IIS를 주로 사용하기도 한다.

 

 

2) NginX 

가벼운 웹서버로써, 성능이 좋고 트래픽이 많은 웹사이트들을 처리하기 위해 만들어진 웹서버이다.

비동기식 이벤트 처리 중심의 아키텍쳐를 목표로 소개된 웹서버이다. 최근 들어 점점 프론트 엔드 서비스가 웹서비스 기반으로 크게 주목받기 시작하면서, 웹기반의 동시 처리가 매우 중요하게 되었다.

 

아파치와는 달리 동적 웹페이지 컨텐츠를 처리하지 않는다. 관련된 요청을 위해서는 외부 자원과 연계한다.

 

웹서버 설치 및 사용하기(basic)

• 실제 서비스단의 사용이 아닌, 기본적인 셋팅 단에서의 사용에 대해 정리해보고자한다.
• 실 서비스에서 웹서버 사용 및 설정은 더 복잡하여 따로 다뤄볼 예정이다.

일반적으로 소프트웨어적인 측면에서 웹서버를 많이 사용하므로, AWS,heroku 와 같은 클라우드 서비스 + 웹서버를 많이 사용한다.

생활 코딩의 EC2 + 웹서버 사용하기를 참고하였으므로, 여기서 설명하는 클라우드 서비스는 EC2이며 웹서버는 아파치이다.

 

 - AWS EC2의 인스턴스는 일종의 가상의 컴퓨터를 빌린 것이고, 우리는 여기에서 필요한 운영환경들을 설치해준 다음에, 웹서버를 설치하고 이 웹서버에서도 인스턴스에 접근할 수 있도록 설정해준다.

 - 즉, 브라우저 통신 -> 웹서버에서 처리 -> EC2 인스턴스 접근인것이다.

 

=> 여기서 내가 고민하던 문제가 어느정도 해결되었다. S3는 웹서버가 아니다. 파일서버이다

이것도 생활코딩의 S3 강의에서 참고!

 

 

웹서버 설치하기(Apache)

 

맥에는 기본적으로 아파치가 설치되어 있다. 하지만 후에 운영이 어떻게 될지 모르므로 설치하는 법 부터 살펴보고자 한다.

 

우선 구글에 bitnami mamp stack을 검색해보자. 해당 페이지에서 mamp를 설치할 수 있다. 

이 프로그램은 설치하기 까다로운 apache를 별도의 설정없이 mamp만 설치하면 apache도 별도의 설정없이 쉽게 설치된다. 

mamp는 일종의 매니지먼트 서비스이고, 이 곳에서 apache web server를 관리할 수 있다. 

(mamp를 설치하면 mysql도 같이 설치가 되고 관리할 수 있다.)

 

후에 실제로 이를 사용하려 할때, manager-osx를 탐색해서 사용하면 된다.

 

웹서버 설치하기(NginX)

 

공식사이트 참고

 

 

웹서버와 http

 

우선 mamp를 설치한 후, 같이 설치된 apache 폴더 내를 보면 기본 서버 주소로 접근 시에 렌더링 되는 브라우저 파일들이 저장되어 있다.

http://127.0.0.1:8080/index.html 주소로 들어가면 아래의 화면이 보이고, 이 화면들을 구성하는 파일이 설치한 apache 폴더 내에 담겨있는 것이다.

따라서 다른 곳에 위치한 웹서버에 접근하기 위해서는 그 웹서버의 IP주소(실제로 DNS)를 알아야 한다.

• 127.0.0.1은 같은 로컬 컴퓨터의 IP주소를 의미한다. 즉 로컬 내의 개발 단계에서 같은 컴퓨터 내의 웹브라우저와 웹서버 간의 통신을 의미하는 일반적인 IP주소이다.(즉 127.0.0.1(localhost)는 우리집으로 가줘라는 의미이다.)
• web server를 경유해서 web browser와 index.html 파일과 통신하는 것이다. 
• 이러한 개념은 바로 서로 다른 컴퓨터 간의 접속과 통신을 위해 필요한 개념이다. (실제로 웹서버를 통하지 않고도 같은 컴퓨터 내의 개발 단계에서는 잘 열리므로, 웹서버의 기능과 역할에 대해서 잘 와닿지 않을 수도 있다. 하지만 이는 실제 서비스가 동작하는 경우를 고려한 기능인 것)

웹 브라우저와 웹서버의 통신

 

따라서 실제로 다른 컴퓨터의 웹서버를 통해 그 컴퓨터의 브라우저 파일을 읽는 경우의 통신에 대해서 이야기해보자. 

이런 경우 그 컴퓨터 web server의 IP 주소를 알아서 접근하여 그 컴퓨터의 index.html 파일을 불러오도록 요청해야 한다. 

 

AWS에서 웹서버 설치 

 

우분투 환경에서 apache 설치하기

 

우선 블로그 내의 EC2 사용 및 서버 접속 관련된 글을 참고하여 가상의 컴퓨터에 접속 하여야한다.

(블로그 글 링크)

 

일단 sudo apt-get update 로 가상 컴퓨터 내의 시스템을 업데이트 해준다. 

아래와 같은 터미널 창에 명령어를 입력하여 apache를 설치한다.

sudo apt-get install apache2

우분투 환경에서 NginX 설치하기

sudo apt-get install nginx

 

실제로 apache 설치 확인 및 접속하기

(생활코딩 강의 참고)

 

AWS EC2에서 제공하는 public ip 주소를 주소창에 입력하면 우리가 만든 서버의 웹페이지로 들어갈 수 있다. 

 

해당 주소로 들어갔을 때 볼 수 있는 웹페이지 내에서 아래의 부분을 보면, 컴퓨터 내의 해당 위치에 

현재 브라우저를 표시하는 파일이 저장되어 있다는 것을 확인할 수 있다.

 

->실제로 apache와 Nginx 간에 설치하는 방식 차이는 크지 않다. 성능부분에서의 특징 차이가 있을 뿐이다.

이를 잘 고려해서 사용하면 될것이다.

 

사실 웹서버에서 메인은 웹서버 기본환경을 설정하고, 실제 서버와 연동시켜 주는 작업일 것이다.

이는 다른 글에서 정리해 두었으니 필요하면 해당 글을 참고

 

Reference

developer.mozilla.org/ko/docs/Learn/Common_questions/What_is_a_web_server

youngmind.tistory.com/entry/Apache-vs-Nginx

medium.com/@bdv111/aws-ec2%EC%97%90%EC%84%9C-nginx%EB%A1%9C-react-%EC%95%B1-%EC%A7%81%EC%A0%91-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-c1e09639171e

codechacha.com/ko/deploy-react-with-nginx/