1. 배경
배포 환경에서 CSS와 JS 리소스가 로드되지 않는 문제가 발생하였습니다. 오류 메시지로는 404 오류와 함께 MIME 타입 관련 오류가 나타나고 있었습니다. 이 문제는 NGINX 리버스 프록시 설정이 잘못된 것에서 발생한 것으로 보입니다. 이 문제를 해결하는 과정과 적용된 해결책을 기록하고자 합니다.
2. 🔍문제 상황
배포 환경에서 Eureka 서버와 관련된 정적 리소스(CSS, JS, 이미지 등) 가 로드되지 않고, 브라우저에서 아래와 같은 오류가 발생했습니다.
1. 404 오류
Failed to load resource: the server responded with a status of 404 ()2. MIME 타입 오류
eureka/:1 Refused to apply style from 'https://www.eventor.store/eureka/css/wro.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.eureka/:1 Refused to execute script from 'https://www.eventor.store/eureka/js/wro.js' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.이 오류는 정적 리소스 파일들(CSS, JS, 이미지 등) 이 올바르게 로드되지 않거나, 잘못된 MIME 타입으로 인해 브라우저에서 제대로 처리되지 않는 상황을 나타냅니다.
3. 🧐원인 분석
이 문제의 원인은 NGINX 리버스 프록시 설정에 있었습니다. 기존에 설정된 프록시 규칙은 Eureka 서버로의 리버스 프록시만을 처리하고 있었고, 정적 리소스를 처리하는 경로(/js, /css, /images 등)에 대한 설정이 누락되어 있었습니다.
기존 설정:
location /eureka/ {
proxy_pass http://eventor-eureka:8761/;
}위의 설정은 Eureka 서버로 요청을 프록시할 때는 잘 작동했지만, 정적 리소스가 제대로 전달되지 않았습니다. Eureka에서 제공하는 정적 리소스에 대한 별도의 경로 설정이 필요했습니다.
4. 🔧해결 방법
문제를 해결하기 위해서는 Eureka 서버의 정적 리소스 경로에 대한 추가적인 리버스 프록시 설정을 추가해야 했습니다. 이를 통해 정적 리소스들이 제대로 전달되도록 하였습니다.
수정된 설정:
nginx/sites-available/default 파일 수정
# Eureka 서비스에 대한 기본 리버스 프록시 설정
location /eureka/ {
proxy_pass http://eventor-eureka:8761/;
}
# Eureka에서 제공하는 정적 리소스(js, css, images, fonts 등)에 대한 리버스 프록시 추가
location ~ ^/eureka/(js|css|images|fonts|webjars)/ {
proxy_pass http://eventor-eureka:8761;
}위의 설정은 /eureka/로 시작하는 경로에 대한 요청을 Eureka 서버로 리버스 프록시하고, 또한 정적 리소스(js, css, images, fonts 등) 에 대한 리버스 프록시도 추가하여 Eureka 서버에서 해당 리소스들이 정상적으로 반환되도록 했습니다.
⚙️NGINX 설정 적용
설정 파일을 수정한 후, 변경 사항을 NGINX에 적용하려면 NGINX를 다시 로드하거나 재시작해야 합니다.
docker exec -it nginx /bin/bash -c "nginx -s reload"💡 참고 사항
만약 NGINX를 통하지 않고 Eureka 서버가 실행 중인 포트(예: 8761번 포트) 를 외부에 직접 개방하여 접속하면, 이와 같은 정적 리소스 오류는 발생하지 않을 수도 있습니다.
NGINX 리버스 프록시 설정 없이 직접 접근하는 경우, 브라우저는 정적 리소스를 그대로 정상적으로 로드할 수 있기 때문입니다.
