nginx 적용시 css 깨지는 현상

Nginx를 사용하여 웹서버를 구축해보는 시간을 가진 적이 있다.

 

이때, 웹서버 nginx의 default.conf에서 proxy_pass로 설정을 하여 WAS(Web Application Server)에 있는 페이지를 요청했다.

 

근데, 처음 페이지를 요청을 했을 때 css와 js가 적용이 전혀 안 되었다.

 

콘솔에서 에러를 보니 404에러가 나타났다.

 

404 : url을 잘못 입력했을 때 요청한 url을 찾을 수 없음을 의미한다. 하지만 was에서는 문제없이 되었는데 여기서는 안 되는 것을 보았을 때url 자체에 오타가 있지는 않은 상황이다. 즉, 어떠한 이유로 리소스를 못찾고 있는 것이다.

 

이말은 즉, nginx를 사용하기 위해서는 nginx에서도 요청해서 가져올 수 있는 경로를 만들어줘야 한다는 의미이다.

 

왜냐하면 nginx를 설정해서 브라우저에 최초 화면이으로 나오게 하기 위해서 정적 폴더 및 파일들의 구조를 설정해 둔 대로 가져와야 하기 때문이다.

 

예를 들면,

server {
    listen 80;
    server_name example.com;

    # 정적 파일 처리
    location /static/ {
        alias /path/to/your/static/files/;
        # 정적 파일 캐싱을 위한 헤더 설정 (옵션)
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }

    # 동적 요청 처리 (예: PHP, Python, Node.js 등)
    location / {
        proxy_pass http://your_was_backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

이런 식으로 정적 폴더들을 가져와서 html등 기본 적으로 설정 해둔 구조형태로 ngnix에 가져와야 하는 것이다.

즉, 실제 html에 <script>와 <css>의 경로가 있는데 이 구조에 맞게 가져오면 되는 형태이다.

 

결과적으로 이를 반영하여 아래처럼 구성했더니, 깨졌던 화면이 정상적으로 돌아왔다.

 location /axxx/dxxx {
        proxy_pass http://192.xxx:8080/axxx/dxxx;
        # 클라이언트의 호스트 헤더를 유지
        proxy_set_header Host $host;

        # 클라이언트의 실제 IP 주소 전달
        proxy_set_header X-Real-IP $remote_addr;

        # 프록시를 거친 클라이언트의 IP 주소 리스트 전달
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # 클라이언트의 요청 프로토콜 전달 (HTTP 또는 HTTPS)
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    location /axxx/css/ {
        proxy_pass http://192.xxx:8080/axxx/css/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /axxx/js/ {
        proxy_pass http://192.xxx:8080/axxx/js/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

 location /axxx/img/ {
        proxy_pass http://192.xxx:8080/axxx/img/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

 

이후, 동적인 파일들은 was에 요청하게끔 proxy_pass를 설정해주면 된다.

 

 

이전에는 ngnix를 아무 생각없이 사용했는데, 생각보다 공부할 내용이 많은 것 같다.

 

차차 정리해서 블로그에 정리하도록 해야겠다.

 

 

*expires란 -> Nginx 설정 파일에서 expires 디렉티브는 브라우저 캐싱을 제어하기 위해 사용된다. 이 디렉티브는 클라이언트에게 제공되는 파일의 캐싱 기간을 설정한다. 클라이언트의 브라우저는 설정된 기간 동안 파일을 캐시하고, 서버로부터 다시 요청하지 않는다. 이렇게 함으로써 서버 부하를 줄이고, 클라이언트의 로드 시간을 단축할 수 있다.

 

참고:

https://velog.io/@dreamjh/djangonginx-%EC%82%AC%EC%9A%A9%EC%8B%9C-css-%EA%B9%A8%EC%A7%80%EB%8A%94-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0%EB%B2%95