[실습] Nginx 기본 문법 응용해보기

author

JSCODE 박재성

✅ Nginx 기본 웹 사이트 수정해보기

설정 파일 확인하기


$ cd /etc/nginx/conf.d/default.conf

/etc/nginx/conf.d/default.conf


server {
    listen       80; 
    server_name  localhost;


    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    # / 으로 시작하는 모든 경로를 처리 (ex. /index.html)
    location / {
        # /jscode.html로 요청이 들어오면 /usr/share/nginx/html/jscode.html 파일로 응답
        root   /usr/share/nginx/html;
        
        # /로 요청이 들어오면 /usr/share/nginx/html/index.html로 응답
        # 만약 /usr/share/nginx/html/index.html이 없을 경우, /usr/share/nginx/html/index.htm으로 응답
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

기존 웹 페이지 접속해보기

http://{EC2 IP 주소}로 접속해보자.

기본 웹 페이지 수정하기


$ cd /usr/share/nginx/html
$ sudo vi index.html

/usr/share/nginx/html/index.html


<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Welcome to JSCODE!</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>

웹 페이지가 수정됐는 지 확인하기

http://{EC2 IP 주소}로 접속해보자.

✅ Nginx 에러 페이지 수정해보기

설정 파일 확인하기


$ cd /etc/nginx/conf.d/default.conf

/etc/nginx/conf.d/default.conf


server {
    listen       80; 
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    
    # /50x.html과 완전히 일치하는 경로를 처리
    location = /50x.html {
        # /50x.html로 요청이 들어오면 /usr/share/nginx/html/50x.html 파일로 응답
        root   /usr/share/nginx/html;
    }
}

기존 에러 페이지 접속해보기

기본 에러 페이지 수정하기


$ cd /usr/share/nginx/html
$ sudo vi 50x.html

/usr/share/nginx/html/50x.html


<!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
html { color-scheme: light dark; }
body { width: 35em; margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif; }
</style>
</head>
<body>
<h1>Error!</h1>
<p>Sorry, the page you are looking for is currently unavailable.<br/>
Please try again later.</p>
<p>If you are the system administrator of this resource then you should check
the error log for details.</p>
<p><em>Faithfully yours, nginx.</em></p>
</body>
</html>

에러 페이지가 수정됐는 지 확인하기

http://{EC2 IP 주소}/50x.html로 접속해보자.

📎

이 글은 비전공자도 이해할 수 있는 Nginx 입문/실전 강의의 수업 자료 중 일부입니다.

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } # / 으로 시작하는 모든 경로를 처리 (ex. /index.html) location / { # /jscode.html로 요청이 들어오면 /usr/share/nginx/html/jscode.html 파일로 응답 root /usr/share/nginx/html; # /로 요청이 들어오면 /usr/share/nginx/html/index.html로 응답 # 만약 /usr/share/nginx/html/index.html이 없을 경우, /usr/share/nginx/html/index.htm으로 응답 index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }

<!DOCTYPE html> <html> <head> <title>Welcome to nginx!</title> <style> html { color-scheme: light dark; } body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </style> </head> <body> <h1>Welcome to JSCODE!</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>

server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; # /50x.html과 완전히 일치하는 경로를 처리 location = /50x.html { # /50x.html로 요청이 들어오면 /usr/share/nginx/html/50x.html 파일로 응답 root /usr/share/nginx/html; } }

<!DOCTYPE html> <html> <head> <title>Error</title> <style> html { color-scheme: light dark; } body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </style> </head> <body> <h1>Error!</h1> <p>Sorry, the page you are looking for is currently unavailable.<br/> Please try again later.</p> <p>If you are the system administrator of this resource then you should check the error log for details.</p> <p><em>Faithfully yours, nginx.</em></p> </body> </html>

[실습] Nginx 기본 문법 응용해보기 - 1

✅ Nginx 기본 웹 사이트 수정해보기

✅ Nginx 에러 페이지 수정해보기

[실습] Nginx 기본 문법 응용해보기 - 1

✅ Nginx 기본 웹 사이트 수정해보기

✅ Nginx 에러 페이지 수정해보기