page asset 경로 오류

[youngkwangjoo]

페이지 접속시

www.livflow.co.kr/:13

   GET https://www.livflow.co.kr/assets/index-iVl2EyZf.css net::ERR_ABORTED 404 (Not Found)

www.livflow.co.kr/:12

   GET https://www.livflow.co.kr/assets/index-B9PyCQyo.js net::ERR_ABORTED 404 (Not Found)

문제가 발생

엔진엑스, docker와 실제 경로 충돌로 예상

[youngkwangjoo]

/ # cat var/log/nginx/assets_error.log / # cat var/log/nginx/assets_access.log

기록이 없는걸로 봐서 assets에 아무런 요청이 도달하지않음

[youngkwangjoo]

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /assets/ {
            alias /usr/share/nginx/html/assets/;
            try_files $uri $uri/ =404;

            access_log /var/log/nginx/assets_access.log combined;
            error_log /var/log/nginx/assets_error.log debug;
        }

/ # ls usr/share/nginx/html/assets/ Logo-miwEHPOj.svg index-B9PyCQyo.js index-iVl2EyZf.css

엔진엑스 설정상 경로는 맞음

실제 파일도 존재함

[youngkwangjoo]

<script type="module" crossorigin src="/assets/index-B9PyCQyo.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-iVl2EyZf.css">

/ # ls usr/share/nginx/html/assets/ Logo-miwEHPOj.svg index-B9PyCQyo.js index-iVl2EyZf.css

파일 이름에도 오타가 없음

[youngkwangjoo]

리디렉션 오류인가 했지만

/usr/share/nginx/html # curl -I http://localhost/assets/index-B9PyCQyo.js HTTP/1.1 301 Moved Permanently Server: nginx/1.23.4 Date: Sun, 24 Nov 2024 17:11:09 GMT Content-Type: text/html Content-Length: 169 Connection: keep-alive Location: https://localhost/assets/index-B9PyCQyo.js

/usr/share/nginx/html # curl -I http://localhost/assets/index-iVl2EyZf.css HTTP/1.1 301 Moved Permanently Server: nginx/1.23.4 Date: Sun, 24 Nov 2024 17:11:20 GMT Content-Type: text/html Content-Length: 169 Connection: keep-alive Location: https://localhost/assets/index-iVl2EyZf.css

/usr/share/nginx/html # curl -k -I https://localhost/assets/index-B9PyCQyo.js HTTP/1.1 404 Not Found Server: nginx/1.23.4 Date: Sun, 24 Nov 2024 17:18:25 GMT Content-Type: text/html Content-Length: 153 Connection: keep-alive Vary: Accept-Encoding

/usr/share/nginx/html # curl -k -I https://localhost/assets/index-iVl2EyZf.css HTTP/1.1 404 Not Found Server: nginx/1.23.4 Date: Sun, 24 Nov 2024 17:18:29 GMT Content-Type: text/html Content-Length: 153 Connection: keep-alive Vary: Accept-Encoding

301 리디렉션이 제대로 되고있고 https에 대해서만 404가 뜨고있음

[youngkwangjoo]

믹스 컨텐트나 리다이렉트 과정에서 오류가 발생하는지 확인하기 위해

https->http로 확인해봤지만

같은오류가 발생했음

[youngkwangjoo]

트러블 슈팅 내용은 다음과같다.

GET https://www.livflow.co.kr/assets/index-iVl2EyZf.css net::ERR_ABORTED 404 (Not Found) www.livflow.co.kr/:12

GET https://www.livflow.co.kr/assets/index-B9PyCQyo.js net::ERR_ABORTED 404 (Not Found)

우선 사이트에 들어가면 위와같은 문제가 발생했다.

문제의 내용은 간단하게 내가 nginx에서 지정해놓은 경로에 assets에서 저 파일들을 못찾고 있다는건데

실제로 내가 겪은 문제는 2가지였다.

1번은 root /usr/share/nginx/html/assets/; 이부분에 50x.html, index.html 2개만 존재했고 assets란 파일이 없었다.

이에 프론트엔드 파일 전반에 대한 이해도가 없었던 나는 좀 찾아보고 물어보면서 알게되었는데

우선 docker컨테이너로 배포하는 과정에서 알게 된 사실은 다음과 같다.

dockerfile 에서 이미지를 빌드할때 npm install 과 npm run build라는 과정을 통해 리액트와 html파일들을 하나의 index.html로 만든다. 그리고 이게 이미지 파일에 들어간다. 내 상황에서는 이미지 파일에서는 usr/share/nginx/html/에 logo와 assets파일이 있는걸 확인했다. 근데 이게 compose과정을 지나서 컨테이너가 되면 파일이 없어지는걸 확인했다. 이 문제는 대게는 빈 파일을 덮어씌우는 경우가 대부분이라 compose 마운트 경로를 수정해주니 해결되었다. 여기서도 클로드가 추천해준대로 ./dist를 마운트 하는게 아니라 빌드 볼륨을 따로 만들어 주었는데 사실 이부분은 그냥 ./dist로 해도 문제가 없을거같다. volumes: build_volume: driver: local driver_opts: type: "none" device: "./dist" # 빌드된 정적 파일들이 있는 경로를 지정 o: "bind"

volumes:
  - build_volume:/usr/share/nginx/html

이런 설정을 추가해서 dist에 덮어씌우는 파일을 제대로 만들어서 이 문제는 해결하였다.

분명 컨테이너에 docker exec frontcontainer-nginx /bin/sh 로 들어가서 직접 파일이 있는지 확인을 하였다. 근데 분명 usr/share/nginx/html/assets에 파일이 있는걸 확인했는데 도메인 접속을 하면 파일을 못찾는다는 오류가 발생했다. 어째서인지 모르겠어서 디버그 관련해서 access_log /var/log/nginx/assets_access.log combined; error_log /var/log/nginx/assets_error.log debug; 이런 로그 관련 코드를 추가해주고 어떤 로그가 오는지 확인해보려고했는데 로그에 아무것도 안남는걸 확인했다.

여기까지 결과로는 실패하면 error에 가고, 성공하면 access에 기록이 남아야하는데 이게 안남는다는건 assets에 도달자체를 못한다는 문제라고 생각했다.

그렇다면 문제는 현재 경로 자체를 잘못찾고있다는 것과 아니면 파일 관련 권한 문제로 파일에 도달하지 못한 문제. 2개의 선택지밖에 없는데 아무리 생각해도 엔진엑스는 정상작동하고 있었다. 그렇다면 경로문제라고 생각했다. 여기까지 오는데 3일이 걸렸다. 배포부터 nginx 컨테이너 생성과 배포 관련 지식이 전무하다보니 시간이 오래걸린듯 하다.

이제 문제의 해결방법은 컨테이너 내부 로그가 아니라 컨테이너 자체의 로그를 확인해야할거같아서 docker logs frontend-nginx 를 쳐서 로그를 확인해보았다.

2024/11/24 19:17:37 [error] 32#32: *9 open() "/etc/nginx/html/Logo_Icon.svg" failed (2: No such file or directory), client: 162.142.125.198, server: www.livflow.co.kr, request: "GET /Logo_Icon.svg HTTP/1.1", host: "59.5.15.183" 이런 말도안되는 로그를 확인했다.

좀 찾아보니 엔진엑스는 기본적으로 /etc/nginx/html/ 이곳에서 파일을 찾기 때문에 기본설정을 바꿔주려면

location 블록밖에

root /usr/share/nginx/html;

이 설정이 필요한거같다. 그래서

root /usr/share/nginx/html;

# 정적 파일 제공
location / {
    index index.html;
    try_files $uri $uri/ /index.html;

}

location /assets/ {
    # 경로 설정을 올바르게 설정
    alias /usr/share/nginx/html/assets/;
    try_files $uri =404;

}

이렇게 설정을 해주니 페이지가 들어가졌다.