[WAS와 Web Server] 03. nginx Web Server와 웹 호스팅

# 학습 목표

• nginx를 통해 정적 웹 사이트, 정적 콘텐츠를 이해합니다.
• HTTP 기반의 서버를 생성하는 소프트웨어인 nginx를 사용하여, 웹 서버(Web Server)를 생성하여 정적 웹페이지 호스팅을 따라 해보세요.
• 다음과 같은 구조 중에서, 정적 웹페이지 호스팅의 경우에는 HTML, CSS등의 정적 파일만 전달하면 되기 때문에, 보다 단순한 구조인 Client - Web Server의 구조를 가집니다.
• nginx 샘플 정적 파일을 호스팅 하는 과정을 따라해보며, 환경 설정 파일을 작성하는 방법과 지시어에 대해서 학습하세요.
•   

  

 

---

# 학습 내용

1.  nginx Web Server Hands-on

1) nginx 설치

nginx 설치 레퍼런스

homebrew를 이용한 Mac용 nginx 설치 레퍼런스

# ubuntu linux 버전
$ sudo apt-get update
$ sudo apt-get install nginx
$ sudo nginx -v
nginx version: nginx/1.18.0 (Ubuntu)

2) 정적 콘텐츠 호스팅하기

nginx.conf

개요

- 환경 설정 파일. 관리자가 편집하거나 프로그램을 분석할 수 있는 텍스트 파일로 프로그램의 작동 방법을 결정 

nginx.conf 파일 구조

- 환경 설정은 nginx.conf 파일에 값을 지정하여 설정

- nginx.conf 파일은 논리적으로 작성되어 있는 지시어(Directives) 목록으로 애플리케이션 전체가 지시어에 부여하는 값에 의해서 작동

- NGINX는 특정 지시어의 묶음 형태로 모듈을 만들어 이를 통해 작동

- 기본적인 지시어들은 NGINX의 코어 모듈에 포함되어 있으며, 필요한 모듈을 만들어 사용할 수 있음

# nginx.conf 파일 위치를 파악
roheerumi@devops:/etc/nginx$ sudo find / -name nginx.conf
/etc/nginx/nginx.conf
roheerumi@devops:/etc/nginx$ tree
.
├── conf.d
├── fastcgi.conf
├── fastcgi_params
├── koi-utf
├── koi-win
├── mime.types
├── modules-available
├── modules-enabled
│   ├── 50-mod-http-image-filter.conf -> /usr/share/nginx/modules-available/mod-http-image-filter.conf
│   ├── 50-mod-http-xslt-filter.conf -> /usr/share/nginx/modules-available/mod-http-xslt-filter.conf
│   ├── 50-mod-mail.conf -> /usr/share/nginx/modules-available/mod-mail.conf
│   └── 50-mod-stream.conf -> /usr/share/nginx/modules-available/mod-stream.conf
├── nginx.conf
├── proxy_params
├── scgi_params
├── sites-available
│   └── default
├── sites-enabled
│   └── default -> /etc/nginx/sites-available/default
├── snippets
│   ├── fastcgi-php.conf
│   └── snakeoil.conf
├── uwsgi_params
└── win-utf

6 directories, 18 files

# nginx.conf 파일 내용 확인
# conf.d/default.conf, sites-available/default에 적혀있는 경우도 있음
roheerumi@devops:/etc/nginx$ cat nginx.conf 
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}


#mail {
#	# See sample authentication script at:
#	# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#	# auth_http localhost/auth.php;
#	# pop3_capabilities "TOP" "USER";
#	# imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#	server {
#		listen     localhost:110;
#		protocol   pop3;
#		proxy      on;
#	}
# 
#	server {
#		listen     localhost:143;
#		protocol   imap;
#		proxy      on;
#	}
#}

 

nginx.conf 파일의 구성

지시어	설명
worker_processes number | auto;	- nginx 프로세스 실행 가능 수를 정의하는 지시어 - 최적의 값으로는 CPU의 코어 수, 데이터를 저장하는 하드 디스크 수, 로드 패턴을 비롯한 여러 요인에 따라 달라짐 - 보통은 CPU 코어 수 만큼을 할당하는 것이 보통이며, auto로 설정해두면 자동으로 값을 알맞게 설정해줌.
include file | mask;	- include 지시어는 특정 파일을 포함하는 기능을 수행 - 지시어가 있는 바로 그 위치에 해당 파일 내용이 삽입 - (예) # nginx.conf include mime.types include /dir/*
지시어 블록(directive block)	- 모듈 안에 작성된 지시어들은 블록 안에서만 사용할 수 있기 때문에, 블록 내에 작성된 지시어는 블록의 문맥에서만 의미를 가짐 - (예외) 일부 지시어들은 서버의 전 범위에 효력을 가지기 때문에 메인 블록이라 부르는 환경 설정 파일에 작성될 수도 있고, 경우에 따라서는 한 블록 안에 다른 블록이 삽입될 수도 있음
events { ... }	- events 블록은 네트워크의 작동 환경을 설정하는 지시어를 제공합니다. -(예) worker_connections : 하나의 프로세스가 처리할 수 있는 연결(connections)의 수로, 최대 연결 수는 worker_processes X worker_connections 로 계산
http { ... }	- http 블록은 웹서버에 대한 동작을 설정 - HTTP 부분과 관련된 모듈의 지시어와 값을 정의 - server와 location의 루트 블록 - http, server, location 블록은 계층 구조를 가지고 있으며, 많은 지시어가 각 블록에서 동시에 사용될 수 있는데, http 블록의 내용은 server 블록의 기본값이 되고, server 블록은 location 블록의 기본 값이 됨 - 만약 상위 블록에서 선언된 지시어를 하위 블록에서 다시 선언하면 상위의 지시어는 무 - http 블록 안에는 한 개 이상의 server 블록을 선언 가능
server { ... }	- server 블록은 하나의 호스트를 선언하는데 사용하며, http 블록 안에서만 사용될 수 있음 - server 블록 안에는 한 개 이상의 location 블록을 선언 가능
location { ... }	- location 블록은 특정 URL을 처리하는 방법을 정의 - (예) http://example.com/hello와 http://example.com/world 에 접근하는 요청을 다르게 처리하고 싶을 때 사용

* 참고 : http://nginx.org/en/docs/ngx_core_module.html#events

 

3) 기본 샘플 페이지 테스트

# ngnix sevice 시작
$ sudo service nginx start

# 정상 실행되었는지 프로세스 확인
$ ps -ef | grep 'nginx'
root        3088       1  0 14:37 ?        00:00:00 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
www-data    3089    3088  0 14:37 ?        00:00:00 nginx: worker process
www-data    3090    3088  0 14:37 ?        00:00:00 nginx: worker process
www-data    3091    3088  0 14:37 ?        00:00:00 nginx: worker process
roheeru+    4539    2082  0 14:58 pts/0    00:00:00 grep --color=auto nginx

서버 관련 환경 설정 파일 확인

- Mac OS : /opt/homebrew/etc/nginx 에서 nginx.conf.default
- Ubuntu : /etc/nginx/conf.d/default.conf 또는 /etc/nginx/sites-available/default 파일

# server 관련 환경 설정 확인
$ pwd
/etc/nginx/sites-available
$ cat default 
##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
	listen 80 default_server;
	listen [::]:80 default_server;

	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}

	# pass PHP scripts to FastCGI server
	#
	#location ~ \.php$ {
	#	include snippets/fastcgi-php.conf;
	#
	#	# With php-fpm (or other unix sockets):
	#	fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
	#	# With php-cgi (or other tcp sockets):
	#	fastcgi_pass 127.0.0.1:9000;
	#}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#	listen 80;
#	listen [::]:80;
#
#	server_name example.com;
#
#	root /var/www/example.com;
#	index index.html;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}

리스닝포트인 80을 기입하여 localhost:80으로 접속

해당 페이지는 서버 관련 환경 설정의 root(/var/www/html)에 지정된 파일

$ cd /var/www/html
$ cat index.nginx-debian.html 
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

4) conf 파일에 Server 블록 작성

특정 경로에 index.html 파일 생성

<!DOCTYPE html>
<html>
<head>
<title>My Awesome Web</title>
</head>
<body>

<h1>Hello World</h1>
<p>This is for Codestates DevOps Bootcamp!</p>

</body>
</html>

nginx.conf 파일 수정

# nginx.conf 파일의 http 블럭에 server 관련 블럭 추가
$ sudo vim nginx.conf 
$ sudo nginx -s reload
$ cat nginx.conf 
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

	server {
		listen 10024;
		server_name localhost;

		location / {
			root /home/roheerumi/devops/nginx_study; 
			index index.html;
		}
	}
}

브라우저로 접속

 

Apache와 Nginx 차이

출처 : 코드스테이츠 데브옵스 부트캠프 과정