1. NGINX 정적(static)파일 연결하기

찌뮤 2021. 3. 19. 09:22

2021. 3. 19. 09:22

NGINX - 정적 파일 연결하기 | Serving Static Content

먼저, Nginx 로 Static 파일을 반환하는 웹서버를 만들어보자. 먼저 웹서버가 하는일을 생각해보자!

포트를 listen 해야한다.
정적파일이 존재하는 곳에서 가져올수 있어야한다.

포트 연결하기

1. http directive 선언

포트를 연결하려면 NGINX 파일을 설정 해주어야한다. 파일이름은 nginx.conf 이고 해당 파일 위치는 /usr/local/etc/nginx (mac 기준)에 위치해 있다. nginx 를 http layer(layer 7) 에서 사용하기 위해서는 http directive 블럭 을 선언해 주어야한다.(directive 가 무엇인지 알고 싶다면 NGINX 개념과 구성 편을 참고)

nginx.conf 파일

http {}

2. server directive 선언

layer 7 을 사용하는 http 블럭을 만들었다면 이제 포트를 듣고 있는 서버를 선언해 주어야한다. 8080 포트를 듣고 있는 server directive를 선언해주자.

이유는 모르겠지만.. ngnix 는 강제로 event directive를 사용하기 때문에, 일단 비어있는 events directive 도 만들어주자

http {
    server {
        listen 8080;
    }
}

evens { }

3. 포트 연결 상태 확인

이제 주소창에 localhost:8080 이라고 입력해준다면 아래와 같은 페이지를 볼 수 있다.

정적 파일 가져오기

"난 이페이지를 만든적이 없는데...?"

이 페이지를 만든적이 없지만 welcome to nginx 라고 적힌 HTML 문서를 볼수 있다. 그 이유는 Nginx 는 기본적으로 root directory 에서 static 파일을 가져오고 있다. 그렇다면 root directory는 어디일까?

/usr/local/Cellar/nginx/1.19.8/html

해당 디렉터리로들어가면 nginx 를 설치할때 함께 설치 되었던 html 파일을 찾을 수 있다.

1. root 로 사용할 디렉터리 만들기

해당 디렉터리를 사용해도 되지만 우리는 우리가 원하는 곳에 root directory을 만들 것이다. 먼저 root 로 사용할 directory 를 만들어주고 index.html 파일을 작성해주자.

cd /Users/Amuse/Documents/dev/server
vim index.html

<html>
  <body>
    My own content: NGNIX
  </body>
</html>

2. 디렉터리를 루트 디렉터리로 선언해주기

http {
    server {
        listen 8080;
        root /Users/Amuse/Documents/dev/server/;
        }
    }
}

이렇게 선언하고 localhost:8080으로 이동해보면, 내가 작성한 정적파일을 가져오는것을 볼 수 있다.

3. 여러개의 디렉터리에서 html 문서 가져오기

/Users/Amuse/documents/dev/server 를 루트 디렉터리로 설정했기때문에 이곳을 기준으로 가지치듯 다른 디렉터리도 작성해주자.

cd /Users/Amuse/Documents/dev/server
mkdir web1
mkdir web2

cd site1
vim index.html

cd site2
vim index.html

각 디렉터리 안에 index.html 을 만들어주자

/Users/Amuse/documents/dev/server/web1/index.html

<html>
  <body>
    this is WEB 1
  </body>
</html>

/Users/Amuse/documents/dev/server/web2/index.html

<html>
  <body>
    this is WEB 2
  </body>
</html>

localhost:8080/web1/ 로 이동해보면

localhost:8080/web2/ 로 이동해보면

모두 출력이 잘되고 있다!

3. Image 파일 가져오기

cd /Users/Amuse/Documents/dev/server
mkdir images
cd images
[이미지 넣기]

이미지를 넣어주고 이미지는 전용 이미지 경로를 만들어주기 위해 nginx.conf 설정을 해준다.

http {
    server {
        listen 8080;
        root Users/Documents/dev/server/;
        
        location /images {
        
            root /Users/documents/dev/server/;
            
        }
    }
}

event { }

localhost:8080/images/ 로접근한다면 forbidden 페이지가 표시될것이다. 당황하지말고 끝까지 이미지 경로를 적어준다면 이미지가 잘보일것이다. localhost:8080/images/[파일명.jpg]/ 로 설정한다면 해당 이미지가 반환될것이다.

4. 접근제어 하기

보여주고 주고 싶지 않은 파일이 있다면 regular expression 사용도 가능하다

http {
    server {
        listen 8080;
        root Users/Documents/dev/server/;
        
        location /images {
        
            root /Users/documents/dev/server/;
            
        }
        
        location ~ .png$ {
        
            return 403;
            
        }
    }
}

event { }

location ~ 뒤에 정규표현식을 사용해서 특정파일 접근을 차단할 수도 있다. png 로 끝나는 파일의 반환을 막고 싶다면 이렇게 설정파일을 작성하면된다. 그리고 해당 URI로 이동해본다면 forbidden 이라는 메세지를 볼수 있다

'WEB SERVER > nginx' 카테고리의 다른 글

2. NGINX 프록시 서버(proxy server) 만들기 -정리중 (0)	2021.03.19
NGNIX 개념과 구성 (0)	2021.03.13

개발 공부 공간 | 찌뮤