미니 프로젝트/마이 서버

Nginx - 초보자 가이드

시샐 2025. 6. 26. 17:52

https://nginx.org/en/docs/beginners_guide.html

 

Beginner’s Guide

Beginner’s Guide This guide gives a basic introduction to nginx and describes some simple tasks that can be done with it. It is supposed that nginx is already installed on the reader’s machine. If it is not, see the Installing nginx page. This guide de

nginx.org

 

 

아는게 없어서 두고두고 보려고 초보자 가이드를 요약해 보았다. (정적 콘텐츠 부분)

맨 아래에는 index.html과 styles.css로 간단한 사이트를 만들어 보았다.

 

1. Nginx 개요

 

Nginx는 웹 서버, 리버스 프록시, 로드 밸런서, FastCGI 게이트웨이 등 다양한 역할을 수행할 수 있다.

기본적으로 하나의 마스터 프로세스(master process)와 여러 개의 워커 프로세스(worker process)로 구성된다.

  • 마스터 프로세스: 설정 파일을 읽고 평가하며, 워커 프로세스를 관리.
  • 워커 프로세스: 실제 요청을 처리.
  • 이벤트 기반 모델을 사용하여 요청을 효율적으로 처리.
  • 설정 파일(nginx.conf)을 통해 동작 방식이 결정됨.

 

설정 파일(nginx.conf)의 기본 위치:

  • /etc/nginx/nginx.conf
  • /usr/local/nginx/conf/nginx.conf
  • /usr/local/etc/nginx/nginx.conf

 

sigsaly@sigsaly-server:~$ ls /etc/nginx
conf.d  fastcgi_params  mime.types  modules  nginx.conf  scgi_params  uwsgi_params
sigsaly@sigsaly-server:~$ ls /usr/local/nginx/conf
ls: cannot access '/usr/local/nginx/conf': No such file or directory
sigsaly@sigsaly-server:~$ ls /usr/local/nginx/conf/
ls: cannot access '/usr/local/nginx/conf/': No such file or directory
sigsaly@sigsaly-server:~$ ls /usr/local/etc/nginx
ls: cannot access '/usr/local/etc/nginx': No such file or directory
sigsaly@sigsaly-server:~$

 

내 서버에서는 /etc/nginx/nginx.conf 가 확인 되었다.

 

 

2. Nginx 시작, 종료, 재시작

 

Nginx 실행 파일을 이용해 제어할 수 있다.

 

1) Nginx 시작

 

명령을 실행하면 Nginx가 실행됨

nginx

 

2) Nginx 종료 

nginx -s stop # 즉시 종료
nginx -s quit # 현재 요청을 처리한 후 종료 (권장)

 

 

3) 설정 파일 다시 로드

 

설정 파일을 변경한 후 적용하려면 아래 명령을 사용한다.

nginx -s reload
 
  • 설정 파일을 검토하고 문제가 없으면 새로운 설정을 적용.
  • 기존 워커 프로세스는 현재 요청을 모두 처리한 후 종료됨.

 

4) 로그 파일 다시 열기

nginx -s reopen
 
  • 새로운 로그 파일을 열어 기록을 계속할 수 있도록 함.

 

5) Unix kill 명령어로 종료

 

Nginx의 마스터 프로세스 ID(PID)를 찾고 종료할 수도 있다.

ps -ax | grep nginx # Nginx 프로세스 목록 확인
 
kill -s QUIT 1628 # 마스터 프로세스 종료 (PID=1628)
 

 

3. 설정 파일의 구조

 

Nginx는 모듈(modules)로 구성되며, 이 모듈들은 설정 파일에서 디렉티브(directives)를 사용하여 제어된다.

디렉티브는 단순 디렉티브(simple directive)와 블록 디렉티브(block directive)로 나뉜다.

  • 단순 디렉티브: - 디렉티브 이름과 매개변수를 공백으로 구분하여 작성하며, 마지막에 세미콜론(;)으로 끝난다.
worker_processes auto;
 
  • 블록 디렉티브: 단순 디렉티브와 동일한 형식을 가지지만, 세미콜론 대신 중괄호({})로 추가 명령어를 감싼다. 내부에 다른 디렉티브를 포함할 수 있다. 블록 디렉티브가 다른 디렉티브를 포함할 수 있는 경우, 이를 컨텍스트(context)라고 한다.

예를 들어, events, http, server, location이 대표적인 컨텍스트이다.

 

  • 컨텍스트 계층 구조:
    • main 컨텍스트: 설정 파일의 최상위 부분 (events, http 포함 가능)
    • http 컨텍스트: 웹 서버 설정 (server 포함 가능)
    • server 컨텍스트: 가상 호스트 설정 (location 포함 가능)
    • location 컨텍스트: 특정 URL 패턴에 대한 설정

 

설정 파일에서 # 기호 이후의 내용은 주석으로 처리된다.

4. 정적 콘텐츠 제공

 

웹 서버의 주요 역할 중 하나는 정적 파일(HTML, 이미지 등) 제공이다. 다음 예제에서는 요청된 URL에 따라 서로 다른 로컬 디렉토리에서 파일을 제공하는 방법을 설명한다.

 

1) 정적 파일을 저장할 디렉토리 생성

 

/data/www 디렉토리를 만들고 임의의 index.html 예제 파일을 추가한다.

 

* 설치된 nginx에는 /usr/share/nginx/html 디렉토리가 만들어져 있고, index.html이 들어가 있었다.

외부에서 http로 접근하면 다음과 같은 화면이 나왔다.

 

 

 

2) 설정 파일 편집

 

* 아래 내용은 가이드 문서에 기반하지만 설치 후 원래 만들어져 있는 /etc/nginx/nginx.conf 만으로 기본 설정이 되어 있고, html 서비스도 이미 되고 있으므로 대충 훑어보고 지나갔다.

 

 

기본 설정 파일에는 여러 개의 server 블록이 주석 처리된 상태로 포함되어 있다.

이제 기존 설정을 모두 주석 처리하고 새로운 서버 블록을 추가한다.

http {
    server {
    }
}
 

Nginx는 여러 개의 서버 블록을 가질 수 있으며, 각 서버 블록은 특정 포트 및 서버 이름(server_name)을 기준으로 요청을 처리한다.

요청이 들어오면, Nginx는 해당 요청의 URI를 기반으로 서버 블록 내부의 location 디렉티브와 비교하여 적절한 설정을 적용한다.

 

3) 기본 정적 파일 제공 설정

 

location을 추가하여 /data/www 디렉토리에서 정적 HTML 파일을 제공하도록 설정한다.

location / {
    root /data/www;
}
 
 
  • /로 시작하는 모든 요청은 /data/www 디렉토리에서 파일을 찾아 응답한다.
  • 예를 들어, http://localhost/index.html 요청이 들어오면 /data/www/index.html 파일을 반환한다.

 

4) 이미지 파일 요청을 다른 디렉토리에서 제공

 

추가로 /images/로 시작하는 요청을 /data/images 디렉토리에서 제공하도록 설정한다.

location /images/ {
    root /data;
}
 
  • /images/로 시작하는 모든 요청은 /data/images/ 디렉토리에서 파일을 찾아 제공한다.
  • 예를 들어, http://localhost/images/example.png 요청이 들어오면 /data/images/example.png 파일을 반환한다.

 

5) 최종 설정 파일 예제

 

아래는 완성된 서버 블록 설정이다.

server {
    location / {
        root /data/www;
    }

    location /images/ {
        root /data;
    }
}
 
 

이 설정을 통해:

  • http://localhost/somepage.html → /data/www/somepage.html
  • http://localhost/images/photo.jpg → /data/images/photo.jpg

파일이 존재하지 않을 경우 404 Not Found 오류를 반환한다.

 

6) 설정 적용 및 서버 재시작

 

설정 변경 사항을 적용하려면 Nginx를 재시작하거나 설정을 다시 로드해야 한다.

 

Nginx 시작

nginx
 

설정 파일 적용 (Nginx 실행 중이라면)

nginx -s reload
 

7) 로그 파일 확인 (문제 해결)

 

만약 웹 서버가 정상적으로 동작하지 않는다면, 로그 파일을 확인하여 문제를 해결할 수 있다.

 

접속 로그 확인

cat /var/log/nginx/access.log
 

에러 로그 확인

cat /var/log/nginx/error.log
 
  • /usr/local/nginx/logs/ 또는 /var/log/nginx/ 디렉토리에 저장됨.
  • 특정 파일이 존재하지 않거나 권한이 없는 경우, 에러 로그에 오류 메시지가 기록됨.

 

* 테스트를 위해 웹페이지를 하나 만들었다. 웹프로그래밍 교재에 있던 내용을 살짝 수정해서 만든 내용이다.

 

index.html

<!DOCTYPE html>
<html>
  <head id="head">
    <meta charset="UTF-8" />
    <title>My Test Website</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <header>
      <h1>My Test Website</h1>
    </header>

    <main>
      <h2 style="margin-bottom: 50px">We can count on anything.</h2>
      <p id="message">Press Button</p>
      <button onclick="handleClick()" id="button">Count</button>
    </main>
    <footer>
      <p>✍️ sigsaly@</p>
    </footer>
    <script>
      let count = 0;

      function handleClick() {
        count += 1;
        const paragraph = document.getElementById("message");
        paragraph.textContent = `Button pressed ${count} time${
          count > 1 ? "s" : ""
        }`;
      }
    </script>
  </body>
</html>
 

styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

header {
  background-color: #a1b4df;
  color: #fff;
  padding: 50px;
  text-align: center;
}

header h1 {
  margin: 0;
}

main {
  padding: 60px;
  text-align: center;
}

footer {
  background-color: #7f99d1;
  color: #fff;
  padding: 5px;
  text-align: center;
}

button {
  background-color: #9ec6f3; /* Green */
  border: none;
  border-radius: 10px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
 

위 두 파일을 /usr/share/nginx/html에 넣고 접속하여 아래 화면을 확인했다.

 
반응형