Nginx로 정적 컨텐츠 제공하기

2021. 8. 7. 16:12개발/기타

Nginx를 Web Server로 활용하여 정적콘텐츠를 제공하는 방법에 대해 학습하고 관련 예제를 작성합니다. 

 

Web Server는 웹 리소스를 관리하고 사용자의 요청에 따라 리소스를 제공하는 기능을 한다.

리소스는 텍스트, HTML, 이미지, 동영상 파일과 같은 파일들이며 반드시 정적일 필요는 없고, 사용자의 요청에 따라 리소스를 조작해서 제공할수도 있다. ( 오늘은 단순하게 정적인 컨텐츠만 제공하는 예제. )

1. Nginx 설치


Ubuntu Repository와 Official NGINX Repository를 통해서 다운로드 가능하다. 

나는 Ubuntu Repository를 통해 다운받았다.

 

apt-get install nginx 명령어로 nginx를 설치한다. 설치에 성공하면 자동으로 Nginx가 실행된다. 

( Nginx재시작 명령어는 nginx -s reload )

Nginx 설치

 

nginx -v 명령어를 통해 성공적으로 설치 되었는지 확인한다. 

Nginx 버전 확인

실행중인 nginx의 서버에 http request를 날려본다. 성공한다면 아래처럼 출력된다.

Nginx 실행 확인

웹 브라우저로 확인해보면 root경로( / )에 대한 파일을 확인할 수 있다. ( 샘플로 제공되는 파일은 html이다. )

Nginx 실행 확인

 

(Ubuntu 기준) /var/www/html에서 위 html파일의 위치를 확인할 수 있다.

index.nginx-debian.html의 위치


2. nginx.conf 셋팅하기


Nginx는 Load Balancing이나 reverse Proxy등 다양한 기능을 갖추고 있는데 오늘은 가장 Web Server스러운(?) 정적 컨텐츠 제공에 대해서만 작성한다. 정적컨텐츠는 사용자 요청시에 파일에 대한 수정이 발생하지 않고 그대로 제공되는 파일을 말한다. ( 이미지, 비디오, 동적 작업이 없는 html 문서 등 )

 

Nginx를 설치하면 /etc/nginx/에 각종 설정 파일이 생성되는데 Nginx에 대한 직접적인 설정은 nginx.conf 파일을 통해 할수 있다. 해당 파일을 열어보면 기본적인 셋팅이 되어 있는데 예제를 단순화 하기위해 해당 파일의 내용을 모두 지웠다. ( events나 http같은 directive에 대한 정보는 하단의 참고자료를 확인. ) 

설치직후 nginx.conf

 

 

나는 아래 사진과 같이 기본적인 설정만 했다. 

 

events는 nginx의 연결에 대한 기본적인 설정을 정의하는 블록이다. 하위에 multi_accept, worker_connections 와 같은 구문이 정의될 수 있으며, 앞서 언급한 2개의 구문은 별도 작성이 없으면 default 값이 자동으로 적용된다. ( 하지만 events 구문 자체를 생략하고 nginx를 실행하면 에러가 발생한다. )

 

http는 리소스에 대한 요청(Request)을 처리한다. 요청은 특정 도메인이나 IP주소가 될 수 있다.  http 외에도 mail과 stream 구문이 있는데 두 구문은 특정 TCP포트나 UNIX 소켓에 대한 요청을 처리한다. 

http하위를 보면 server 구문이 보인다. Nginx는 가상서버 기능을 제공한다. 물리적으로 1대의 서버라도 사용자가 설정한 갯수만큼 server를 생성해 요청을 처리할 수 있도록 한다. 아래 예시에서는 1개의 server만을 생성했다.

server하위에는 root 구문을 작성했다. root는 사용자의 요청에 대해서 prefix를 붙여주는 역할을 한다. /에 대한 요청이 들어온 경우 nginx 서버는 /data/www/ 디렉토리에 접근하게 된다. 

 

location은 뒤에 정의된 URI에 대한 처리를 담당한다. location을 / 로 작성한 경우 사용자의 / 요청에 대해 autoindex on; 옵션을 적용하도록 한다. location도 당연히 복수개 정의 가능하며 URI 부분에도 정규표현식과 같이 다양한 형태로 작성가능하다. ( autoindex on 옵션은 해당 경로에 있는 파일을 list형태로 제공할수 있도록 해준다. )

nginx.conf 작성

 

위 사진처럼 셋팅하면 사용자의 / 요청이 들어오면 Nginx는 /data/www/ 하위에 있는 정적 파일들을 list 형태로 제공한다. /data/www/ 디렉터리에는 hello.html과 flag 폴더를 생성해뒀다. 

/data/www/ 확인

 

웹브라우저를 통해 Web Server에 접근한다. 사용자가 / 경로에 접근시 autoindex on;에 의해 리스트 형태로 파일을 제공하는 모습이다. 

/data/www/에 존재하는 파일 목록

 

여기서 nginx.conf내 autoindex를 off로 설정하면 403에러가 발생한다. (autoindex를 작성하지 않는경우도 에러가 발생하는데 default값이 autoindex off;이기 때문이다.)

autoindex off셋팅
403에러 발생


3. index.html 파일


위 에러에서 배운게 있는데 만약 URI가 슬래쉬( / )로 끝나는 경우 Nginx는 해당 요청을 디렉토리에 대한 요청으로 해석하며, 디렉토리내에서 index파일을 찾으려고 한다는것. ( 별도 셋팅이 없다면 index.html을 찾는다. )

바로 직전에 autoindex off;로 셋팅한 경우(작성하지 않은 경우라도 default로 off가 적용됨 )403에러가 발생했는데 사실 index.html을 찾으려다 실패해서 403에러를 띄운것이다. 정리하면 아래와 같다.

autoindex on;인 경우

index.html이 없으면 그냥 파일 목록을 출력한다. 

index.html이 있으면 index.html을 출력한다. 

 

autoindex off;인 경우 

index.html이 없으면 403에러가 발생한다.

index.html이 있으면 index.html을 출력한다. 

 

index.html을 작성해서 예상대로 동작하는지 확인한다. 

index.html 작성

 

index.html파일의 내용을 출력하는 모습을 확인할 수 있다. 

웹브라우저에서 index.html 출력

 

 


※ 참고자료


 

 

Creating NGINX Plus and NGINX Configuration Files | NGINX Plus

Creating NGINX Plus and NGINX Configuration Files Understand the basic elements in an NGINX or NGINX Plus configuration file, including directives and contexts. NGINX and NGINX Plus are similar to other services in that they use a text‑based configurati

docs.nginx.com

 

 

Configuring NGINX and NGINX Plus as a Web Server | NGINX Plus

Configuring NGINX and NGINX Plus as a Web Server Configure NGINX and NGINX Plus as a web server, with support for virtual server multi-tenancy, URI and response rewriting, variables, and error handling. This article explains how to configure NGINX Open Sou

docs.nginx.com

 

 

Serving Static Content | NGINX Plus

Serving Static Content Configure NGINX and NGINX Plus to serve static content, with type-specific root directories, checks for file existence, and performance optimizations. This section describes how to configure NGINX and NGINX Plus to serve static cont

docs.nginx.com