[WEB - WAS 프로젝트 04] Local - 정적 컨텐츠 제공

개념

WEB 서버의 가장 기본적인 기능은 정적 컨텐츠(Static Content)를 제공하는 것입니다.

 

정적 컨텐츠란 이미 완성된 상태의 컨텐츠를 의미합니다. 즉, 컨텐츠를 생성하기 위해 DB 데이터를 조회하거나 특정 로직을 수행하는 과정 없이, 사용자에게 즉시 전달할 수 있는 형태의 컨텐츠를 말합니다.

 

대표적으로 이미지, HTML, CSS, JavaScript 파일 등이 정적 컨텐츠에 속합니다.

---

목적

WEB 서버가 정적 컨텐츠를 제공하는 가장 큰 이유는 WAS 서버의 부담을 줄여주는 것입니다.

 

WAS 서버는 DB를 조회, 비즈니스 로직 수행, 동적 컨텐츠 생성..등 담당하는 일이 겁나게 많습니다. 여기에 단순 작업인 정적 컨텐츠 제공까지 WAS가 맡게 되면 서버 부하가 증가할 수밖에 없습니다.

---

Nginx 설정 파일과 지시문

설정 파일 : nginx.conf

이전 글에서 Master Process가 설정 파일을 읽고 Worker Process를 생성한다고 설명했습니다. 즉 Nginx를 사용한다는 건, 설정 파일 수정을 통해, 우리가 원하는 동작을 수행하는 Worker process를 생성한다는 뜻입니다.

 

다음은 이미지는 터미널 편집기로 열어본 nginx.conf입니다. ( nginx.conf의 위치는 환경에 따라 다르지만 보통 etc/nginx에 위치해있습니다. )

지시문

그럼 이제 Nginx 초보자 가이드를 바탕으로 nginx.conf 기초 문법인 지시문에 대해 간략히 소개하겠습니다.

 

Nginx는 여러 모듈로 구성되고, nginx.conf에 작성된 지시문을 통해 모듈을 제어합니다. 지시문은 '단순 지시문'과 '블럭 지시문' 2가지 종류가 있습니다.

1. 단순(simple) 지시문

이름과 매개변수로 이뤄진 지시문입니다. 구분에는 space, 끝에는 ;을 사용합니다.

 

예시 : root /data/www;

2. 블럭(block) 지시문

'블럭 지시문'의 구조는 '단순 지시문'과 같이 이름과 매개변수, space 를 사용합니다. 다른 점은 중괄호({ })를 사용하며, 이를 통해 여러 지시문을 그룹화하고, 설정 파일의 계층 구조를 형성합니다. 또한 다른 지시문이 포함된 '블럭 지시문'을 context라고 부릅니다.

 

예시 :

http {
    ...
}

---

기본 설정 해석하기

다음은 nignx를 실행시키고 localhost:8080으로 요청을 보낸 화면입니다. 즉 nginx는 이미 정적 컨텐츠를 제공하고 있다는 뜻입니다.

이에 해당하는 nginx.conf 내용이 아래의 블럭 지시문입니다.

해석하면 다음과 같습니다.

• http { : http 프로토콜을 사용한 요청 중에서
  • server { : 이 서버가 처리한다.
    • listen 8080; : 8080 포트번호로 들어온
    • server_name localhost; : localhost 도메인을 사용한 요청은
    • location / { : 그리고 요청들 중에서 ' / ' 경로로 들어온 요청에 대해서는
      • root html; : html 경로에 있는 ( 여기서 html은 nginx의 docsroot를 뜻한다. 이전 글 참고 )
      • index index.html index.htm; : index.html이라는 정적 컨텐츠를 제공한다. 따라오는 index.htm의 뜻은 만약 index.html 파일이 없을때 제공되는 파일의 이름입니다.

---

구현

컨텐츠 준비

이번 프로젝트는 WEB 서버의 기능을 사용하고 운영하는 것이 목적이기 때문에 컨텐츠는 매우 간단하게 구성하겠습니다. GPT를 사용해 간단한 웹 페이지를 생성하고 바탕화면의 data/www 경로에 넣도록 하겠습니다.

nginx.conf 수정

1. 계속해서 포트 번호를 추가하기 귀찮기 때문에, listen을 http 기본 포트 번호인 80 으로 수정.
2. root를 정적 컨텐츠의 위치인 /User/forrest/Desktop/data/www로 수정.

결과 확인

http://localhost/  요청을 보내면 원하는 컨텐츠가 정상적으로 제공되는 것을 확인할 수 있습니다.

---

추가내용 : 컨텐츠 경로

Nginx 초보자 가이드을 보면 이미지를 제공 경로가 조금 다른 것을 확인할 수 있습니다.

 

이는 Nginx가 경로를 생성하는 방식 때문입니다. Nginx는 다음과 같은 방식으로 경로를 생성합니다.

location (요청 URL) {
    root (시작 경로)
    ...

=> 최종경로 : (시작 경로) + (요청 URL)

 

시작 웹 페이지의 경우 추가 경로 없이 요청을 하기 때문에 /경로로 요청을 보내면 응답받을 수 있도록 설정해야 합니다.

 

하지만 이미지 파일은 /images/이미지.png의 형식으로 요청을 보내기 때문에 서로 다른 방식으로 설정되어있습니다.

 

다음은 가이드의 정적 컨테츠 구조 예시입니다.

data
├── images
│   └── 이미지.png
└── www
    └── index.html

 

---

참고자료

• https://nginx.org/en/docs/beginners_guide.html
• https://www.youtube.com/watch?v=dLIGMgpDnRg&list=PLtUgHNmvcs6pHPTzi7Tsep5ffssOGh7h7&index=7